ルートグループ
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に移動すると、ページ全体が再読み込みされます。これは複数のルートレイアウトがある場合のみ適用されます。