コンテンツをスキップ

ルートグループ

appディレクトリでは、ネストされたフォルダは通常URLパスにマッピングされます。しかし、フォルダをルートグループとしてマークすることで、そのフォルダがルートのURLパスに含まれないようにすることができます。

これにより、URLパス構造に影響を与えることなく、ルートセグメントとプロジェクトファイルを論理的なグループに整理することができます。

ルートグループは次のような場合に役立ちます

  • ルートを、サイトセクション、目的、チームなどのグループに整理する。
  • 同じルートセグメントレベルでネストされたレイアウトを有効にする
    • 同じセグメント内に、複数のルートレイアウトを含む、複数のネストされたレイアウトを作成する
    • 特定のセグメントをレイアウトにオプトインする
  • 特定のルートでローディングスケルトンをオプトインする

規約

ルートグループは、フォルダ名を括弧で囲むことで作成できます: (folderName)

知っておくと良いこと:

  • ルートグループの命名は、整理以外の特別な意味を持ちません。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へナビゲートすると、フルページロードが発生します。これは複数のルートレイアウトの場合にのみ適用されます。