ルートグループ
app ディレクトリでは、通常、ネストされたフォルダーが URL パスにマップされます。ただし、フォルダーを ルートグループ としてマークすると、フォルダーがルートの URL パスに含まれなくなります。
これにより、URL パス構造に影響を与えることなく、ルートセグメントとプロジェクトファイルを論理グループに整理できます。
ルートグループは次の用途に役立ちます。
- サイトセクション、意図、またはチームなどによるルートのグループへの整理
- 同じルートセグメントレベルでのネストされたレイアウトの有効化
- 共通セグメント内の特定のルートへのローディングスケルトンの追加
規則
ルートグループは、フォルダーの名前を括弧で囲むことで作成できます。(folderName)
例
URL パスに影響を与えずにルートを整理する
URL に影響を与えずにルートを整理するには、関連するルートをまとめて保持するグループを作成します。括弧で囲まれたフォルダーは URL から省略されます (例: (marketing) または (shop))。
(marketing) と (shop) 内のルートは同じ URL 階層を共有していますが、それぞれのフォルダー内に layout.js ファイルを追加することで、各グループに対して異なるレイアウトを作成できます。
特定のセグメントをレイアウトに含める
特定のルートをレイアウトに含めるには、新しいルートグループ（例：(shop)）を作成し、同じレイアウトを共有するルート（例：accountとcart）をそのグループに移動します。グループの外にあるルート（例：checkout）は、そのレイアウトを共有しません。
特定のルートでローディングスケルトンを選択する
特定のルートにloading.jsファイルを使用してローディングスケルトンを適用するには、新しいルートグループ（例：/(overview)）を作成し、そのルートグループ内にloading.tsxを移動します。
これで、loading.tsxファイルは、URLパス構造に影響を与えることなく、ダッシュボード全体のページではなく、ダッシュボード→概要ページにのみ適用されます。
複数のルートレイアウトを作成する
複数のルートレイアウトを作成するには、トップレベルの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ファイルは、ルートグループのいずれかで定義する必要があります。例：app/(marketing)/page.js。- 複数のルートレイアウト間を移動すると、（クライアントサイドナビゲーションではなく）ページ全体のロードが発生します。例えば、
app/(shop)/layout.jsを使用する/cartから、app/(marketing)/layout.jsを使用する/blogに移動すると、ページ全体のロードが発生します。これは、複数のルートレイアウトにのみ適用されます。
この情報は役に立ちましたか？