One of the most useful advanced [App Router](/courses/nextjs) patterns combines **Parallel Routes** and **Intercepting Routes** to create a modal that has a real shareable URL. ### Desired Behavior From a photo gallery: ```text /gallery ``` clicking photo 123 should show: ```text Gallery remains visible + Photo 123 modal opens ``` with a navigable URL for the photo. But opening that photo URL directly should display: ```text Full photo page ``` rather than the modal. ### Normal Photo Route ```text app/ photo/ [id]/ page.tsx ``` This gives the standalone page. ### Add a Modal Slot Conceptually: ```text app/ @modal/ default.tsx ``` The layout receives the modal slot: ```tsx export default function RootLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode; }) { return ( {children} {modal} ); } ``` ### Intercept the Photo Route Inside the modal slot, create the appropriate interception route: ```text @modal/ (.)photo/ [id]/ page.tsx ``` The exact matcher depends on where the slot and destination route are positioned in the route tree. ### Intercepted Page ```tsx import Modal from '@/components/Modal'; import Photo from '@/components/Photo'; export default async function PhotoModal({ params }) { const { id } = await params; return ( ); } ``` ### default.tsx The slot should render nothing when no modal is active: ```tsx export default function Default() { return null; } ``` ### Closing the Modal A modal can integrate with browser navigation: ```tsx 'use client'; import { useRouter } from 'next/navigation'; export default function Modal({ children }) { const router = useRouter(); return (

{children}

); } ``` ### Why This Pattern Is Better Than a Local Boolean A normal state-only modal: ```javascript const [open, setOpen] = useState(false); ``` cannot naturally provide all of these together: ```text Shareable URL Browser Back closes modal Browser Forward reopens modal Direct URL renders full page Page context remains during soft navigation ``` ### Interview-Ready Answer URL-based [Next.js](/courses/nextjs) modals combine a Parallel Route slot with an Intercepting Route. Client-side navigation renders the destination inside the modal slot while preserving the surrounding page, whereas a direct visit or refresh renders the destination's normal full page. This provides deep linking and natural browser Back/Forward behavior.