アクティブリンク

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 34/47。

ナビゲーションバーのあるすべてのサイトは、現在表示しているリンクをハイライト表示します。それを行うには、コンポーネントがサーバーからは事後的に判断できない1つのこと、つまり現在画面に表示されているURLはどれかを知る必要があります。

next/navigation がそれを提供してくれます:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // /about では、pathname は文字列 '/about' です
}

フックであるため、既にご存知のルールが適用されます。'use client' で始まるファイルのコンポーネント内でのみ動作します。サーバーレンダリングされるアプリにおいて、ナビゲーションバーが通常数少ないクライアントコンポーネントの1つである理由はまさにこれです。ルート変更のたびに再実行される必要があります。

そこからは単純な比較です：

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

nav がどこにあるかに注目してください。layout 内にあります。これは 1 回レンダリングされると、毎回の navigation を跨いで保持されるため、再マウントではなく pathname の変更によって再レンダリングが行われます。

チャレンジ

簡単

ナビゲーションバーは動作していますが、現在どのページにいるかが表示されていません。components/Nav.jsx でこれを修正してください。

usePathname() を呼び出して、結果を pathname に保存します。
各リンクの href が pathname と一致する場合は className に "nav-link active" を指定し、一致しない場合は通常の "nav-link" を指定します。

Home リンクは / を指し、Menu リンクは /menu を指します。

自分で試してみよう

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>
    );
}