Why Intercepting routes (.) in NextJS? - Purpose & Use Cases

The Big Idea

Discover how to add dynamic UI parts effortlessly as users move through your app!

The Scenario

Imagine you want to add a special sidebar or modal that appears on some pages without changing the main page layout manually every time.

You try to update each page's code to include this extra UI, but it quickly becomes messy and repetitive.

The Problem

Manually adding UI elements to many pages means repeating code and risking inconsistencies.

It's hard to keep track of where to add or remove these elements, and updating them later is a headache.

The Solution

Intercepting routes lets you insert UI parts like sidebars or modals automatically when navigating to certain paths.

This keeps your code clean and lets you control layouts dynamically without touching every page.

Before vs After

✗ Before

if (page === '/dashboard') { renderSidebar(); renderPage(); } else { renderPage(); }

✓ After

<> <Sidebar /> <Page /> </>

What It Enables

You can create flexible, dynamic layouts that change smoothly as users navigate, improving user experience and developer productivity.

Real Life Example

On an e-commerce site, showing a shopping cart sidebar only on product pages without rewriting each product page component.

Key Takeaways

Manual UI updates across pages are repetitive and error-prone.

Intercepting routes lets you inject UI dynamically based on navigation.

This keeps your app clean, flexible, and easier to maintain.