Route Groups
app ディレクトリ内では、通常入れ子構造のフォルダが URL パスにマッピングされます。しかし、フォルダを Route Group としてマークすることで、そのフォルダがルートの URL パスに含まれないようにできます。
これにより、URL パスの構造に影響を与えずに、ルートセグメントとプロジェクトファイルを論理的なグループに整理することができます。
Route groups は以下の用途に役立ちます：
- URL パスに影響を与えずにルートをグループ化する例として、サイトのセクションごと、意図ごと、チームごとなどにグループ化する ルートをグループ化する
- 同じルートセグメントレベルで ネストされたレイアウト を有効にする：
- 共通セグメント内の特定ルートにローディングスケルトンを追加する
規約
Route group は、フォルダ名を括弧で囲むことで作成できます：(folderName)
例
URL パスに影響を与えずにルートを管理する
URL に影響を与えずにルートを管理するには、関連しているルートをまとめておくためのグループを作成します。括弧内のフォルダは URL から省略されます（例えば、(marketing) や (shop) など）。
(marketing) や (shop) 内のルートが同じ URL 階層を共有しているとしても、それぞれのグループ内に layout.js ファイルを追加することで異なるレイアウトを作成できます。
特定のセグメントをレイアウトに選択する
特定のルートをレイアウトに選択するには、新しい Route Group（例：(shop)）を作成し、同じレイアウトを共有するルートをそのグループに移動します（例：account と cart）。グループ外のルートはレイアウトを共有しません（例：checkout）。
特定ルートにローディングスケルトンを選択する
loading.js ファイルを使って特定のルートに ローディングスケルトン を適用するには、新しい Route Group（例：/(overview)）を作成し、そのグループ内に loading.tsx を移動します。
これで、loading.tsx ファイルはダッシュボード → 概要ページにのみ適用され、他のダッシュボードページには影響を与えずに URL パスの構造も影響しません。
複数の root レイアウトを作成する
複数の root レイアウト を作成するには、トップレベルの layout.js ファイルを削除し、各 Route Group 内に layout.js ファイルを追加します。これは、UI や体験が完全に異なるセクションにアプリケーションを分割するのに便利です。それぞれの root レイアウトに <html> と <body> タグを追加する必要があります。
上記の例では、(marketing) と (shop) はそれぞれ自身の root レイアウトを持っています。
Good to know:
- Route Groups の命名は、組織のためのものであり、それ自体に特別な意味はありません。URL パスには影響を与えません。
- Route Group を含むルートは、他のルートと同じ URL パスに解決 されないようにする必要があります。 例えば、Route Groups は URL 構造に影響を与えないため、
(marketing)/about/page.jsと(shop)/about/page.jsはどちらも/aboutに解決してエラーを引き起こします。- 複数の root レイアウトをトップレベルの
layout.jsファイルなしで使用する場合、ホームのpage.jsファイルは Route Groups のひとつに定義する必要があります。例えば：app/(marketing)/page.js。- 複数の root レイアウト間をナビゲートすることは、（クライアントサイドのナビゲーションとは対照的に）完全なページロード を引き起こします。例えば、
app/(shop)/layout.jsを使用している/cartから、app/(marketing)/layout.jsを使用している/blogへナビゲートすると完全なページロードが発生します。これは 複数の root レイアウトにのみ 適用されます。