Next.js 14 Intercepting Routes with Dynamic Routes

#nextjs #react #webdev #development

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- .

💻💻