Intercepting Routes (Modals) in Next.js
From the Next.js cheat sheet · Advanced Routing & Modern Features · verified Jul 2026
Intercepting Routes (Modals)
Catch a route inside the current layout — perfect for modals
tsx
// app/feed/page.tsx
<Link href="/photo/123">Open</Link>
// app/photo/[id]/page.tsx ← full page on hard nav / refresh
// app/feed/(..)photo/[id]/page.tsx ← modal on client nav from /feed
export default function PhotoModal({ params }: { params: { id: string } }) {
return (
<Modal>
<Photo id={params.id} />
</Modal>
)
}💡 Same URL renders as modal from /feed and full page on refresh
⚡ (.), (..), (..)(..), (...) are the segment-level interception matchers
📌 Almost always paired with a parallel @modal slot for clean layering
🎯 Shareable + bookmarkable modals — the killer Next.js routing pattern
routingmodalsapp-router