As your Next.js application grows, you'll want to organize routes into logical sections without cluttering your URLs. Route groups let you do exactly that—wrap a folder name in parentheses like (marketing), and it becomes invisible in the URL while keeping your file structure clean and organized. Even better, each group can have its own layout!
The Organization Problem
Imagine you're building a large application with different sections:
- Marketing pages (homepage, about, contact)
- E-commerce pages (products, cart, checkout)
- Dashboard pages (analytics, settings, users)
- Authentication pages (login, register, forgot password)
Without route groups, you'd have everything at the root level:
app/
page.tsx → /
about/
page.tsx → /about
products/
page.tsx → /products
dashboard/
page.tsx → /dashboard
login/
page.tsx → /login
settings/
page.tsx → /settings
# Everything is mixed together!
# Hard to see which pages belong to which section
# Can't apply different layouts to different sectionsProblems with this structure:
- No visual organization—all routes look equal
- Can't tell which pages belong together
- Hard to apply different layouts to different sections
- Difficult to navigate in large projects
The Solution: Route Groups
Route groups use parentheses (name) to organize routes without affecting the URL:
app/
(marketing)/
page.tsx → /
about/
page.tsx → /about
(shop)/
products/
page.tsx → /products
(dashboard)/
dashboard/
page.tsx → /dashboard
settings/
page.tsx → /settings
(auth)/
login/
page.tsx → /login
# Organized into logical groups!
# But URLs stay the same—no /marketing/ or /shop/ in URLThe Magic of Parentheses
Folders wrapped in parentheses (group) are completely invisible to the routing system. They exist only for organization and don't create URL segments.
Creating Your First Route Group
Let's organize a website with marketing and shop sections:
Step 1: Create Route Group Folders
app/
(marketing)/ ← Route group (not in URL)
(shop)/ ← Route group (not in URL)Step 2: Add Pages to Each Group
app/
(marketing)/
page.tsx → /
about/
page.tsx → /about
contact/
page.tsx → /contact
(shop)/
products/
page.tsx → /products
cart/
page.tsx → /cartStep 3: Create the Marketing Homepage
export default function HomePage() {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-5xl font-bold mb-6">Welcome to Our Site</h1>
<p className="text-xl text-gray-600">
This is the homepage in the marketing group
</p>
</div>
);
}
// This page is at the URL: /
// NOT at /marketing/ ← the (marketing) folder doesn't appear!Step 4: Create Shop Pages
export default function ProductsPage() {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-6">Our Products</h1>
<p>Browse our amazing product catalog</p>
</div>
);
}
// This page is at the URL: /products
// NOT at /shop/products ← the (shop) folder doesn't appear!🎯 Key Point
The route group names (marketing) and (shop) never appear in URLs. They're purely for organizing your code in the file system!
Different Layouts Per Route Group
One of the most powerful features of route groups is that each group can have its own layout:
Marketing Layout (Simple)
import Link from 'next/link';
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{/* Simple header for marketing pages */}
<header className="bg-white border-b">
<nav className="container mx-auto px-4 py-4 flex items-center justify-between">
<Link href="/" className="text-2xl font-bold">
Brand
</Link>
<div className="flex gap-6">
<Link href="/about" className="hover:text-blue-600">
About
</Link>
<Link href="/contact" className="hover:text-blue-600">
Contact
</Link>
<Link href="/products" className="hover:text-blue-600">
Products
</Link>
</div>
</nav>
</header>
{/* Page content */}
<main>{children}</main>
{/* Simple footer */}
<footer className="bg-gray-100 py-8 mt-12">
<div className="container mx-auto px-4 text-center text-gray-600">
© 2024 Your Company
</div>
</footer>
</div>
);
}Shop Layout (With Cart Badge)
"use client";
import Link from 'next/link';
import { useState } from 'react';
export default function ShopLayout({
children,
}: {
children: React.ReactNode;
}) {
const [cartCount] = useState(3);
return (
<div>
{/* Header with cart for shop pages */}
<header className="bg-blue-600 text-white">
<nav className="container mx-auto px-4 py-4 flex items-center justify-between">
<Link href="/" className="text-2xl font-bold">
Shop
</Link>
<div className="flex items-center gap-6">
<Link href="/products" className="hover:underline">
Products
</Link>
<Link href="/cart" className="relative">
🛒 Cart
{cartCount > 0 && (
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
{cartCount}
</span>
)}
</Link>
</div>
</nav>
</header>
{/* Page content */}
<main className="min-h-screen">{children}</main>
{/* Shop footer with links */}
<footer className="bg-gray-900 text-white py-8">
<div className="container mx-auto px-4">
<div className="grid grid-cols-3 gap-8">
<div>
<h3 className="font-bold mb-4">Shop</h3>
<Link href="/products">Products</Link>
</div>
<div>
<h3 className="font-bold mb-4">Help</h3>
<Link href="/contact">Contact</Link>
</div>
<div>
<h3 className="font-bold mb-4">Legal</h3>
<Link href="/terms">Terms</Link>
</div>
</div>
</div>
</footer>
</div>
);
}Multiple Layouts in One App
With route groups, pages in (marketing) get the marketing layout, pages in (shop) get the shop layout—all automatically! No configuration needed.
Visualizing Route Group Structure
Basic Route Groups Example
Three route groups with different layouts
Select a file or folder to see details
What gets created:
| File Path | URL Route | Layout Used |
|---|---|---|
app/(marketing)/page.tsx | / | (marketing) layout |
app/(marketing)/about/page.tsx | /about | (marketing) layout |
app/(shop)/products/page.tsx | /products | (shop) layout |
app/(shop)/cart/page.tsx | /cart | (shop) layout |
app/(dashboard)/dashboard/page.tsx | /dashboard | (dashboard) layout |
app/(dashboard)/settings/page.tsx | /settings | (dashboard) layout |
Nested Route Groups
You can nest route groups inside each other for even more organization:
Advanced: Nested Route Groups
Route groups can be nested for fine-grained organization
Select a file or folder to see details
In this structure:
(auth)has its own minimal layout for login/register(main)has a full layout for the main app(public)inside(main)groups public pages(protected)inside(main)groups pages that need auth
All layouts stack—pages get all parent layouts!
Common Use Cases
1. Authentication Layout
Separate auth pages with a centered, minimal layout:
app/
(auth)/
layout.tsx ← Centered layout, no header/footer
login/
page.tsx → /login
register/
page.tsx → /register
forgot-password/
page.tsx → /forgot-passwordexport default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full">
{/* Logo */}
<div className="text-center mb-8">
<h1 className="text-3xl font-bold">Your App</h1>
</div>
{/* Auth form */}
<div className="bg-white p-8 rounded-lg shadow-lg">
{children}
</div>
{/* Footer links */}
<div className="text-center mt-6 text-sm text-gray-600">
<a href="/privacy" className="hover:underline">Privacy</a>
{' · '}
<a href="/terms" className="hover:underline">Terms</a>
</div>
</div>
</div>
);
}2. Dashboard with Sidebar
app/
(dashboard)/
layout.tsx ← Layout with sidebar
dashboard/
page.tsx → /dashboard
analytics/
page.tsx → /analytics
settings/
page.tsx → /settings
users/
page.tsx → /users3. Multi-Tenant Apps
app/
(admin)/
layout.tsx ← Admin layout with admin nav
users/
page.tsx → /users
(customer)/
layout.tsx ← Customer layout with customer nav
orders/
page.tsx → /orders4. Different Landing Pages
app/
(landing-v1)/
page.tsx → / (A/B test version 1)
(landing-v2)/
page.tsx → / (A/B test version 2)
# Note: You can't have both serve / at the same time
# This is for testing locally, not productionHandling Route Conflicts
Since route groups are invisible to URLs, you could accidentally create conflicts:
❌ Conflicting Routes
app/
(marketing)/
about/
page.tsx → /about
(shop)/
about/
page.tsx → /about
# ERROR! Both try to create /about
# Next.js will throw an error at build time✅ Solution: Use Unique Route Names
app/
(marketing)/
about/
page.tsx → /about
(shop)/
about-us/
page.tsx → /about-us
# Works! Different URLs for each page⚠️ Watch Out for Conflicts
Next.js will catch route conflicts at build time and show an error. Make sure each final URL path is unique across all route groups!
Route Groups Without Layouts
Route groups don't have to have layouts—they're useful for organization alone:
app/
(features)/ ← No layout.tsx, just organization
feature-a/
page.tsx
feature-b/
page.tsx
(legal)/ ← No layout.tsx, just organization
privacy/
page.tsx
terms/
page.tsxThese pages will use the root layout or any parent layout, but the grouping helps you:
- Visually organize related pages
- Keep your file structure clean
- Make it easier to find related pages
- Group pages by feature, team, or purpose
Practice: Build a Complete Site Structure
Complete Site Structure with Route Groups
A real-world example showing how to organize a full application
Output Preview
🎯 Try This Exercise
Create this structure in your Next.js project:
- Create
(marketing)group with home, about, contact pages - Create
(shop)group with products and cart pages - Give each group its own layout with different styling
- Test that URLs work without the group names
Best Practices
1. Use Descriptive Group Names
Good:
app/
(marketing)/
(shop)/
(dashboard)/
(auth)/Less clear:
app/
(group1)/
(section)/
(pages)/
(a)/2. Group by Purpose, Not by Technology
Good: Group by what the pages do
app/
(onboarding)/ ← Purpose: new user onboarding
(checkout)/ ← Purpose: purchase flow
(admin)/ ← Purpose: admin toolsLess useful: Group by implementation
app/
(client-components)/
(server-components)/
(api-routes)/3. Don't Over-Organize
Start simple. Add route groups only when you need them:
- Do you have multiple distinct sections? → Use route groups
- Do different sections need different layouts? → Use route groups
- Do you have 50+ pages? → Use route groups for organization
- Do you have 5 pages? → Probably don't need route groups yet
4. Combine with Other Patterns
Route groups work great with other routing patterns:
app/
(shop)/
products/
[id]/ ← Dynamic route
page.tsx
categories/
[...slug]/ ← Catch-all route
page.tsxPrivate Folders vs Route Groups
| Feature | Private Folders (_folder) | Route Groups (folder) |
|---|---|---|
| Purpose | Exclude from routing completely | Organize routes without affecting URLs |
| In URL? | No (ignored entirely) | No (but children are routes) |
| Can have page.tsx? | No effect (won't be a route) | Yes (creates route) |
| Can have layout.tsx? | No effect | Yes (applies to children) |
| Use Case | Shared utilities, components | Organize routes into sections |
Key Takeaways
- Route groups use parentheses - (marketing), (shop), (auth)
- Invisible in URLs - they don't create URL segments
- Purely for organization - keep your file structure clean
- Each group can have its own layout - different sections, different layouts
- Can be nested - create hierarchical organization
- Watch for conflicts - same URL from different groups = error
- Start simple - add groups as your app grows
- Name descriptively - use names that explain the purpose
What's Next?
You've mastered route organization! You now know how to create clean, well-structured applications using route groups. But there's one more advanced routing concept to learn: parallel routes.
Parallel routes let you render multiple pages in the same layout simultaneously—perfect for dashboards with multiple sections, modals that preserve the page behind them, or complex UIs with independent sections. This is an advanced topic, but incredibly powerful!
🎨 Route Groups Are Your Friend
As your application grows, route groups become increasingly valuable. They keep your codebase organized, make it easy to apply different layouts to different sections, and help team members quickly understand your app's structure. Use them liberally!