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? What is an intercepting route, and what problem does it solve? 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 “Layouts”
Next.js › Parallel Routes & Intercepting Routes

How would you combine parallel routes and intercepting routes together to build a modal that overlays the current page?

Advanced

Answer

You create a parallel route slot for the modal content, and inside that slot, use an intercepting route to catch navigation to a specific path, rendering the modal on top of the current page when the link is clicked internally, while the underlying page content remains visible and unchanged behind it.
// app/@modal/(.)photo/[id]/page.js renders the modal
// app/photo/[id]/page.js renders the full standalone page
// app/layout.js includes {modal} alongside {children}
Real-world example A social media application implements a photo detail modal that appears smoothly over the current feed when clicked, using the combination of a parallel route slot and an intercepting route together.

Common follow-ups: How do you close the modal and return to the underlying page?;Does this pattern require any special client side JavaScript to manage the modal state?

Client Components & Hydration;Layouts & Templates
All 5 Parallel Routes & Intercepting Routes questions