09 — Parallel and Intercepting Routes — Advanced App Router Patterns

Two patterns make the App Router genuinely expressive, and both were hard under the old router. The model that clicked: parallel routes render two or more pages simultaneously in the same layout (independent navigation); intercepting routes load a route from elsewhere inside the current layout (modal-over-feed, modals that share a URL) [1]. Both unlock UI patterns that were genuinely hard under the Pages Router.

Parallel routes — multiple pages, one view

Parallel routes let me simultaneously or conditionally render one or more pages within the same layout [2]. They're named with the @ prefix — @analytics, @team — and passed to the layout as props alongside children:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  @analytics: analytics,
  @team: team,
}: {
  children: React.ReactNode;
  @analytics: React.ReactNode;
  @team: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-2">
      <div>{analytics}</div>
      <div>{team}</div>
      <div className="col-span-2">{children}</div>
    </div>
  );
}

Each slot (@analytics, @team) is its own route that navigates independently. The classic use case the roadmap calls out: dashboards and feeds on social sites, where each panel can load, reload, and navigate without disturbing the others [2]. A slow panel doesn't block the fast ones, because each is its own Suspense boundary.

Intercepting routes — load one route inside another's layout

Intercepting routes let me load a route from another part of the application within the current layout [3]. The classic example: clicking a photo in a feed opens a modal overlay showing that photo, without leaving the feed context. The (..) convention in the folder name marks interception — (..)photo intercepts the photo route from one level up.

app/
├── feed/
│   └── (..photo)/
│       └── [id]/page.tsx   ← intercepts /photo/[id], shows it as a modal over the feed
└── photo/
    └── [id]/page.tsx        ← the real /photo/[id] route (direct visit)

The two behaviors matter:

• Client-side navigation (clicking the photo from the feed) → the intercepted route renders as a modal, preserving the feed underneath.
• Direct URL visit (loading /photo/123 fresh) → the real, un-intercepted route renders as a standalone page.

This is the pattern that made modals-with-URLs tractable. The roadmap's framing is exactly right: it lets me display a route's content without switching context [3]. Before intercepting routes, "shareable modal with its own URL" was surprisingly hard.

How I use this

Parallel routes are my go-to for dashboards — any UI with independent panels that load or navigate separately. Intercepting routes are my answer for modal-over-list patterns where the modal should be deep-linkable: photo viewers, detail drawers, comment threads opened from a feed. Both patterns turn "hard routing problem" into "folder convention," which is the App Router's whole value proposition.

References

[1] Vercel, "Advanced routing patterns," Next.js Docs, 2023. [Online]. Available: https://nextjs.org/docs/13/app/building-your-application/routing#advanced-routing-patterns

[2] Vercel, "Parallel routes," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes

[3] Vercel, "Intercepting routes," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes

[4] "Next.js 15 tutorial — Parallel routes," YouTube, 2024. [Video]. Available: https://www.youtube.com/watch?v=697kNwfU-4M

[5] "Next.js 15 tutorial — Intercepting routes," YouTube, 2024. [Video]. Available: https://www.youtube.com/watch?v=FTiwIVxWC00