Route Groups in Next.js: Organizing Without Changing URLs
A route group lets you organize folders inside app without those folders showing up in the URL. Learn the convention and its main use cases.
Next.js route groups let you organize folders inside the app directory without those folders becoming part of the URL. Wrap a folder name in parentheses, and Next.js treats it as an organizational layer only.
App.tsx// app/(marketing)/about/page.tsx
export default function AboutPage() {
return <h1>About us</h1>;
}This page is served at /about, not /marketing/about. The parenthesized folder groups related routes together but contributes nothing to the path a visitor sees.
Why route groups exist
Without a route group, every folder added purely to organize code also changes the URL. A route group breaks that link, so the file structure and the URL structure can differ.
App.tsx// app/(marketing)/layout.tsx
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return <div className="marketing-shell">{children}</div>;
}Every route inside this group renders wrapped in this layout, while routes outside the group do not. The layout applies by folder membership, not by URL prefix, so sibling groups can each carry their own layout at the same nesting level.
Multiple root layouts
Removing the top-level layout file and adding one inside each route group creates entirely separate root layouts. This fits an app with sections that need a completely different shell, such as a marketing site next to an authenticated dashboard.
App.tsx// app/(shop)/layout.tsx
type Props = { children: React.ReactNode };
export default function ShopLayout({ children }: Props) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Each root layout needs its own html and body tags, since neither shares a parent layout to supply them. Navigating between routes that use different root layouts also triggers a full page reload instead of a client-side transition, because the two sections do not share a rendering tree.
When a route group helps
| Goal | Use a route group |
|---|---|
| Different layout for marketing and app pages | Yes |
| Organize files without changing URLs | Yes |
| Add a real path segment to the URL | No |
A route group cannot add a segment to the URL. If the goal is a visible path prefix, use a normal folder instead, and reach for a dynamic segment covered in dynamic routes in Next.js when that prefix should vary per request.
Common mistake
Defining the same path inside two different groups is a common mistake that only surfaces at build time. An about page inside both a marketing group and a shop group both resolve to /about, and Next.js rejects the build with a conflicting path error.
Keep one canonical location for each URL, even when the underlying folders live in different groups. Renaming a group does not fix a path collision either, since the parentheses are stripped before Next.js compares the two routes, so the fix is always to move or rename one of the actual pages instead. For the related convention that hides a folder from routing entirely, see private folders and the underscore convention.
Rune AI
Key Insights
- Wrap a folder name in parentheses to create a route group.
- A route group folder never appears in the resulting URL.
- Route groups let separate sections of a site use separate layouts.
- Two groups resolving to the same path is a build error, not a warning.
- Multiple root layouts require an html and body tag inside each one.
Powered by Rune AIFrequently Asked Questions
Can two route groups define the same URL?
Does navigating between route groups reload the page?
Do route groups affect data fetching or caching?
Conclusion
A route group organizes folders inside app without adding a URL segment. Reach for one when you want a different layout for part of your site, or when you just want related routes to sit together in the file tree.
More in this topic
`generateMetadata` Explained with Real Examples
What generateMetadata does, when it runs, and how to use it for real routes: awaited params, deduplicated data fetching, extending parent metadata, and returning a 404 from metadata.
Canonical URLs in Next.js: `metadataBase`, `alternates.canonical`, and Dynamic Pages
How canonical URLs work in the Next.js App Router: setting metadataBase once, writing alternates.canonical per route, handling dynamic segments, and what happens when the base URL is missing.
Open Graph and Twitter Card Metadata in Next.js
How to write Open Graph and Twitter card metadata in the Next.js App Router: the openGraph and twitter fields, automatic card defaults, article tags, and image merge rules.