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.