Nested Routes, Route Groups & Parallel Routes

Nested Routes, Route Groups & Parallel Routes

Advanced App Router organization allows grouping routes without affecting URL paths, displaying multiple pages simultaneously (Parallel Routes), and conditionally intercepting views.

1. Route Groups (folder)

Enclosing a folder name in parentheses—such as (marketing) or (auth)—creates a Route Group. Next.js omits the group folder name from the URL path.

app/
├── (auth)/
│   ├── login/
│   │   └── page.tsx      -> URL: /login
│   └── register/
│       └── page.tsx      -> URL: /register
└── (dashboard)/
    ├── layout.tsx        -> Shared Dashboard Layout
    └── settings/
        └── page.tsx      -> URL: /settings

This allows organizing code by domain feature and assigning separate root layouts to different sections of your app (e.g. Auth vs Dashboard).

2. Dynamic Route Segments

Creating a folder with square brackets [param] extracts dynamic parameters:

// app/shop/[category]/[slug]/page.tsx
export default async function ProductPage({
  params,
}: {
  params: Promise<{ category: string; slug: string }>;
}) {
  const { category, slug } = await params;

  return (
    <div>
      <p>Category: {category}</p>
      <p>Product Slug: {slug}</p>
    </div>
  );
}

• Catch-all Segments: app/docs/[...slug]/page.tsx matches /docs/a, /docs/a/b, etc.
• Optional Catch-all: app/docs/[[...slug]]/page.tsx also matches /docs.

3. Parallel Routes (@slot)

Parallel Routes allow rendering one or more pages inside the same layout simultaneously using named slots:

app/
├── layout.tsx
├── page.tsx
├── @analytics/
│   └── page.tsx
└── @team/
    └── page.tsx

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

Route Syntax Cheatsheet

TL;DR

• Route Groups (group) organize routes logically without modifying the public URL.
• Dynamic segments [param] pass URL variables into the page via the params prop.
• Parallel routes @slot allow split-screen layout rendering of separate routes.