Why Modal pattern with intercepting routes in NextJS? - Purpose & Use Cases

The Big Idea

Discover how to make modals feel like part of your page's navigation without messy code!

The Scenario

Imagine you want to show a popup window (modal) on top of your current page when a user clicks a link, but still keep the original page visible behind it.

You try to do this by manually changing the URL and controlling the popup yourself.

The Problem

Manually managing modals with URL changes is tricky and error-prone.

You have to track the previous page, handle back button behavior, and sync UI state with the URL yourself.

This often leads to bugs where the modal doesn't close properly or the page reloads unexpectedly.

The Solution

The modal pattern with intercepting routes in Next.js lets you show modals linked to URLs without leaving the current page.

It intercepts route changes and renders the modal on top, keeping the background page intact and handling navigation smoothly.

Before vs After

✗ Before

router.push('/page'); showModal(true); // manual state and URL sync

✓ After

useInterceptingRoutes(); // modal tied to route, automatic handling

What It Enables

This pattern enables seamless modal dialogs that integrate naturally with browser navigation and URLs, improving user experience and app flow.

Real Life Example

On an e-commerce site, clicking a product image opens a modal with details without leaving the product list page, and the URL updates so users can share or bookmark the modal view.

Key Takeaways

Manual modal and URL syncing is complex and fragile.

Intercepting routes lets Next.js handle modals tied to URLs smoothly.

Users get better navigation and shareable modal states.