Route Groups
app/ becomes a segment in the URL. A route group lets you break that rule on purpose: wrap a folder name in parentheses, like (marketing), and Next.js organizes routes inside it without adding marketing to the resulting path at all.Folder structure
app/
(marketing)/
layout.tsx
page.tsx // route: /
about/
page.tsx // route: /about
(shop)/
layout.tsx
cart/
page.tsx // route: /cart
checkout/
page.tsx // route: /checkout(marketing)/about/page.tsx is served at /about — not /marketing/about. Only the parentheses trigger this behavior; a plain folder name always becomes a real URL segment.Why organize routes this way
(marketing) and (shop) each define their own layout.tsx — maybe the marketing pages get a simple header/footer, while the shop pages get a persistent cart sidebar — yet both sets of routes are mounted directly at the site root (/, /about, /cart, /checkout) rather than under /marketing/* or /shop/*.Folder path | Resulting URL |
|---|---|
|
|
|
|
|
|
|
|
Other common uses
Opting a subset of routes into (or out of) a shared root layout, by moving them into their own group with a different layout.
Splitting a large app into logical sections for organization purposes only, with no intent to change the URL structure.
Creating multiple root layouts entirely — each top-level route group can define its own root
layout.tsx(each must include its own <html> and <body> tags in that case).
You can have multiple route groups active at any given path segment, and their names have no effect on route matching or precedence beyond organizing which layout(s) wrap a given page.