Parallel Routes and Intercepting Routes in the Next.js App Router: Field Notes on the Photo-Modal Pattern
Parallel routes let a Next.js App Router layout render more than one page at the same URL through named @slot folders, and intercepting routes — the (.) , (..) , (..)(..) , and (...) folder conventions — let a link swap in a different component for that slot without changing the URL. Together they're how an Instagram-style photo modal stays shareable: the same URL renders a modal on a…
The article discusses the use of parallel routes and intercepting routes in the Next.js App Router, focusing on the Photo-Modal pattern. Parallel routes allow a layout to render multiple pages at the same URL through named @slot folders, while intercepting routes enable swapping a different component for that slot without changing the URL.
The article explains that these features enable an Instagram-style photo modal pattern, where the same URL renders a modal on a soft navigation and a full page on a hard refresh. Key takeaways include how parallel routes work as named slots within a layout, how intercepting routes match routes relative to the file system, and how default.tsx is used to render content when the current URL doesn't match anything inside a slot.
Brief written by urgent.news from Dev.to's own syndicated text. Machine-written — may contain errors; check the original before relying on it.
This story
This is one outlet's version. Read the fullest account.
