Modal routing is one of best way to display content of a page from another part of the application. It enhances user experience greatly as the user does not lose context of the current page.

In NextJS, we can implement it with the feature called Intercepting Routes and with a little bit of help from Parallel Routing.

Briefly go through the following folder structure used for this feature implementation to understand it better.

Currently, we are on the page.tsx file of /intercepting-routes segment inside (page) route group. From that page we want to intercept the route /product/[productId]. To do that we need to create a folder with the (..) convention inside any route segment. For this implementation, we have created (...)product folder which will match the segment inside the root folder i.e. the app folder inside which we have created the /product/[productId] route. Three dot will match the segment inside root folder. Next we wrap the folder with the named slot to create a parallel route with the help of which we will create a modal route.

Now the most important thing to keep in mind is that the segment which contains the parallel route and the route interception folder, for our modal routing must have a layout.{tsx, jsx} file which will receive our parallel route slot along with the children as prop which you can render whatever way you want, even conditionally! The intercepting route (..) folder structure must match the structure of the actual route. And the page.{tsx, jsx} file of the intercepting route can directly have a modal component to achieve 100% modal routing.

Now if you click on any of the product, it will initially load a modal with the product details instead of navigating to the actual details page. And you will see that the URL is also updated. If you close the modal or hit the browser back button, it takes you to where you exactly left previously without losing any context. While the modal is still open and you try to refresh the page, it will now take you to the actual product details page without the modal.

You can view the code via given github link to understand it better and the above folder structure is taken from the actual implementation as well.