Dev Study
← 解説「layout.tsx — 共通UIの共有」に戻る

サンプルコードで身につける: layout.tsx — 共通UIの共有

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1最小のルートレイアウト

全ページの土台になる app/layout.tsx の最小形です。html と body を書く場所はここだけで、children の位置に各ページの中身が差し込まれます。どんな Next.js アプリにも必ず1つ存在するファイルです。

// app/layout.tsx — 全ページ共通の土台
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}
// children の位置に、表示中のページの中身が入る。

2全ページにヘッダーとフッターを付ける

レイアウトの一番よくある使い道で、共通 UI を1か所に書いて全ページで共有する例です。各 page.tsx にヘッダーを書いて回る必要がなくなり、修正も layout.tsx の1ファイルで済みます。

// app/layout.tsx — ヘッダーとフッターを全ページで共有
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <header>My Site — 全ページ共通のヘッダー</header>
        <main>{children}</main>
        <footer>© 2026 My Site</footer>
      </body>
    </html>
  );
}

3ブログ配下だけのレイアウト

途中のフォルダに layout.tsx を置くと、その配下のページだけに適用されることを示す例です。ルートレイアウトの内側にネストされるので、html や body をもう一度書く必要はありません。

// app/blog/layout.tsx — /blog 配下のページだけに適用
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <nav>ブログのカテゴリ: 技術 / 日常 / お知らせ</nav>
      {children}
    </div>
  );
}
// ルートレイアウトの children の中に、このレイアウトごと入る。
// /about など blog の外のページには影響しない。

4レイアウトの入れ子を関数で再現する

レイアウトの正体は「子の内容を受け取って包む関数」だと捉え直す例です。ルート → ブログの順に外側から包まれていくネストの仕組みを、文字列の合成として実行して確かめられます。

TypeScript

5管理画面だけサイドバーを付ける

一般向けページと管理画面で画面の骨格を変える、実務で頻出の構成例です。app/admin/layout.tsx を置くだけで /admin 配下の全ページにサイドバーが付き、一般ページには一切影響しません。

// app/admin/layout.tsx — /admin 配下の全ページにサイドバー
export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div style={{ display: "flex" }}>
      <aside>
        <p>ダッシュボード</p>
        <p>ユーザー管理</p>
        <p>売上レポート</p>
      </aside>
      <section>{children}</section>
    </div>
  );
}
// /admin/users へ移動してもサイドバーは再描画されず残り続ける。