Route Groups

🔍 What Is It?

Route groups are folders named with parentheses in the app/ directory. They:

• →Do not appear in the URL — (marketing)/about/page.tsx maps to /about
• →Apply layouts to sections — each group can have its own layout.tsx
• →Organise code — group related routes without URL pollution
• →Enable multiple root layouts — different top-level layouts for different app sections

Naming convention: Use descriptive names that reflect the section's purpose: (marketing), (dashboard), (auth), (admin).

🎯 Why Do We Need It?

Without route groups, you face a choice:

• →One layout for everything — marketing pages get the dashboard sidebar (wrong)
• →URL-based sections — /app/dashboard and /app/settings (ugly URLs)
• →Manual layout switching — every page manually includes the right layout (error-prone)

Route groups let you have /dashboard and /pricing with completely different layouts, clean URLs, and zero manual wiring.

🏗️ What Happens in Real Projects?

Route group architecture for a SaaS product:

app/
├── layout.tsx              # Root layout (html, body)
├── (marketing)/            # No URL segment
│   ├── layout.tsx          # Marketing layout: public header + footer
│   ├── page.tsx            # /  (homepage)
│   ├── pricing/page.tsx    # /pricing
│   └── blog/
│       └── [slug]/page.tsx # /blog/my-post
├── (auth)/                 # No URL segment
│   ├── layout.tsx          # Auth layout: centered card
│   ├── login/page.tsx      # /login
│   └── register/page.tsx   # /register
└── (dashboard)/            # No URL segment
    ├── layout.tsx          # Dashboard layout: sidebar + auth guard
    ├── dashboard/page.tsx  # /dashboard
    └── settings/page.tsx   # /settings

⚙️ How It Works

Route group resolution:

1. Next.js sees (marketing)/pricing/page.tsx
2. Strips the (marketing) segment from the URL
3. The route resolves to /pricing
4. The layout chain is: RootLayout > MarketingLayout > PricingPage
5. No /marketing appears in the URL

Multiple root layouts: You can have multiple layout.tsx files at the route group level that each include their own <html> and <body> tags. This is useful for completely different apps (e.g., a public site and an admin panel) that share the same Next.js project.

💻 Example

Route Groups in Practice — Three route groups with different layouts — marketing, auth, and dashboard.

// app/(marketing)/layout.tsx
// Applied to: /, /pricing, /blog/*, /about
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <PublicHeader />   {/* Logo, nav, CTA button */}
      <main>{children}</main>
      <Footer />
    </>
  );
}

// app/(auth)/layout.tsx
// Applied to: /login, /register, /forgot-password
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="w-full max-w-md">
        <Logo className="mx-auto mb-8" />
        {children}
      </div>
    </div>
  );
}

// app/(dashboard)/layout.tsx
// Applied to: /dashboard, /orders, /settings, /analytics
export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const session = await requireAuth(); // Throws redirect if not authed
  return (
    <div className="flex h-screen">
      <Sidebar user={session.user} />
      <main className="flex-1">{children}</main>
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits