layout.tsx
同じ枠を、1か所にまとめる
第2章で fleama のページを切り分けました。このままだと、ヘッダーの文字を1つ直したいだけでも、すべての page.tsx を開いて回ることになります。ページが増えるほど直し漏れが出ます。
Next.js には、その繰り返しをやめるための決まりがあります。app/layout.tsx です。
layout.tsx が受け持つもの
layout.tsx は、その階層より下にあるページ全部を包む枠です。包まれる中身は children として渡ってきます。React実践で書いた children と同じものです。
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>
<header className="site-header">fleama</header>
<main className="site-main">{children}</main>
</body>
</html>
);
}app/ の直下に置いた layout.tsx をルートレイアウトと呼びます。ここだけは特別で、<html> と <body> を自分で書きます。ページ全体のいちばん外側を作るのがこのファイルの仕事だからです。
遷移しても消えない
ルートレイアウトのうれしいところは、ページを移っても枠が作り直されないことです。/ から /items へ移ると、入れ替わるのは children の中身だけで、ヘッダーはそのまま画面に残ります。読み込み直しが起きないぶん、遷移が速く見えます。
そして「ヘッダーを直す」作業が、layout.tsx 1本を開くだけで終わります。ページを何枚増やしても、直す場所は増えません。
演習
app/layout.tsx を書いて、全ページ共通の枠を作ります。