Next.js 13のRoute Groupsでページごとにレイアウトを使い分ける方法

Next.jsのRoute Groupsを使用することで、ページの種類ごとに異なるレイアウトを簡単に適用することができます。

例えばログイン済みユーザー用のページ、非ログインユーザー用のページ、管理者用のページといった具合にページの種類ごとにレイアウトを分けることが可能となります。

本記事では、Route Groupsを使用したレイアウトの切替の実装イメージと注意点についてを説明します。

ディレクトリ構成

app
├─ layout.tsx ・・・①共通レイアウト
├─ (auth) ・・・ログイン済みユーザー用
　　     ├─ layout.tsx ・・・②専用レイアウト
　　     ├─ home
　　     　　   ├─ page.tsx ・・・専用ページ(/home)
　　     ├─ account
　　     　　   ├─ page.tsx ・・・専用ページ(/account)
├─ (portal) ・・・非ログインユーザー用
　　     ├─ layout.tsx ・・・専用レイアウト
　　     ├─ page.tsx ・・・専用ページ(/)

上記のような構成でディレクトリおよび、layout.tsxやpage.tsxを配置します。

このような構成を取ることで、ログイン済みユーザー用と非ログインユーザー用のレイアウトを分けることができます。

ここでポイントなのが、①共通レイアウトの存在です。この共通レイアウトがなければ、パーシェルレンダリングが機能しなくなるため、条件によっては画面遷移時にFull Page Reloadが発生してしまうことがあります。

各種レイアウトのサンプル

①共通レイアウト

共通レイアウトではシンプルにhtmlタグとbodyタグのみを構成します。こうすることで最低限htmlとbodyタグが再レンダリング対象外になり、Full Page Reloadを防ぐとこができます。

import './globals.css'
import {Inter} from 'next/font/google'
const inter = Inter({subsets: ['latin']})

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
                                     children,
                                   }: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <body className={inter.className}>
    {children}
    </body>
    </html>
  )
}

②専用レイアウト

対して専用レイアウトでは、htmlタグとbodyタグを含めない構成にします。

import Navigation from "@/app/(auth)/navigation";

export default function RootLayout({
                                     children,
                                   }: {
  children: React.ReactNode
}) {
  return (
    <Navigation>
      {children}
    </Navigation>
  )
}