mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Delba de OliveiraGitHubJosephgraphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>Closes: https://linear.app/vercel/issue/DOC-4686/clean-up-routing-section Redirects: https://github.com/vercel/front/pull/47151 --------- Co-authored-by: Joseph <[email protected]> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
33 lines
1.6 KiB
Plaintext
33 lines
1.6 KiB
Plaintext
---
|
|
title: Route Groups
|
|
description: Route Groups can be used to partition your Next.js application into different sections.
|
|
---
|
|
|
|
Route Groups are a folder convention that let you organize routes by category or team.
|
|
|
|
## Convention
|
|
|
|
A route group can be created by wrapping a folder's name in parenthesis: `(folderName)`.
|
|
|
|
This convention indicates the folder is for organizational purposes and should **not be included** in the route's URL path.
|
|
|
|
<Image
|
|
alt="An example folder structure using route groups"
|
|
srcLight="/docs/light/project-organization-route-groups.png"
|
|
srcDark="/docs/dark/project-organization-route-groups.png"
|
|
width="1600"
|
|
height="849"
|
|
/>
|
|
|
|
## Use cases
|
|
|
|
- Organizing routes by team, concern, or feature.
|
|
- Defining multiple [root layouts](/docs/app/api-reference/file-conventions/layout#root-layout).
|
|
- Opting specific route segments into sharing a layout, while keeping others out.
|
|
|
|
## Caveats
|
|
|
|
- **Full page load**: If you navigate between routes that use different root layouts, it'll trigger a full page reload. For example, navigating from `/cart` that uses `app/(shop)/layout.js` to `/blog` that uses `app/(marketing)/layout.js`. This **only** applies to multiple root layouts.
|
|
- **Conflicting paths**: Routes in different groups should not resolve to the same URL path. For example, `(marketing)/about/page.js` and `(shop)/about/page.js` would both resolve to `/about` and cause an error.
|
|
- **Top-level root layout**: If you use multiple root layouts without a top-level `layout.js` file, make sure your home route (/) is defined within one of the route groups, e.g. app/(marketing)/page.js.
|