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

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

チャレンジ

簡単

app/layout.jsx にシェルを作成します。

./globals.css と next/link から Link をインポートします。
default が Coddy Eats で template が %s | Coddy Eats の title オブジェクトを含む metadata を export します。
<body> の内部に、3つのリンクを持つ <nav className="nav"> を追加します: / への className="brand"（表示テキスト: Coddy Eats）、/ への id="nav-menu"（表示テキスト: Menu）、および /?category=dessert への id="nav-desserts"（表示テキスト: Desserts）。
nav の下で、{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