まとめ：ナビゲーション
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 38/47。
チャレンジ
中級章のまとめ: 1つの小さなアプリで、URLの両方向を扱います。現在の場所を読み取るnavと、クエリ文字列によってフィルタリングされるmenuページです。
components/Nav.jsxでusePathname()を呼び出し、各linkのhrefが現在のパスと一致する場合はclassNameに"nav-link active"を付与し、それ以外の場合は通常の"nav-link"を付与します。Homeは/、Menuは/menuです。app/menu/page.jsxで、searchParamsからcategoryを読み取り（promiseであることを忘れないでください）、一致するdishesのみを表示するか、categoryが指定されていない場合はすべて表示します。
/menu?category=pizza は4つのdishesのうち2つを表示し、Menuのlinkがハイライトされる必要があります。
自分で試してみよう
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}