共有ナビゲーション

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

ナビゲーションバーはレイアウトに配置する典型的な要素です。一度記述すれば、すべてのルートに存在し、再マウントされることもありません。

// app/layout.jsx
import Link from 'next/link';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav>
                    <Link href="/">Home</Link>
                </nav>
                {children}
            </body>
        </html>
    );
}

{children} が配置されている位置に注目してください: nav の後です。その前に置いたものはページの上に表示され、後に置いたものは下に表示されます。レイアウトは単なる JSX です。唯一のルールは、どこかに {children} を含めなければならないということだけです。

これで、レイアウトはロックされたものではなく、あなたのファイルになりました。navを追加して、その下のページが変わっても配置がそのまま維持されるのを確認しましょう。

チャレンジ

簡単

すべてのページに表示されるナビゲーションバーを Coddy Eats に追加します。

app/layout.jsx の <body> 内、かつ {children} の上に、以下を追加してください：

id="nav" を持った <nav>
その中に、id="home-link" とテキスト Home を持った / への <Link>
そして、id="menu-link" とテキスト Menu を持った /menu への <Link>

各ページはロックされています。編集するのはレイアウトのみです。テストではその後に /menu にアクセスし、ナビゲーションが画面上に残っているか確認します。

自分で試してみよう

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}