レイアウトは複数のページをラップする共有 UI であり、ナビゲーション全体で永続化される — 子ルート間を移動する際に再レンダリングされたり、状態を失ったりしません。layout.tsx ファイルで定義します。
ルートレイアウト（必須）
tsx
() {
(
);
}
すべての App Router アプリは、ルートレイアウトを持つ必要があります — 古い _app.tsx/_document.tsx に置き換わります。
レイアウトはフォルダ構造に沿ってネストされるため、各セクションは独自の永続的なラッパーを追加できます：
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
/dashboard/settings から /dashboard/billing にナビゲートすると、ダッシュボードレイアウト（とその <Sidebar>）はマウントされたままになります — その状態（スクロール位置、開いているメニュー、フォーム入力）は保持され、ページコンテンツだけが切り替わります。これは、シェル全体を再レンダリングするより効率的で、より滑らかな UX を提供します。
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
ラッパーがナビゲーションごとにリセットされたいまれなケースでは、layout.tsx の代わりに template.tsx を使用します。
レイアウトは、App Router がルートツリーのあらゆるレベルで、共有された永続的な UI（ヘッダー、サイドバー、ナビゲーション）をモデル化する方法です。
ナビゲーション全体での永続化 — 状態を保持し、シェルの再レンダリングを回避する — は App Router の中核的な利点であり、ネストされたレイアウトは各セクションが独自の構造を明確に構成することを可能にします。