Modal pattern with intercepting routes in NextJS - Mini Project: Build & Apply

Modal Pattern with Intercepting Routes in Next.js

📖 Scenario: You are building a photo gallery web app using Next.js. When a user clicks on a photo thumbnail, you want to open the photo in a modal popup without leaving the gallery page. This means the URL changes to the photo's route, but the gallery remains visible behind the modal. This is called the modal pattern with intercepting routes.

🎯 Goal: Create a Next.js app that shows a gallery of photos on the main page. When a photo is clicked, open it in a modal overlay using intercepting routes so the gallery stays visible behind the modal. The URL should update to the photo's route, and closing the modal returns to the gallery route.

📋 What You'll Learn

Create a list of photo objects with id and title

Set up a configuration variable for the base gallery route

Use Next.js intercepting routes to open photo details in a modal

Add a close button in the modal that returns to the gallery route

💡 Why This Matters

🌍 Real World

Many modern web apps use modal patterns to show details without leaving the main page. This improves user experience by keeping context visible and URLs meaningful.

💼 Career

Understanding intercepting routes and modal patterns in Next.js is valuable for frontend developers building interactive, user-friendly web applications.

1

Create the photo data list

Create a constant called photos that is an array of objects. Each object must have id and title properties with these exact values: {id: '1', title: 'Sunset'}, {id: '2', title: 'Forest'}, {id: '3', title: 'Ocean'}.

NextJS

# Create the photos array with 3 photo objects
# Your code here

Hint

Use const photos = [ ... ] with objects inside square brackets.

2

Add a base route configuration

Create a constant called galleryRoute and set it to the string '/gallery'.

NextJS

const photos = [
  { id: '1', title: 'Sunset' },
  { id: '2', title: 'Forest' },
  { id: '3', title: 'Ocean' }
];

# Create a constant galleryRoute set to '/gallery'
# Your code here

Hint

Use const galleryRoute = '/gallery'; to store the base route.

3

Implement the modal intercepting route logic

Create a React functional component called Gallery. Inside it, use usePathname and useRouter from next/navigation. Render the list of photos with Link components linking to {galleryRoute}/(modal)/{photo.id}. Use usePathname to detect if the current route includes (modal) and conditionally render a Modal component with the photo's title. The Modal should have a close button that calls router.back().

NextJS

const photos = [
  { id: '1', title: 'Sunset' },
  { id: '2', title: 'Forest' },
  { id: '3', title: 'Ocean' }
];

const galleryRoute = '/gallery';

// Create Gallery component with modal intercepting route logic
// Your code here

Hint

Use usePathname to check if the URL includes (modal) and show the modal. Use router.back() to close it.

4

Add the intercepting route folder structure

Create the Next.js app folder structure with a app/gallery/page.jsx file exporting the Gallery component. Inside app/gallery/(modal)/[id]/page.jsx, create a component that renders the photo title and a close button that navigates back to galleryRoute. This setup enables intercepting routes for the modal pattern.

NextJS

/*
File: app/gallery/page.jsx
Export the Gallery component here

File: app/gallery/(modal)/[id]/page.jsx
Create a component that shows the photo title and a close button
that navigates back to galleryRoute
*/

// Your code here

Hint

Use the Next.js app router folder structure with (modal) folder and dynamic [id] route. The modal page uses params.id to find the photo and a close button to navigate back.

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