What are parallel and intercepting routes?

Question

Accepted Answer

These are two advanced App Router features for sophisticated UI layouts. They share a folder-convention syntax. ## Parallel Routes (@folder) — render multiple pages in one layout Parallel routes let a single layout render **multiple independent route "slots" simultaneously**, each with its own loading/error state. You define slots with `@name` folders: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Each slot navigates and loads **independently** — great for **dashboards** where panels update separately, or showing two sections at once. ## Intercepting Routes ((.)folder) — overlay a route without leaving the current page Intercepting routes let you "catch" a navigation and render it **in the current context** (e.g. a modal) instead of a full page — while still having a real, shareable URL. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` The interception markers (`(.)` same level, `(..)` one up, `(...)` root) control which segment is intercepted. This is exactly how the Instagram-style "photo opens in a modal but has its own URL" pattern works. ## Why it matters Parallel routes enable complex, independently-loading multi-pane layouts (dashboards) cleanly; intercepting routes deliver the "modal with a real URL" pattern (shareable, refresh-safe, back-button-friendly) that's otherwise tricky to build. They're advanced, but they solve real UX problems — independent panels and contextual overlays — that previously required significant manual routing/state work.