ルートグループ
appディレクトリでは、通常ネストされたフォルダがURLパスにマッピングされます。しかし、フォルダをルートグループとしてマークすることで、そのフォルダをルートのURLパスに含めないようにすることができます。
これにより、URLパス構造に影響を与えずに、ルートセグメントやプロジェクトファイルを論理的なグループに整理できます。
ルートグループは次のような場合に便利です:
- ルートをグループ化（サイトセクション、目的、チームごとなど）
- 同じルートセグメントレベルでネストされたレイアウトを有効化:
- 同じセグメント内で複数のネストされたレイアウトを作成（複数のルートレイアウトを含む）
- 共通セグメント内の一部ルートにレイアウトを追加
規約
ルートグループは、フォルダ名を括弧で囲むことで作成できます: (folderName)
例
URLパスに影響せずにルートを整理
URLに影響を与えずにルートを整理するには、関連するルートをまとめるグループを作成します。括弧内のフォルダ名はURLから除外されます（例: (marketing) や (shop)）。
(marketing)と(shop)内のルートは同じURL階層を共有していますが、各フォルダ内にlayout.jsファイルを追加することで、グループごとに異なるレイアウトを作成できます。
特定セグメントにレイアウトを適用
特定のルートにレイアウトを適用するには、新しいルートグループ（例: (shop)）を作成し、同じレイアウトを共有するルート（例: accountとcart）をそのグループに移動します。グループ外のルート（例: checkout）はレイアウトを共有しません。
複数のルートレイアウトを作成
複数のルートレイアウトを作成するには、トップレベルのlayout.jsファイルを削除し、各ルートグループ内にlayout.jsファイルを追加します。これはUIやエクスペリエンスが完全に異なるセクションにアプリケーションを分割する場合に便利です。各ルートレイアウトには<html>タグと<body>タグを追加する必要があります。
上記の例では、(marketing)と(shop)の両方に独自のルートレイアウトがあります。
補足情報:
- ルートグループの命名は整理目的以外に特別な意味はなく、URLパスに影響しません。
- ルートグループを含むルートは、他のルートと同じURLパスに解決すべきではありません。例えば、ルートグループはURL構造に影響しないため、
(marketing)/about/page.jsと(shop)/about/page.jsは両方とも/aboutに解決され、エラーが発生します。- トップレベルの
layout.jsファイルなしで複数のルートレイアウトを使用する場合、ホームpage.jsファイルはルートグループの1つで定義する必要があります（例:app/(marketing)/page.js）。- 複数のルートレイアウト間を移動すると、ページ全体の再読み込みが発生します（クライアントサイドナビゲーションではなく）。例えば、
app/(shop)/layout.jsを使用する/cartからapp/(marketing)/layout.jsを使用する/blogに移動すると、ページ全体が再読み込みされます。これは複数のルートレイアウトの場合のみ適用されます。