Within the app directory, nested folders are typically associated with URL paths. However, you can designate a folder as a Route Group, effectively excluding it from the route's URL path. This allows for logical organization of route segments and project files without impacting the URL structure.
 |
| Next.js Route Group |
Route Groups serve various purposes:
Organizing Routes: You can group routes by site section, intent, or team, improving overall code organization.
Nested Layouts: You can have nested layouts at the same route segment level, including multiple root layouts, or apply a layout to a subset of routes within a common segment.
Convention: To create a Route Group, enclose a folder's name in parentheses, like this: (folderName).
Examples:
1. Organize Routes without Affecting the URL Path:
To organize routes without altering the URL, use groups to keep related routes together. Folders enclosed in parentheses will be excluded from the URL (e.g., (marketing) or (shop)).
2. Organizing Routes with Route Groups:
Even if routes within (marketing) and (shop) share the same URL hierarchy, you can create distinct layouts for each group by adding a layout.js file inside their folders.
3. Route Groups with Multiple Layouts:
To include specific routes in a layout, create a new route group (e.g., (shop)) and place routes sharing the same layout within that group (e.g., account and cart). Routes outside the group will not share this layout (e.g., checkout).
4. Route Groups with Opt-in Layouts:
To establish multiple root layouts, remove the top-level layout.js file and add a layout.js file within each route group. This is helpful for partitioning the application into sections with entirely different UI or experiences. You'll need to add <html> and <body> tags to each root layout.
In the provided example, both (marketing) and (shop) have their own root layouts, showcasing the flexibility and organization benefits of Route Groups.
No comments:
Post a Comment