Is there a way to use shadow routing in app router?
I have a gallery and when I click on a image a popup will appear displaying the image details, and the url needs to change to match the image slug.
so in case a user copies the links and goes to it, they will see the image details in a standalone page.
#Shadow routing in app router
viscid sandal
keen tigerBOT
Hi @viscid sandal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can achieve this using the Intercepting Routes feature in Next.js. This feature allows you to load a route from another part of your application within the current layout. This can be useful when you want to display the content of a route without the user switching to a different context.
In your case, when clicking on a photo in a gallery, you can display the photo in a modal, overlaying the gallery. Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /gallery. However, when navigating to the photo by 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, and (...) to match segments from the root app directory. For example, you can intercept the photo segment from within the feed segment by creating a (..)photo directory.
Please note that the (..) convention is based on route segments, not the file-system.