Modal pattern with intercepting routes in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you navigate to a modal route in Next.js intercepting routes?

Consider a Next.js app using intercepting routes to open a modal over the current page. What will the user see when navigating to /photos/(modal)/123 if the modal route is set up correctly?

NextJS

app/photos/page.tsx
export default function PhotosPage() {
  return <div>Photo Gallery</div>
}

app/photos/(modal)/[id]/page.tsx
export default function PhotoModal({ params }) {
  return <div role="dialog" aria-modal="true">Photo ID: {params.id}</div>
}

A The Photo Gallery page remains visible with the PhotoModal displayed on top as a modal dialog.

B Only the PhotoModal page content is shown, replacing the Photo Gallery page entirely.

C The app throws a runtime error because intercepting routes cannot be nested under the same folder.

D The URL does not change and the modal does not open.

💡 Hint

Think about how intercepting routes allow rendering a modal over the existing page without full navigation.

In Next.js, intercepting routes like (modal) let you show a modal UI on top of the current page. The main page stays rendered, and the modal route renders inside the modal outlet. This keeps the background visible and accessible.

📝 Syntax

intermediate

Which code snippet correctly defines an intercepting route for a modal in Next.js?

You want to create a modal route under /dashboard using intercepting routes. Which folder structure and file naming is correct?

A app/dashboard/(modal)/page.tsx

B app/dashboard/(modal)/[id].tsx

C app/dashboard/modal/page.tsx

D app/dashboard/(modal)/[id]/page.tsx

💡 Hint

Intercepting routes use parentheses and dynamic segments need a folder with page.tsx inside.

Intercepting routes require parentheses around the segment name. Dynamic routes must be folders with a page.tsx file inside. So (modal)/[id]/page.tsx is correct.

🔧 Debug

advanced

Why does the modal not appear when navigating to the intercepting route?

Given this setup: app/products/page.tsx app/products/(modal)/[productId]/page.tsx Navigating to /products/(modal)/42 changes the URL but the modal does not show. What is the most likely cause?

A The dynamic segment [productId] is missing from the URL.

B The parent layout does not include a <code>modal</code> slot to render the intercepting route.

C The modal page file is named incorrectly and should be <code>modal.tsx</code> instead of <code>page.tsx</code>.

D Next.js does not support intercepting routes with dynamic segments.

💡 Hint

Check if the parent layout has a place to render the modal content.

For intercepting routes to render modals, the parent layout must include a slot or children area where the modal route renders. Without it, the modal content won't appear.

❓ state_output

advanced

What is the state of the background page when a modal intercepting route is open?

In a Next.js app using intercepting routes for modals, what happens to the React state of the background page when the modal route is active?

A The background page state resets to initial values when the modal route activates.

B The background page component unmounts and loses its state when the modal opens.

C The background page component remains mounted and its state is preserved while the modal is open.

D The background page state is frozen and cannot update until the modal closes.

💡 Hint

Think about how intercepting routes overlay UI without full page navigation.

Intercepting routes render the modal on top of the existing page without unmounting it. This means the background page stays mounted and its React state stays intact.

🧠 Conceptual

expert

Why use intercepting routes for modals instead of client-side state toggles in Next.js?

What is a key advantage of using Next.js intercepting routes for modals compared to managing modal visibility purely with React state?

A Intercepting routes update the URL, enabling deep linking and browser navigation for modals.

B Client-side state toggles automatically update the URL without extra code.

C Intercepting routes prevent the modal from being accessible via keyboard navigation.

D Client-side state toggles allow modals to persist across page reloads without URL changes.

💡 Hint

Consider how URLs and browser history behave with each approach.

Using intercepting routes changes the URL to reflect the modal state, allowing users to bookmark or share links directly to modals and use browser back/forward buttons naturally.