TOPIC OVERVIEW

nextjs/Intercepting Routes

Showing a route in a modal on top of the current page, without losing the underlying page.

10 QuestionsAdvancedMedium Priority ~12 min read

Intercepting Routes — using the (.), (..), (..)(..), or (...) folder conventions — let you 'intercept' a navigation and render its route in a different context than normal, most commonly opening a detail view (a photo, a product) in a modal on top of the current page instead of navigating away from it entirely. A hard refresh or a direct link to that same URL still renders the full, standalone page as usual.

This is the mechanism behind the familiar pattern of clicking a photo in a feed to open it in a modal, while still being able to copy, share, or refresh that exact URL and land on the complete standalone page instead of a broken modal-only view. It's typically paired with Parallel Routes — one slot rendering the modal, another rendering everything else — so dismissing the modal (navigating back) doesn't unmount the page underneath it.

What you'll walk away knowing

What problem Intercepting Routes solve: showing a route in a modal without losing the page underneath

What the (.), (..), and (...) folder conventions each mean in terms of which segment they intercept

Why a direct link or refresh to the same URL still shows the full standalone page, not the modal

Why Intercepting Routes are typically combined with Parallel Routes to implement this pattern

1What are intercepting routes?ExpertHigh 2How would you use intercepting routes to build a modal that shows a photo on the same page but has its own URL?ExpertHigh

All Topics