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

Question

Accepted Answer

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 . 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 . Parallel routes: Named slots (`@modal`) that can render independently, letting you show content in a modal while the underlying feed remains visible . 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 . ``` app/ ├── layout.js # Root layout with parallel modal slot ├── page.js # Feed page (/) ├── default.js # Fallback for children slot ├── @modal/ │ ├── default.js # Empty fallback when no modal │ └── (.)photo/ # Intercept photo routes from same level │ └── [id]/ # Dynamic photo ID │ └── page.js # Modal photo component ├── photo/ │ └── [id]/ # Regular photo page for direct access │ └── page.js # Full photo page component └── feed/ └── page.js # Optional: feed pagination ``` ```tsx // app/layout.tsx import { ReactNode } from 'react'; export default function RootLayout({ children, modal, }: { children: ReactNode; modal: ReactNode; }) { return ( {children} {modal} {/* Modal overlay portal could be added here */} ); } ``` The layout receives both the `children` slot (main content) and the `modal` slot (parallel route). The modal renders in an overlay, potentially using a portal to position it above the content . ```tsx // app/page.tsx (or app/feed/page.tsx) import Link from 'next/link'; import { Photo } from '@/components/Photo'; async function getPhotos() { const res = await fetch('https://jsonplaceholder.typicode.com/photos?_limit=10'); return res.json(); } export default async function FeedPage() { const photos = await getPhotos(); return (

Photo Feed

{photos.map((photo) => ( ))}

); } ``` When users click a photo, they navigate to `/photo/1`. The intercepting route catches this navigation because `(.)photo` intercepts `/photo` from the same level . ```tsx // app/@modal/(.)photo/[id]/page.tsx import { Modal } from '@/components/Modal'; import { PhotoDetail } from '@/components/PhotoDetail'; import { notFound } from 'next/navigation'; async function getPhoto(id: string) { const res = await fetch(`https://jsonplaceholder.typicode.com/photos/${id}`); if (!res.ok) return null; return res.json(); } export default async function PhotoModal({ params }: { params: { id: string } }) { const photo = await getPhoto(params.id); if (!photo) { return notFound(); } return ( ); } // This component is only rendered when navigating from within the app. // The photo appears in a modal overlay, while the feed remains visible behind it. ``` The `Modal` component would typically use a portal to render its content above the main page, often with a close button that navigates back . ```tsx // app/photo/[id]/page.tsx import { PhotoDetail } from '@/components/PhotoDetail'; import Link from 'next/link'; import { notFound } from 'next/navigation'; async function getPhoto(id: string) { const res = await fetch(`https://jsonplaceholder.typicode.com/photos/${id}`); if (!res.ok) return null; return res.json(); } export default async function PhotoPage({ params }: { params: { id: string } }) { const photo = await getPhoto(params.id); if (!photo) { return notFound(); }

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

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

Scenario Questions

Follow-up Questions