つくる - 共通レイアウト
第3章で分かったこと
この章で手に入れたものは4つです。
- ルートレイアウトは全ページを包み、遷移しても作り直されない
- layout.tsx はどのフォルダにも置けて、外側から順に重なる
- 現在地は usePathname で取れる。使うファイルには "use client" が要る
- 全体に効かせる見た目は globals.css に、名前がぶつからないよう分かる名前で書く
今日はこれを1つに組み上げて、fleama の共通枠を完成させます。新しい概念は出てきません。
組み上がりの形
出来上がりは次の重なりになります。
RootLayout ヘッダー + SiteNav + フッター
└ MypageLayout サイドバー (マイページ配下だけ)
└ page.tsx その URL の中身SiteNav は用意してあります。現在地に is-active を付けるところまで書いてあるので、レイアウトに差し込むだけで動きます。ただし is-active の見た目はまだ globals.css にありません。クラスが付いていても見た目が変わらなければ、利用者には現在地が伝わりません。
出来たかどうかの見分け方
書き終えたら、ヘッダーのリンクを順に押してみます。次の3つが同時に成り立っていれば完成です。
- どのページでもヘッダーとフッターが消えない
- 押した項目だけ見た目が変わる
- マイページに入るとサイドバーが増え、それでもヘッダーは残る
演習
3つのファイルに手を入れて、共通枠を完成させます。