Route Groups & Parallel Routes

Route groups: folders that don't show up in the URL

A folder wrapped in parentheses — like (marketing) — is treated as a group. It can hold pages and layouts, but the folder name does not appear in the URL.

app/
├─ (marketing)/
│  ├─ layout.js     // marketing-only layout
│  ├─ page.js       // /
│  └─ pricing/page.js  // /pricing
└─ (app)/
   ├─ layout.js     // app-only layout (auth, sidebar…)
   ├─ dashboard/page.js   // /dashboard
   └─ settings/page.js    // /settings

Use route groups when you want different layouts for different parts of your site without nesting URLs. The marketing pages and the app pages live at the same URL level but have totally different shells.

Parallel routes

Parallel routes let a layout render multiple page-like slots at once. Each slot has its own loading and error UI and can be navigated independently. A slot is a folder starting with @.

app/dashboard/
├─ layout.js
├─ page.js
├─ @analytics/page.js
└─ @team/page.js

The layout receives those slots as named props, alongside the regular children:

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  return (
    <div className="grid">
      <section>{children}</section>
      <aside>{analytics}</aside>
      <aside>{team}</aside>
    </div>
  );
}

Intercepting routes

Intercepting routes capture a navigation and render its destination in a different place — for instance, opening a photo as a modal over a feed but still allowing direct URL access. The convention uses (.), (..), (..)(..) and (...) prefixes to indicate how far up the tree to intercept from.

app/feed/page.js
app/feed/(..)photo/[id]/page.js   // intercepts /photo/:id when navigated from /feed
app/photo/[id]/page.js            // direct navigation still lands here