Intercepting routes allows you to load a route within the current layout while keeping the context for the current page. This routing paradigm can be useful when you want to "intercept" a certain route to show a different route.
For example, when clicking on a photo from within a feed, a modal overlaying the feed should show up with the photo. In this case, Next.js intercepts the
/feed route and "masks" this URL to show
However, when navigating to the photo directly by for example when clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.
Intercepting routes can be defined with the
(..) convention, which is similar to relative path convention
../ but for segments.
You can use:
(.)to match segments on the same level
(..)to match segments one level above
(..)(..)to match segments two levels above
(...)to match segments from the root
For example, you can intercept the
photo segment from within the
feed segment by creating a
Note that the
(..)convention is based on route segments, not the file-system.
Intercepting Routes can be used together with Parallel Routes to create modals.
Using this pattern to create modals overcomes some common challenges when working with modals, by allowing you to:
- Make the modal content shareable through a URL
- Preserve context when the page is refreshed, instead of closing the modal
- Close the modal on backwards navigation rather than going to the previous route
- Reopen the modal on forwards navigation
In the above example, the path to the
photosegment can use the
@modalis a slot and not a segment. This means that the
photoroute is only one segment level higher, despite being two file-system levels higher.
Other examples could include opening a login modal in a top navbar while also having a dedicated
/login page, or opening a shopping cart in a side modal.
View an example of modals with Intercepted and Parallel Routes.