I would like to introduce a practical example about Intercepting Routes with Dynamic Routes which is a new feature in Next.js (App Router) that enhances UI flexibility and user experience.

In many modern web applications we could want to achieve loading a route from another part of web application within the current layout by using modal as in the following diagram:

• When clicking on a product card, we will see the result in a modal (Next.js intercepts the /products/[product-id] route), which will overlaying the current page context (/products).

• When navigating to the product page by clicking (/products/[product-id]) URL or by refreshing the page, the entire product page should render instead of the moda -No route interception will occur- .

💻💻

🎉🎉Production Link => https://shops-finder-nextjs.vercel.app/

🎉🎉Project on GitHub