Route Groups
Wrap a folder name in parentheses to organize routes without adding a URL segment.
Syntax
app/(group-name)/...Sometimes you want to group routes — for example to give a set of pages their own layout — without that folder appearing in the URL. Wrap the folder name in parentheses to create a route group.
Why use them
- Apply a different layout to a subset of pages.
- Organize files by team or feature.
app/(marketing)/about/page.tsx is still served at /about — the (marketing) part is ignored in the URL.
Example
app/
├─ (marketing)/
│ ├─ layout.tsx # layout for marketing pages
│ └─ about/page.tsx # -> /about (no "marketing" in URL)
└─ (shop)/
├─ layout.tsx # a different layout
└─ cart/page.tsx # -> /cartWhen to use it
- A team organises marketing and app routes under (marketing) and (app) folders without those names appearing in the URL.
- Two entirely different root layouts are applied to the public site and the authenticated dashboard using route groups.
- A developer groups auth pages under (auth) to share a centred-card layout without a /auth URL prefix.
More examples
Route group folder structure
The (marketing) and (app) folder names are stripped from the URL, acting as pure organisational buckets.
app/
├── (marketing)/
│ ├── about/page.tsx # → /about
│ └── pricing/page.tsx # → /pricing
└── (app)/
└── dashboard/page.tsx # → /dashboardSeparate layouts per group
Each route group can have its own layout, enabling multiple root-level layouts in one project.
// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
return <div className="marketing">{children}</div>;
}
// app/(app)/layout.tsx
export default function AppLayout({ children }: { children: React.ReactNode }) {
return <div className="app-shell">{children}</div>;
}Auth group with card layout
Grouping login and register under (auth) shares a centred card layout without /auth appearing in the URL.
// app/(auth)/layout.tsx
export default function AuthLayout({ children }: { children: React.ReactNode }) {
return (
<main className="flex min-h-screen items-center justify-center">
<div className="card w-96">{children}</div>
</main>
);
}
Discussion