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

// app/feed/@modal/(..)photos/[id]/page.tsx
export default async function PhotoModal({ params }: { params: { id: string } }) {
  const photo = await getPhoto(params.id);
  return <Modal><PhotoView photo={photo} /></Modal>;
}

nextjs

Breakdown

app/feed/@modal/(..)photos/[id]/page.tsx

The (..) syntax intercepts the /photos route at the same level as the feed directory.

export default async function PhotoModal

A standard React Server Component that fetches data for the specific ID.

Renders the content inside a modal wrapper while the background page remains visible.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Intercepting Routes for Contextual Modals

Related