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

Need a 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

Need a 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

Need a 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

Need a 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.