Intercepting Routes for Contextual UIs

In this lesson, we’re exploring a more advanced, and frankly, very cool, routing feature: intercepting routes.

We’ve all seen this kind of UX before: we click an image or a login button, and instead of navigating away, a pop-up appears over the current page while the background dims. That pop-up is called a modal; a temporary overlay that shows content on top of the page and blocks interaction with the rest of the UI.

Intercepting routes allow us to build this exact experience, showing content from another URL (like /photo/123) inside a modal, without making the user leave the page they're on.

Next.js makes this kind of interaction simple to build and maintain.

What’s an intercepting route?

An intercepting route does exactly what the name implies: it “intercepts” or “catches” a navigation to a specific route and displays the content of that route within the layout of our current route.

Here’s why it’s useful:

• Context preservation: Users can view details (like a photo, a user profile, or a login form) in a modal without losing the context of the page they were on.

• Shareable URLs: Even though the content is shown in a modal, the URL in the browser updates. This means users can copy and share the link, and it will still point to the correct content.

• Efficient loading: Because the page underneath doesn’t reload, only the modal content needs to be fetched and rendered. This reduces work for the browser and keeps the interaction quick.

To make this work, we’ll lean heavily on a concept we’ve already touched on: parallel routes. Parallel routes make this possible by allowing the intercepted page to be displayed without removing the underlying page.

Understanding the (..) interception syntax

The key to interception is a special folder naming convention. By creating a folder that uses ...