Route Groups and Advanced Layouts

As applications scale, structuring files purely by route URL structures can create organization issues. Next.js provides advanced routing features to group files logically and build complex UI portals.

1. Organizing Projects with Route Groups

To organize files logically without affecting the URL route path, wrap the directory name in parentheses. For example, (marketing) or (auth).

src/app/
├── (auth)/
│   ├── login/
│   │   └── page.tsx    # Accessible at /login
│   └── register/
│       └── page.tsx    # Accessible at /register
├── (marketing)/
│   ├── about/
│   │   └── page.tsx    # Accessible at /about
│   └── page.tsx        # Accessible at / (homepage)
└── layout.tsx

Key Benefits

• Clean URLs: The folder wrapper names (such as auth or marketing) do not appear in the browser URL path.
• Dedicated Layouts: You can place a layout.tsx inside (auth) to style login and registration with a special layout while keeping marketing pages on the global theme.

2. Setting Up Multiple Root Layouts

By using Route Groups at the top level, you can delete the global /app/layout.tsx and create independent root layouts for different sections of your application:

src/app/
├── (app-panel)/
│   ├── layout.tsx      # Root layout 1 (Dashboard theme)
│   └── dashboard/
└── (landing-pages)/
    ├── layout.tsx      # Root layout 2 (Marketing theme)
    └── page.tsx

Ensure each root layout contains the basic html and body tags, since Next.js requires them.

3. Parallel Routes (Slots)

Parallel Routes allow you to render multiple pages inside the same layout at the same time. This is useful for complex dashboards with dynamic widgets.

To define parallel slots, prefix the folder name with an at symbol: @analytics or @revenue.

src/app/dashboard/
├── @analytics/
│   └── page.tsx
├── @revenue/
│   └── page.tsx
├── layout.tsx
└── page.tsx

Next.js passes these slots to the parent dashboard layout as props:

// src/app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  revenue,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  revenue: React.ReactNode;
}) {
  return (
    <div>
      <main>{children}</main>
      <div className="grid grid-cols-2 gap-4">
        <div>{analytics}</div>
        <div>{revenue}</div>
      </div>
    </div>
  );
}

4. Intercepting Routes

Intercepting Routes allow you to load a route inside the current layout while masking the URL.

The most common use case is opening a photo gallery modal:

• Clicking a photo on /gallery intercept-loads the photo detail page in a modal overlay, keeping the gallery visible behind it.
• Refreshing the browser or sharing the URL loads the photo detail page directly as a full-page view.