共通ヘッダーとフッター
3枚に同じものが書いてある
いまの fleama は、おすすめ・商品一覧・出品する の3ページに、同じナビゲーションが3回書いてあります。リンクを1本足したいときに3か所を直すことになり、どれか1つを忘れると、そのページだけ行き先が足りない状態になります。
こういう「全ページに出るもの」は、ルートレイアウトに1回だけ書きます。
ヘッダーとフッターを layout に寄せる
やることは2つです。layout.tsx にナビゲーションとフッターを書き、page.tsx からは同じものを消します。
<header className="site-header">
<span className="site-logo">fleama</span>
<nav className="site-nav">
<Link href="/">おすすめ</Link>
<Link href="/items">商品一覧</Link>
</nav>
</header>
<main className="site-main">{children}</main>
<footer className="site-footer">fleama 個人間のフリマ</footer>消すほうを忘れると、ナビゲーションが二重に出ます。移したら必ずページ側を見に行きます。
どこまでを layout に置くか
判断はひとつです。全ページに出るものだけを置きます。ヘッダー、グローバルナビ、フッター、著作権表示あたりが当てはまります。
一方で「商品一覧だけに出る絞り込み」のような、特定のページの持ちものは page.tsx に残します。layout に置くと、要らないページにまで出てしまいます。区画ごとの枠がほしくなったら、次のレッスンで扱う入れ子のレイアウトを使います。
演習
ナビゲーションとフッターを layout.tsx に移します。