Route Groups

Route groups let you organize routes without affecting the URL path. They're defined using parentheses: (folderName).

Basic Usage

Group related routes without adding URL segments:

app/
├── (marketing)/
│   ├── about/
│   │   └── page.tsx      → /about
│   ├── blog/
│   │   └── page.tsx      → /blog
│   └── pricing/
│       └── page.tsx      → /pricing
└── (dashboard)/
    ├── settings/
    │   └── page.tsx      → /settings
    └── profile/
        └── page.tsx      → /profile

Notice: (marketing) and (dashboard) don't appear in URLs.

Multiple Layouts

The main use case: different layouts for different sections.

app/
├── (marketing)/
│   ├── layout.tsx        → Marketing layout
│   ├── page.tsx          → / (homepage)
│   ├── about/
│   │   └── page.tsx
│   └── pricing/
│       └── page.tsx
└── (app)/
    ├── layout.tsx        → App layout
    ├── dashboard/
    │   └── page.tsx
    └── settings/
        └── page.tsx

// app/(marketing)/layout.tsx
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <MarketingHeader />
      {children}
      <MarketingFooter />
    </div>
  )
}

// app/(app)/layout.tsx
export default function AppLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Multiple Root Layouts

You can have multiple root layouts for completely different app sections:

app/
├── (marketing)/
│   ├── layout.tsx        → Own <html>, <body>
│   └── page.tsx
└── (dashboard)/
    ├── layout.tsx        → Different <html>, <body>
    └── page.tsx

// app/(marketing)/layout.tsx
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="marketing-theme">
        {children}
      </body>
    </html>
  )
}

// app/(dashboard)/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="dashboard-theme">
        {children}
      </body>
    </html>
  )
}

Note: Navigation between different root layouts causes a full page reload.

Organizing by Feature

Group by feature or domain instead of type:

app/
├── (shop)/
│   ├── products/
│   │   └── page.tsx
│   ├── cart/
│   │   └── page.tsx
│   └── checkout/
│       └── page.tsx
├── (blog)/
│   ├── posts/
│   │   └── page.tsx
│   └── categories/
│       └── page.tsx
└── (account)/
    ├── profile/
    │   └── page.tsx
    └── orders/
        └── page.tsx

Combining with Other Patterns

With Dynamic Routes

app/
└── (shop)/
    └── products/
        └── [category]/
            └── [id]/
                └── page.tsx   → /products/shoes/nike-123

With Catch-All Routes

app/
└── (docs)/
    └── [...slug]/
        └── page.tsx          → /any/nested/path

With Parallel Routes

app/
└── (dashboard)/
    ├── layout.tsx
    ├── @stats/
    │   └── page.tsx
    └── @notifications/
        └── page.tsx

Common Patterns

Auth vs Non-Auth Layouts

app/
├── (public)/
│   ├── layout.tsx            → No auth required
│   ├── page.tsx
│   └── pricing/
└── (protected)/
    ├── layout.tsx            → Requires auth
    ├── dashboard/
    └── settings/

Versioned API or Layouts

app/
├── (v1)/
│   └── layout.tsx            → V1 design system
└── (v2)/
    └── layout.tsx            → V2 design system

Summary

• Route groups use (folderName) - parentheses don't affect URLs
• Main use: apply different layouts to different sections
• Can create multiple root layouts (full page reload between them)
• Great for organizing by feature, auth status, or design version
• Combine freely with dynamic routes, parallel routes, etc.