Next.js Intercepting Routes: Modals on Rails

WHY IT EXISTS Intercepting Routes solve the "shareable modal" problem. Systems need a way to show content (like a specific photo or task) in a modal without unmounting the underlying page (like a gallery or list), while still giving that modal content its own dedicated, linkable URL.

THE MENTAL MODEL An intercepting route is like a temporary overlay for a URL. When a user clicks a link to a URL like /photo/123, you can "intercept" that navigation. Instead of a full page load, you show the content for /photo/123 inside a modal on the current page, say /feed. The browser's URL bar updates to /photo/123, but the /feed page remains visible underneath. If the user refreshes the page, they get the full, dedicated /photo/123 page.

HOW IT WORKS Interception is defined by file-system conventions using (..) notation in folder names. To intercept a route, you create a folder structure that mirrors the path you want to catch. For example, to intercept /login from anywhere in the app, you could create a file at /(...)/login/page.js. The (...) is a catch-all that tells Next.js this route can intercept the login path from any other route. Other conventions exist for more relative pathing: (.) for the same level, and (..) for one level up.

WHEN TO USE IT The primary use case is creating modals, lightboxes, or expanded views that need to be shareable via URL. This is common in photo galleries, social media feeds where you click a post to see details, or task management apps where you open a task in a modal. It keeps the context of the underlying page while providing a deep link to the specific content.

WHEN NOT TO USE IT Avoid this for primary navigation or when the intercepted view and the direct-access view are functionally very different. The pattern works best when the intercepted modal is a subset or preview of the full page. If a page refresh providing a different UX is confusing or undesirable for your use case, this pattern is not the right fit.

ONE CANONICAL EXAMPLE A photo feed exists at /feed. Each photo has a dedicated page, like /photo/123. On the feed, you want to open photos in a modal. You create a route at /feed/(..)/photo/[id]/page.js. In your /feed/page.js, you link to each photo: <Link href="/photo/123">. When a user clicks this link from the feed, Next.js intercepts the navigation and renders the component from /feed/(..)/photo/[id]/page.js inside the feed's layout. The URL changes to /photo/123. If the user refreshes, Next.js serves the content from the canonical /photo/[id]/page.js instead.