前回の記事では、Learn Next.jsのチャプター３の日本語解説として、Webサイトのパフォーマンスとユーザー体験（UX）に直結する「フォント」と「画像」の最適化について解説しました。
今回、チャプター４で解説するのは、Next.js（App Router）の大きな魅力である、「レイアウト（layout.tsx）」機能です。
ヘッダーやサイドナビゲーションなど、複数のページで共通して使いたいUIを効率よく管理できるだけでなく、画面遷移時のパフォーマンスや状態保持（State）において非常に強力なメリットを持っています。
今回は、ダッシュボード専用のレイアウトを作成しながら、layout.tsx の役割や部分レンダリング（Partial Rendering）の仕組みを詳しく解説します！
1. ダッシュボード専用のレイアウト（layout.tsx）を作成する
まずは、/dashboard フォルダの中に layout.tsx を作成し、ダッシュボード共通のレイアウトを作っていきます。
コードの追加
/app/dashboard/layout.tsx を新規作成し、以下のコードを記述します。
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}2. コードのポイント解説
このコードで押さえておくべきポイントは以下の2点です。
① <SideNav/> コンポーネントのインポート
サイドバーを表示するためのコンポーネントをインポートしています。layout.tsx 内でインポートされたコンポーネントは、そのレイアウト配下にあるすべてのページで共通して表示されます。
② children プロップス（Props）の受け取り
<Layout/> コンポーネントは children を引数として受け取ります。
この children には、同じフォルダ内や配下のフォルダにある page.tsx（またはネストされた別の layout.tsx） が自動的に注入（ネスト）されます。
/app/dashboard/layout.tsx
└── /app/dashboard/page.tsx ({children} の中身として描画される)3. ダッシュボードを表示する page.tsx を作成する
作成したレイアウトを表示させるシンプルな page.tsx を作成してみましょう。
/dashboard フォルダの中に以下のような page.tsx を作成します
export default function Page() {
return <p>Dashboard Page</p>;
}開発サーバーを立ち上げ、ローカル環境（http://localhost:3000/dashboard）を開いて確認してみましょう。
npm run dev左側にサイドナビゲーション、右側にメインコンテンツが表示されていれば成功です！
3. ネストされたレイアウトと「部分レンダリング（Partial Rendering）」
Next.js で layout.tsx を使う最大のメリットが、この「部分レンダリング（Partial Rendering）」です。
通常、ページを遷移すると画面全体がリロード（再描画）されますが、Next.js の App Router では変更があったページ部分（children）だけを差し替え、共通の layout.tsx は再描画（リレーアウト）しません。
部分レンダリングのメリット
- 画面のチラつきがない（高速な体験）: 重いナビゲーション要素などを毎回再読み込みしないため、爆速で画面が切り替わります。
- React の State（状態）が維持される: サイドバーが開いている状態や、入力フォームの入力途中データなど、レイアウト側の React State がページ移動してもリセットされずに保持されます。
✍️ サイドバー付きダッシュボードを作るたびに悩まされていた「画面のチラつき」
これまでReactで管理画面を作っていた頃、サイドバー付きのレイアウトで ページを移動するたびにヘッダーやサイドバーまで一緒に再描画され、一瞬画面全体が白くチラついたり、サイドバーのスクロール位置が一番上に戻ってしまったりする問題が少し気になっていました。
しかし、App Routerで /dashboard/layout.tsx を1枚置くだけでこの悩みが一発で解決した時は感動しました。 ページを切り替えてもサイドバーはピタッと固定されたままで、右側のメインコンテンツだけがサクサク入れ替わる、とてもスマートなUXを実感しました。
4. Root Layout（ルートレイアウト）との違い
Chapter 3 で編集した /app/layout.tsx を覚えているでしょうか？
// /app/layout.tsx (Root Layout)
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}これは Root Layout（ルートレイアウト） と呼ばれ、Next.js アプリケーションにおいて必須のファイルです。
| 種別 | 配置場所 | 役割 |
| Root Layout | /app/layout.tsx | アプリ全体の <html> や <body> タグの管理、全ページ共通フォント・CSSの適用 |
| Nested Layout | /app/dashboard/layout.tsx | 特定のグループ（例: /dashboard 配下）だけに適用したい固有のUI（サイドナビ等） |
今回作成した /app/dashboard/layout.tsx は、ルートレイアウトの中にさらにネスト（内包）されて描画されるため、全アプリ共通のスタイル（inter フォントなど）を継承しつつ、ダッシュボード特有の見た目を実現できています。
✍️ 階層が深くなって気づく、layout.tsx のメリット
React Routerなどのライブラリを使えばReactでもネストレイアウト自体は可能でした。しかし、大きな違いは「設定ファイルを書く必要すらなくなったこと」です。
プロジェクトが大きくなり、/dashboard/invoices/layout.tsx のように深い階層に専用のレイアウトを追加した時に、next.jsのメリットが際立ちます。
開発者が何も意識しなくても、Next.jsがディレクトリ構造を読み取って、 RootLayout ➔ DashboardLayout ➔ InvoicesLayout ➔ InvoicesPage というように、「フォルダを掘って layout.tsx を置くだけで設計が完結する」 というファイルベースルーティングの恩恵を一番強く実感した体験でした。
5. 理解度チェック（クイズ）
公式チュートリアルにあったクイズで、今回の理解度をチェックしてみましょう！
Q. Next.js における layout ファイルの目的は何でしょうか？
- A: グローバルなエラーハンドラーとして機能するため
- B: アプリ全体でデータ取得や状態管理を行うため
- C: 複数のページ間で共通の UI を共有するため
- D: アプリ全体のエントリーポイントとして機能するため
正解： C（To share UI across multiple pages）
解説：
layout.tsx の主な目的は、サイドナビやヘッダーなど、複数のページ間で共通して利用する UI を共有することです。また、ページ移動時にレイアウトを再描画しない（部分レンダリング）ことでパフォーマンスを最大化します。
まとめ＆次回予告
Chapter 4 では、Next.js の強力な機能である layout.tsx と「部分レンダリング」について学びました。
- layout.tsx を使えば、特定グループ共通のUIを簡単に作成できる
- children プロップスに各ページ（page.tsx）が入る
- 画面遷移時はページ要素のみが更新され、レイアウトは再描画されない（部分レンダリング）
次回は Chapter 5「Navigating Between Pages（ページ間ナビゲーション）」 です。
<Link> コンポーネントを使ったクライアントサイド遷移や、プリフェッチ（事前読み込み）の仕組みについて学んでいきましょう！
コメント