← Next.js コース
3. layout.tsx — 共通UIの共有
layout.tsx は、同じフォルダ以下のすべてのページを包む共通の枠です。children という props で各ページの中身を受け取り、ヘッダーやナビゲーションなど共通の UI と一緒に表示します。app/layout.tsx は全ページ共通のルートレイアウトで、html タグと body タグをここに書きます。
実務では「全ページにヘッダーを付けたい」「管理画面だけサイドバーを付けたい」といった場面で使います。app/admin/layout.tsx のように途中のフォルダにも置け、その配下のページだけに適用されます。
経験則として、レイアウトはページを移動しても再描画されず状態が保たれます。逆に「ページごとに毎回リセットしたい UI」をレイアウトに置くと意図通り動かないので、それは各ページ側に書きます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// app/layout.tsx — すべてのページを包むルートレイアウト
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>
<header>サイト共通のヘッダー</header>
{children} {/* ここに各ページの中身が入る */}
</body>
</html>
);
}