All 5 Parallel Routes & Intercepting Routes questions
More in Parallel Routes & Intercepting Routes
What are parallel routes in the Next.js App Router, and why would you use them? How do you set up the folder structure for a parallel route slot in your application? How would you combine parallel routes and intercepting routes together to build a modal that overlays the current page? What are common use cases where parallel routes provide a better solution than simply rendering multiple components inside a single page?
Advertisement
Back to results for “Routing”
Next.js › Parallel Routes & Intercepting Routes

What is an intercepting route, and what problem does it solve?

Intermediate

Answer

An intercepting route lets you show a different view when a link is clicked from within your app, such as opening a photo in a modal overlay, while still showing the full dedicated page if that same URL is visited directly, such as through a page refresh or a shared link.
// app/feed/@modal/(.)photo/[id]/page.js
// This intercepts navigation to /photo/[id] from within /feed
// showing it in a modal instead of a full page navigation
Real-world example A photo sharing app shows a photo in a modal overlay when a user clicks it from their feed, while directly visiting or sharing that same photo's link still loads the complete standalone photo page.

Common follow-ups: What do the different dot notation symbols mean in intercepting route folder names?;How does this pattern work together with parallel routes for the modal itself?

Parallel Routes & Intercepting Routes;Routing (App/Pages Router)
All 5 Parallel Routes & Intercepting Routes questions