NextJS Modal with shadcn for Intercepting and Parallel Routes

What is Intercepting Route and Parallel Routes?

Intercepting Routes was a new feature firstly released in NextJS 13. Currently NextJS file-based route system is like a sitemap, there are no specific order on how the route is read or triggered. In NextJS documentation, it also wrote:

Note that the (..) convention is based on route segments, not the file-system.

Intercepting route thinks differently by thinking how would a user enters a route. Common browsing patterns like news feed, photo gallery or shopping cart, an array of items that user want to browse or collect. Users want to browse briefly bu

Parallel routes is another concept within NextJS

Why Intercepting & Parallel Routes

As explained in NextJS documentation, modal often are temporary actions or preview. We do not want alter user flow by redirecting back and forth. It's a very common behavior pattern when user is in a exploration mindset. E.g. surfing an instagram feed or browsing a photo gallery. Modal is a way to address this pattern by:

Making the modal content shareable through a URL. Preserving context when the page is refreshed, instead of closing the modal. Closing the modal on backwards navigation rather than going to the previous route. Reopening the modal on forwards navigation.

Setting it up

Let's try using shadcn/ui which offer modal component already.

Start by using