📑
Next.jsのLayoutパターンで複数のLayoutを使い分ける
Next13より、/app(beta)
が追加され、Routingの開発体験が大幅に変更されました。
この内の1つの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