Route Groups
appディレクトリでは、通常、ネストされたフォルダは URL paths にマップされます。しかし、フォルダをRoute Groupとしてマークすることで、そのフォルダがルートの URL path に含まれるのを防ぐことができます。
これにより、あなたは route セグメントとプロジェクトファイルを、URL path 構造に影響を与えずに論理的なグループに整理することができます。
Route グループは以下の用途に役立ちます：
- サイトセクション、目的、またはチーム別などによる、 routes をグループ化する
- 同じ route セグメントレベルで nested layouts を有効にする:
Convention
route グループは、フォルダ名を括弧で囲むことにより作成できます：(folderName)
Examples
URL path に影響を与えずに、routes を整理する
URL に影響を与えずに routes を整理するために、関連する routes をまとめてグループを作成します。括弧内のフォルダは URL から省略されます(例：(marketing)や(shop))。
(marketing) や (shop) 内の routes は同じ URL 階層を共有していますが、それぞれのフォルダ内に layout.js ファイルを追加することで、各グループに異なる layout を作成することができます。
特定のセグメントを layout にオプトインする
特定の routes を layout に組み込むには、新しい route グループ(例えば (shop))を作成し、同じ layout を共有する routes をグループに移動します(例えば account や cart)。 グループ外の routes は layout を共有しません(例えば checkout)。
複数の rootLayout を作成する
複数の roots を作成するには、トップレベルの layout.js ファイルを削除し、各 route グループの中に layout.js ファイルを追加します。これは、アプリケーションを完全に異なる UI または体験を持つセクションに分割するのに便利です。 <html> タグと <body> タグは、各 root layout に追加する必要があります。
上記の例では、(marketing)と(shop)の両方が自身の root layout を持っています。
Good to know:
- route グループの命名には、組織化以外に特別な意味はありません。それらは URL path に影響を与えません。
- routes には、同じ URL パスを他の routes と解決してはいけません。例えば、route グループは URL の構造に影響を与えないため、
(marketing)/about/page.jsと(shop)/about/page.jsの両方が/aboutに解決し、error を引き起こします。- 複数の root レイアウトをトップレベルの
layout.jsファイルなしで使用する場合、ホームのpage.jsファイルは、 route グループのいずれかで定義する必要があります。例えば：app/(marketing)/page.jsのようになります。
- 複数の root レイアウトと移動すると、フルページの読み込みが発生します(クライアントサイドのナビゲーションとは異なります)。例えば、
app/(shop)/layout.jsを使用する/cartからapp/(marketing)/layout.jsを使用する/blogに移動すると、フルページの読み込みが発生します。これは唯一複数の root レイアウトに適用されます。