Questions
2 of 2
1What are intercepting routes?
2How would you use intercepting routes to build a modal that shows a photo on the same page but has its own URL?
nextjsnextjs
Basics
Project Structure
Runtime
Compiler
SSG
SSR
CSR
Routing
Route Handlers
Route Groups
Dynamic Routes
Parallel Routes
Intercepting Routes
Middleware
Server Actions
APIS
Data Fetching
Caching
Clients
Optimisation
i18n
Security
Architecture
Deployment
Accessibility
02 / 02

How would you use intercepting routes to build a modal that shows a photo on the same page but has its own URL?

Intercepting routes combined with parallel routes allow you to render a photo modal over the feed when navigating from the same page, while showing a dedicated photo page when accessed directly, all with proper URL synchronization

Intercepting routes in Next.js solve a classic UX challenge: showing content in a modal overlay when navigated from within the same context (like clicking a photo in a feed), while rendering that same content as a full page when accessed directly via URL (like sharing a photo link). By combining intercepting routes with parallel routes, you get both the smooth SPA experience of an overlay and the shareability/deep-linkability of a dedicated page, all without sacrificing SEO or user experience .

Core Concepts
  1. 1

    Intercepting routes: Use (..) syntax to intercept route segments from a different level in the folder hierarchy, allowing you to render a different component for the same URL when navigated from within the app .

  2. 2

    Parallel routes: Named slots (@modal) that can render independently, letting you show content in a modal while the underlying feed remains visible .

  3. 3

    default.js files: Provide fallback UI for slots during hard navigation (direct URL access) to prevent 404 errors .

The pattern requires two slots: the main content slot (implicit children) and a @modal slot. When navigating from within the app (soft navigation), the (..)photo route intercepts and renders the photo inside the @modal slot while keeping the feed in children. When accessing the photo URL directly (hard navigation), the default.js fallback for the modal slot returns null, and the children slot renders the full photo page .

Folder Structure
Root Layout with Parallel Modal Slot
Main Feed Page with Photo Links
Intercepting Modal Photo Component
Full Photo Page for Direct Access
Fallback Components (default.js)

The modal component should use React portals to render outside the normal DOM hierarchy, often at the end of the document body. It should include a close button and handle ESC key press to navigate back. Using useRouter to navigate back preserves the SPA experience when closing the modal .

Key Benefits of This Pattern
  1. 1

    Shareable URLs: The modal has its own URL (e.g., /photo/123) that can be copied and shared .

  2. 2

    SEO friendly: The full photo page is server-rendered and indexable when accessed directly .

  3. 3

    Preserved context: The feed remains in the background, so closing the modal returns to exactly where the user was .

  4. 4

    Graceful fallback: On direct navigation, users get the full page instead of a modal with no surrounding context .

  5. 5

    Progressive enhancement: Works without JavaScript (though modal needs JS for interactivity) .

Difficulty: 5/10
Topics: intercepting routes, modal UI, URL state management

Scenario Questions

0-2 years experience
  1. 1

    Imagine you need to add a photo preview modal to an existing gallery page. How would you set up an intercepting route so that opening the modal updates the URL without a full page navigation?

  2. 2

    If you click a thumbnail and the URL becomes /gallery/123?modal=photo, what file structure would you create in a Next.js app to render the modal on top of the gallery page?

  3. 3

    What happens if the user refreshes the page while the modal URL is active? How does Next.js handle that request?

2-5 years experience
  1. 1

    You notice that when navigating back from the modal, the page flickers because the gallery re‑renders. What could be causing that and how would you fix it?

  2. 2

    Suppose the modal needs to fetch photo metadata from an API. How would you coordinate data fetching between the parent page and the modal using intercepting routes?

  3. 3

    If the modal URL is shared externally, how would you ensure the page loads with the modal open while still supporting SEO for the gallery page?

5-8 years experience
  1. 1

    Discuss the trade‑offs between using an intercepting route versus a client‑side state solution for modals in a large Next.js app with many concurrent users.

  2. 2

    How would you design the routing and caching strategy to keep the modal lightweight and avoid unnecessary data fetching when the same photo is opened repeatedly?

  3. 3

    What edge cases need to be considered for accessibility and browser history when using intercepting routes for modals at scale?

8+ years experience
  1. 1

    If your organization is migrating a legacy multi‑page photo site to Next.js, how would you plan the rollout of intercepting‑route modals to minimize disruption across teams?

  2. 2

    How would you standardize modal routing conventions across multiple product squads to ensure consistency, testability, and maintainability?

  3. 3

    Consider a scenario where the modal must support server‑side rendering for SEO and also work offline in a PWA. How would you architect the solution using intercepting routes and what compromises might you make?

Follow-up Questions

  • ❓How would you handle deep linking directly to the modal URL?
  • ❓What would you monitor in production to detect issues with this routing pattern?
  • ❓Can you outline a testing approach for this modal behavior?