Next.jsのApp Routerで画面ごとにlayout.tsxを使い分ける：Route Groups

Next.jsでWebサイトを作成していると、画面によってヘッダーやフッターなどを変更したくなることがあると思います。

具体的には、ログイン画面やフォーム画面、そしてメインのコンテンツ….全て同じヘッダーやフッターを使い回すことができればいいですが、案件によっては変更が求められることがあります。

その場合に、urlを条件にコンポーネントを出し分けることがもできますが、ページが増えるほどに条件が増え、複雑になりがちです。

そんな悩みを解決してくれるのが、今回ご紹介する**Route Groups（ルートグループ）**です。

この記事では、Route Groupsの基本的な概念から、具体的な使い方、メリット・デメリットまでを分かりやすく解説します。

Route Groupsとは？

Route Groupsは、URLの構造に影響を与えずに、appディレクトリ内のルート（ページやレイアウト）を整理し、ページ毎にlayout.tsxを割り当てることができます。

具体的には、フォルダ名を括弧 () で囲むことで、そのフォルダをルートグループとして定義します。

Bash

app/
├── (marketing)/
│   ├── layout.tsx  // (marketing)グループ専用のレイアウト
│   ├── page.tsx      // URLは /
│   └── about/
│       └── page.tsx  // URLは /about
│
├── (shop)/
│   ├── layout.tsx  // (shop)グループ専用のレイアウト
│   ├── products/
│   │   └── page.tsx  // URLは /products
│   └── cart/
│       └── page.tsx  // URLは /cart
│
└── layout.tsx      // ルートレイアウト

上記の例では、(marketing)と(shop)という2つのルートグループを作成しています。

app/(marketing)/page.tsx のURLは /marketing ではなく / になります。

app/(shop)/products/page.tsx のURLは /shop/products ではなく /products になります。

このように、括弧で囲まれたフォルダ名はURLのパスセグメントとしては無視されるのが最大の特徴です。これにより、URL構造をクリーンに保ったまま、ファイル構成を自由に整理できます。

Route Groupsを使う場面

では、具体的にどのような場面でRoute Groupsが役立つのでしょうか。主なユースケースを3つご紹介します。

特定のセクションで異なるレイアウトを適用したい場合

最も一般的な使い方です。例えば、サイトの主要部分と、認証関連（ログイン、新規登録）ページでヘッダーやフッターのデザインを変えたい場合などに非常に便利です。

例：認証ページ用のレイアウトを作成する

Bash

app/
├── (main)/
│   ├── layout.tsx  // ヘッダー・フッター付きのメインレイアウト
│   ├── page.tsx      // URL: /
│   └── dashboard/
│       └── page.tsx  // URL: /dashboard
│
├── (auth)/
│   ├── layout.tsx  // ロゴのみのシンプルな認証用レイアウト
│   ├── login/
│   │   └── page.tsx  // URL: /login
│   └── signup/
│       └── page.tsx  // URL: /signup
│
└── layout.tsx

この構成により、/loginや/signupにアクセスしたときだけ、(auth)/layout.tsx が適用され、それ以外のページでは (main)/layout.tsx が適用される、といった制御が可能になります。

機能やチームごとにファイルを整理したい場合

アプリケーションを機能単位でグループ化することで、プロジェクトの見通しが格段に良くなります。

(marketing): LPやブログなど、マーケティング関連のページ

(app): 実際のアプリケーションのメイン機能（ダッシュボードなど）

(support): ヘルプページやお問い合わせフォーム

このように分割することで、関心の分離が明確になり、特にチームでの開発効率が向上します。

③ 複数のルートレイアウトを作成したい場合
少し高度な使い方ですが、同じ階層に複数のルートレイアウト（やタグを含むレイアウト）を作成したい場合にも利用できます。

例えば、サイト全体とLPでタグに設定する内容（言語設定など）を変えたい場合に、それぞれのルートグループ内にルートレイアウト（layout.tsx）を配置することで実現できます。

3. メリット・デメリット

Route Groupsは非常に便利ですが、もちろん良い点ばかりではありません。メリットとデメリットをしっかり理解しておきましょう。

メリット
プロジェクトの整理整頓: 関連するルートを物理的に同じフォルダにまとめることで、プロジェクトの構造が直感的で分かりやすくなります。

URL構造の維持: ファイルを整理してもURLが変わらないため、SEOやユーザー体験に影響を与えません。

柔軟なレイアウト適用: セクションごとに独立したレイアウトを簡単に適用でき、UIコンポーネントの共通化と分離を両立できます。

競合の回避: 同じURLパスを持つがレイアウトが異なるページを、グループを分けることで共存させられます。

デメリット
ディレクトリ階層の深化: Route Groupsを多用しすぎると、フォルダの階層が深くなり、かえってファイルを探しにくくなる可能性があります。

概念の理解: Next.jsやApp Routerの初心者は、なぜ括弧付きのフォルダがURLに影響しないのか、という概念を理解するのに少し時間がかかるかもしれません。

基本的にはメリットの方が大きいですが、「何のためにグループ化するのか」という目的を明確にし、無計画に使いすぎないことが重要です。

4. まとめ

Route Groupsは、Next.jsのApp Routerを使いこなす上で欠かせない機能の一つです。

括弧 () でフォルダを囲むと、URLパスから除外される

特定のセクションだけでレイアウトを切り替えたり、機能ごとにファイルを整理したりするのに最適

URLをクリーンに保ちながら、開発者が管理しやすいプロジェクト構造を実現できる

最初は少し戸惑うかもしれませんが、一度この便利さを知ると手放せなくなります。ぜひあなたのNext.jsプロジェクトにもRoute Groupsを取り入れて、より快適な開発環境を構築してみてください。