基礎

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が生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。