基礎

layoutと共通UI

なぜ学ぶか： どのページにもあるヘッダーとフッター — 全ページにコピペしていたら管理不能です。Next.jsはlayout.tsxに「共通の骨格」を一度だけ書きます。例を見てください。

まずはこの例を見てみましょう

// app/layout.tsx — 全ページ共通の骨格
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>

        <main>{children}</main>   {/* ← ここに各ページがはめ込まれる */}

        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

layoutが「額縁」、各ページ（page.tsx）が「絵」。childrenの位置に絵がはめ込まれます。

layout.tsx＝ページを包む共通の骨格

ヘッダー・フッターなど全ページ共通の部分を書く場所です。例の{children}の位置に、URLに応じたページが差し込まれます。

ページを移動してもlayoutは残る

ページを移ってもlayout部分は描き直されません。「ヘッダーがちらつかない」のはこの仕組みのおかげです。

修正依頼の指針

「全ページのヘッダーを直して」→ layout.tsx、「このページだけ直して」→ 該当のpage.tsx。AIへの指示もこの区別で的確になります。

コード例

// app/layout.tsx — 全ページ共通の骨格
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>

        {/* ここに各ページ（page.tsx）がはめ込まれる */}
        <main>{children}</main>

        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

このlearnアプリのヘッダー（テーマ切替付き）とフッターも、まさにlayout.tsxに書かれています。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。