Advanced routing — parallel + intercepting

Two Next.js App Router patterns. Parallel routes are wired end-to-end — see the parallel @slot demo. Intercepting routes are scanner-safe so they don't shadow real URLs, but the referrer-based dispatch is still future work.

Tip
Route groups (name) are fully functional and distinct from intercepting routes: the folder name is simply stripped from the URL with no referrer logic. Use them freely to organise routes without changing public paths.
Status: Parallel @slot renders in parallel with the main page and is passed to the deepest layout as a named prop. Intercepting (.)folder markers are recognised by the scanner so they don't shadow real URLs; the actual referrer-based override isn't yet implemented.
src/app/examples/advanced-routing/layout.tsxTSX
// Parallel routes — @slot folders render alongside the main page
 src/app/
├── layout.tsx           // receives { children, modal } as props
├── page.tsx
└── @modal/
    └── page.tsx         // a slot, not a URL — /@modal returns 404

// Intercepting routes — (.)folder markers are scanner-safe today
src/app/photo/[id]/page.tsx          // /photo/123 → normal photo route
src/app/feed/(.)photo/[id]/page.tsx  // recognised, but referrer-dispatch not yet wired

What works today

  • Parallel routes: @slot/page.tsx renders alongside the main page; the deepest layout receives it as a named prop. Live in the parallel demo.
  • Intercepting routes: (.)folder / (..)folder / (...)folder markers are recognised so they don't shadow real routes — but the referrer-aware dispatch (Next.js modal-from-feed pattern) isn't yet implemented.
  • Route groups (name) (different from intercepting!) continue to work — folder name dropped from URL, contents render normally.

Related documentation

File routing