📑

Next.jsのLayoutパターンで複数のLayoutを使い分ける

2023/04/30に公開

Next.js

tech

Next13より、/app(beta)が追加され、Routingの開発体験が大幅に変更されました。

この内の１つのLayoutパターンによって、/app配下のlayout.tsxページ間に再利用される部分を書いておくだけで簡単にコンポーネント化をすることができるようになっています。

app/layout.tsx

import Header from '@/components/Header'

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

また、各ページのディレクトリ配下にlayout.tsxを配置しておくことで、Layoutをネストさせることもできます。

 L app/
   L layout.tsx
   L page.tsx
   L hoge/
     L layout.tsx
     L page.tsx

app/hoge/layout.tsx

import Navber from '@/components/Navber'

export default function Layout({ children }) {
  return (
    <>
      <Navber />
      {children}
    </>
  )
}

レンダリング結果

<Header />
<main>
  <Navber />
  {children}
</main>

このとき、特定のページにおいてこのLayoutを適用させたくない場合でも、rootのLayoutは全てのページに適用されてしまいます。

そのため、/hogeのみにおいて、Headerを無効にしたい場合にはrootのlayout.tsxからHeaderを取り除くという方法が考えられますが、例外が特定のページのみの場合これ以外の各ページにおいてHeaderを適用しなければならず、Layoutパターンの効果を最大化できません。

そこで、同じくNext13で加わった機能としてRoute Groupsというものがありました。

これは/app配下において、(hoge)のように括弧で囲んだディレクトリを作成することで、ページをグループ化をすることができるものです。

 L app/
   L layout.tsx
   L (header)
     L page.tsx
     L fuga/
       L page.tsx
       L layout.tsx
   L (noHeader)
     L hoge/
       L page.tsx
       L layout.tsx

これによって、上記のようにHeaderの有無などでグルーピングすることで、そのグループの中だけに適用させる共有のLayoutを持つことができるようになります。

Next13の新機能は一通り目を通したと思っていましたが、全然知りませんでした。

Discussion