javascript / expert
Snippet
Advanced Parallel and Intercepting Routes for Context-Aware Modals
Next.js Parallel Routes and Intercepting Routes allow you to render a modal while keeping the current page context in the background. The (.) notation intercepts navigation within the same level, enabling a 'master-detail' pattern without losing the list state.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// app/layout.tsxexport default function RootLayout({ children, modal }: { children: React.ReactNode, modal: React.ReactNode }) {return (<html><body>{children}{modal}</body></html>);}// app/@modal/(.)photos/[id]/page.tsxexport default function PhotoModal({ params }: { params: { id: string } }) {return <ModalWrapper>Photo ID: {params.id}</ModalWrapper>;}
nextjs
Breakdown
1
{ children, modal }
Declaring a layout slot that allows the 'modal' parallel route to render alongside children.
2
(.)photos/[id]
The (.) prefix intercepts internal navigation to the photos route while preserving background context.