Parallel routes
Slots (@name folders) render several pages in one layout at the same time. Each slot gets its own loading and error states and navigates independently.
text
app/dashboard/
layout.tsx
page.tsx
@analytics/page.tsx
@team/page.tsxtsx
export default function Layout({ children, analytics, team }: LayoutProps<'/dashboard'>) {
return (
<>
{children}
<div className="grid grid-cols-2">{analytics}{team}</div>
</>
);
}When a slot has no page for the current URL after a full reload, Next.js renders its default.tsx (or 404 without it).
Intercepting routes
(.), (..), (...) folders show another route inside the current layout during client-side navigation, while a direct visit or reload opens the full page.
| Convention | Intercepts |
|---|---|
(.)photo | A segment on the same level |
(..)photo | One level up |
(...)photo | From the root app |
Together: a modal with its own URL
text
app/
@modal/(.)photo/[id]/page.tsx <- modal on top of the feed
@modal/default.tsx <- returns null
photo/[id]/page.tsx <- full page on reload
layout.tsx <- renders {children}{modal}- Clicking a photo opens a modal and changes the URL, so it can be shared.
- Back closes the modal, reload shows the full page.
updated
did you know it?