Modal pattern with intercepting routes in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the modal pattern with intercepting routes in Next.js?

It is a way to show a modal dialog by intercepting navigation routes, so the modal appears over the current page without a full page reload.

intermediate

How does Next.js detect when to show a modal using intercepting routes?

Next.js compares the current route with the previous route and shows the modal if the new route is a child or overlay route, keeping the background page visible.

intermediate

Why use intercepting routes for modals instead of traditional modal state?

Interception keeps the URL in sync with the UI, allows browser navigation (back/forward), and supports deep linking directly to modal content.

beginner

What React hook is commonly used to track route changes for modal interception in Next.js?

The usePathname hook from 'next/navigation' is used to detect route changes and decide when to show or hide the modal.

advanced

What accessibility considerations should you keep in mind when implementing modals with intercepting routes?

Ensure focus is trapped inside the modal, provide ARIA labels, allow keyboard navigation, and restore focus to the background page when modal closes.

What does the modal pattern with intercepting routes primarily help with in Next.js?

A Showing modals without full page reloads

B Improving server-side rendering speed

C Automatically generating routes

D Styling modals with CSS

The pattern allows modals to appear over the current page by intercepting route changes, avoiding full page reloads.

Which Next.js hook helps detect route changes for modal interception?

A usePathname

B useState

C useEffect

D useContext

usePathname provides access to the current pathname needed to detect navigation changes.

What is a key benefit of using intercepting routes for modals?

A Disables page scrolling permanently

B Automatically styles modals

C Prevents modals from closing

D Supports browser back and forward buttons

Intercepting routes keep URL in sync, so browser navigation works naturally with modals.

When a modal is open via intercepting routes, what remains visible?

A Only the modal content

B The background page behind the modal

C A blank white screen

D The browser console

The background page stays visible behind the modal to maintain context.

Which accessibility feature is important for modals with intercepting routes?

A Disabling keyboard navigation

B Removing ARIA labels

C Focus trapping inside the modal

D Hiding modal from screen readers

Focus trapping ensures keyboard users stay inside the modal until it closes.

Explain how the modal pattern with intercepting routes works in Next.js and why it improves user experience.

Think about how the URL and page content stay in sync when opening a modal.

Describe key accessibility practices to follow when implementing modals with intercepting routes in Next.js.

Consider how users with keyboards or screen readers interact with modals.