ステップ 1：シェル（骨組み）

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

チャレンジ

簡単

app/layout.jsx にシェルを構築します。

./globals.css と next/link から Link をインポートします。
title オブジェクトを持つ metadata をエクスポートします。default は Coddy Eats、template は %s | Coddy Eats にします。
<body> の内部に、3つのリンクを含む <nav className="nav"> を追加します。1つ目は className="brand" で / を指し、表示テキストは Coddy Eats にします。2つ目は id="nav-menu" で / を指し、表示テキストは Menu にします。3つ目は id="nav-desserts" で /?category=dessert を指し、表示テキストは Desserts にします。
ナビゲーションの下で、{children} を <div className="container"> で囲みます。

自分で試してみよう

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

Next.js の基本のすべてのレッスン

1なぜNext.jsなのか

Next.jsが追加するもの Appフォルダ最初のページまとめ：なぜNext.jsなのか

4サーバーとクライアント

2種類のコンポーネントエラーの読み方 'use client' の行クライアント部分を小さく保つクライアント内のサーバーまとめ: サーバーとクライアント

7クライアント側のナビゲーション

アクティブリンクプログラムによるルーティング URLによるフィルタリング Route Handlers まとめ：ナビゲーション

3レイアウトとメタデータ

ルートレイアウト共有ナビゲーションネストされたレイアウトページのメタデータ動的メタデータまとめ：レイアウト

6Server Actions

Server Actionとは動作するフォームフォームデータの取得ページの更新まとめ：Server Actions