javascript / intermediate
Snippet
Intercepting Routes for Contextual Modals
Intercepting routes allows you to load a route from another part of your application within the current layout. This is commonly used for modals where you want to maintain the context of the background page while giving the modal its own shareable URL.
snippet.js
javascript
1
2
3
4
5
// app/feed/@modal/(..)photos/[id]/page.tsxexport default async function PhotoModal({ params }: { params: { id: string } }) {const photo = await getPhoto(params.id);return <Modal><PhotoView photo={photo} /></Modal>;}
nextjs
Breakdown
1
app/feed/@modal/(..)photos/[id]/page.tsx
The (..) syntax intercepts the /photos route at the same level as the feed directory.
2
export default async function PhotoModal
A standard React Server Component that fetches data for the specific ID.
3
<Modal><PhotoView photo={photo} /></Modal>
Renders the content inside a modal wrapper while the background page remains visible.