ネストしたレイアウト｜基礎を学ぶ

一部のページにだけ出したい枠

マイページには、出品した商品や購入履歴へ移るためのサイドバーがほしくなります。ところがルートレイアウトに書くと、おすすめや商品一覧にまでサイドバーが出てしまいます。

Next.js の答えは単純です。layout.tsx は app/ の直下だけでなく、どのフォルダにも置けるというものです。

app/
  layout.tsx              全ページの枠
  page.tsx
  mypage/
    layout.tsx            /mypage 以下だけの枠
    page.tsx
    listings/
      page.tsx

app/mypage/layout.tsx は、/mypage と /mypage/listings にだけ効きます。/items には効きません。

このとき2枚のレイアウトは、置き換わるのではなく重なります。外側がルートレイアウト、その内側がマイページのレイアウト、いちばん内側が page.tsx です。

RootLayout
  └ MypageLayout
      └ page.tsx

つまりマイページを開いても、サイトのヘッダーはそのまま出ます。マイページ側のレイアウトが受け取る children は、その階層より下のページです。ルートレイアウトと書き方は変わりませんが、html と body は書きません。あれはいちばん外側の1枚だけの仕事です。

この仕組みは何段でも重ねられます。管理画面の中にさらに設定画面の枠を作る、といった作り方が、フォルダを掘るだけでできます。どこに置いたかがそのまま「どこまで効くか」になるので、読む人にも分かります。

マイページ配下にだけ効くサイドバーを作ります。