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