Intercepting routes (.) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of intercepting routes in Next.js?

Intercepting routes lets you show parts of a page or UI without leaving the current page. It helps create smooth transitions and nested layouts by loading content inside existing layouts.

beginner

How do you define an intercepting route in Next.js App Router?

You add parentheses around the folder name in the app directory, like (modal), to mark it as an intercepting route. This folder can then load UI inside the current page without full navigation.

intermediate

What is the difference between a normal route and an intercepting route in Next.js?

A normal route replaces the whole page content. An intercepting route loads content inside the current page layout, letting you keep parts of the UI visible while changing others.

intermediate

Can intercepting routes be used to create modals or sidebars in Next.js?

Yes! Intercepting routes are perfect for modals or sidebars because they let you open these UI parts without leaving the current page or losing state.

beginner

What folder naming pattern signals an intercepting route in Next.js App Router?

Folders with parentheses, like (modal) or (sidebar), are intercepting routes. The parentheses tell Next.js to treat them as UI overlays or nested content inside the current page.

How do you mark a folder as an intercepting route in Next.js App Router?

A Wrap the folder name in parentheses, e.g., (modal)

B Prefix the folder name with an underscore, e.g., _modal

C Add a file named intercept.js inside the folder

D Use a special config file in the folder

In Next.js App Router, folders wrapped in parentheses are intercepting routes.

What is a common use case for intercepting routes?

A Loading a full new page

B Changing the URL without changing content

C Preloading images

D Showing a modal without leaving the current page

Intercepting routes let you show modals or sidebars inside the current page.

What happens when you navigate to an intercepting route?

A The browser opens a new tab

B The whole page reloads

C Only the content inside the intercepting route updates

D The URL does not change

Only the part inside the intercepting route updates, keeping the rest of the page intact.

Which folder name is an example of an intercepting route?

A (modal)

B modal_intercept

C _modal

D modal

Parentheses around the folder name mark it as an intercepting route.

Why use intercepting routes instead of normal routes for UI overlays?

A To reload the entire page faster

B To keep the current page visible and only add overlays

C To disable navigation

D To hide the URL bar

Intercepting routes keep the current page visible and add overlays like modals or sidebars.

Explain how intercepting routes work in Next.js and why they are useful.

Think about how you open a popup without leaving a webpage.

Describe the difference between a normal route and an intercepting route in Next.js.

Compare full page reload vs partial UI update.