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.

Practice

1. What is the main benefit of using the modal pattern with intercepting routes in Next.js?

easy

A. It automatically reloads the entire page when opening a modal.

B. It allows showing a popup without leaving the current page.

C. It disables keyboard navigation while the modal is open.

D. It prevents any URL changes when interacting with the modal.

Solution

1. Step 1: Understand modal with intercepting routes

   This pattern lets you open a modal that overlays the current page content without navigating away.

2. Step 2: Identify the benefit

   Because the modal is shown on top, the user stays on the same page, improving user experience.

3. Final Answer:

   It allows showing a popup without leaving the current page. -> Option B

4. Quick Check:

   Modal pattern = popup without page change [OK]

Hint: Modals with intercepting routes keep you on the same page [OK]

Common Mistakes:

• Thinking the page reloads when modal opens
• Assuming URL never changes
• Believing keyboard navigation is disabled

2. Which Next.js feature is commonly used to control modal visibility with intercepting routes?

easy

A. Using URL query parameters to toggle modal state

B. Using React class components with state

C. Using server-side rendering to open modals

D. Using CSS hover effects to show modals

Solution

1. Step 1: Identify modal control method

   Next.js modals with intercepting routes often use URL query parameters to track if modal is open or closed.

2. Step 2: Eliminate incorrect options

   React class components are outdated; server-side rendering doesn't control modal visibility dynamically; CSS hover is unrelated to routing.

3. Final Answer:

   Using URL query parameters to toggle modal state -> Option A

4. Quick Check:

   Modal visibility = URL query param [OK]

Hint: Modal open state is often in URL query parameters [OK]

Common Mistakes:

• Confusing client state with URL state
• Using class components instead of hooks
• Relying on CSS hover for modal control

3. Given this Next.js snippet controlling a modal with query param ?modal=open:

const router = useRouter();
const isModalOpen = router.query.modal === 'open';

return (
  <>
    {isModalOpen && <ModalComponent />}
    <MainPageContent />
  </>
);

What happens when the URL changes from /page to /page?modal=open?

medium

A. The page reloads and shows a blank screen.

B. The main page content is replaced by the modal component.

C. Nothing changes because query parameters don't affect rendering.

D. The modal component appears over the main page content.

Solution

1. Step 1: Understand the code logic

   The code checks if the query parameter 'modal' equals 'open'. If yes, it renders the modal component alongside the main content.

2. Step 2: Analyze URL change effect

   Changing URL to include '?modal=open' sets isModalOpen true, so modal appears over the main page without replacing it.

3. Final Answer:

   The modal component appears over the main page content. -> Option D

4. Quick Check:

   Query param 'modal=open' = modal visible [OK]

Hint: Query param 'modal=open' triggers modal display [OK]

Common Mistakes:

• Thinking modal replaces main content
• Ignoring query parameters in rendering
• Assuming page reloads on query change

4. Consider this Next.js modal code snippet:

const router = useRouter();
const isModalOpen = router.query.modal === 'open';

function closeModal() {
  router.push('/page');
}

return (
  <>
    {isModalOpen && <Modal onClose={closeModal} />}
    <PageContent />
  </>
);

What is a likely bug in this code regarding accessibility?

medium

A. The URL does not update when the modal opens.

B. The modal never closes because router.push is incorrect.

C. Keyboard focus is not moved to the modal when it opens.

D. The modal content is rendered outside the React tree.

Solution

1. Step 1: Review modal accessibility needs

   When a modal opens, keyboard focus should move inside it for screen reader and keyboard users.

2. Step 2: Check code for focus management

   The code changes URL and renders modal but does not handle moving keyboard focus to modal.

3. Final Answer:

   Keyboard focus is not moved to the modal when it opens. -> Option C

4. Quick Check:

   Modal accessibility = move keyboard focus [OK]

Hint: Always move keyboard focus into modal on open [OK]

Common Mistakes:

• Ignoring keyboard focus management
• Assuming URL push closes modal automatically
• Confusing rendering with accessibility

5. You want to implement a modal in Next.js that opens on /gallery?modal=photo123 and closes by removing the query param, without losing the gallery scroll position. Which approach best achieves this?

hard

A. Use router.push with shallow: true to update URL without full reload and keep scroll.

B. Use router.replace without shallow to reload page and reset scroll.

C. Use window.location.href to change URL and force reload.

D. Use CSS to hide modal and ignore URL changes.

Solution

1. Step 1: Understand shallow routing in Next.js

   Shallow routing updates the URL without running data fetching methods or reloading the page, preserving scroll and state.

2. Step 2: Apply shallow routing to modal open/close

   Using router.push with shallow: true changes query params to open/close modal without losing scroll position.

3. Final Answer:

   Use router.push with shallow: true to update URL without full reload and keep scroll. -> Option A

4. Quick Check:

   Shallow routing = URL change without reload [OK]

Hint: Use shallow routing to keep scroll when changing URL [OK]

Common Mistakes:

• Using router.replace without shallow reloads page
• Using window.location.href causes full reload
• Ignoring URL for modal state control