Parallel and intercepted routes

Parallel routes give a layout named slots

A folder beginning with @ creates a slot that a parent layout receives as a prop. Slots do not become URL segments. They let one route compose independently rendered areas such as analytics, activity, and team panels.

Use this when the regions genuinely have separate navigation or loading behaviour. A normal component is simpler when the content always changes together.

app/dashboard/
├─ layout.tsx
├─ page.tsx
├─ @analytics/page.tsx
└─ @activity/page.tsx

export default function Layout({ children, analytics, activity }) {
  return <>{children}<aside>{analytics}</aside><section>{activity}</section></>
}

Every slot needs a sensible recovery path

During a soft navigation, Next.js can preserve the active subpage for a slot. After a full refresh, it needs a default.tsx when the current URL does not identify what that slot should render.

Treat default.tsx as an intentional fallback. Returning null is fine for an optional modal slot. A core dashboard panel should usually provide a useful default state.

Intercept a route when navigation context matters

An intercepted route can show a photo, sign-in form, or cart as a modal while preserving the page behind it. The same URL still renders as a normal page when it is opened directly or refreshed.

This solves a real product problem: the overlay has a shareable URL, browser back closes it naturally, and a direct visit never depends on the previous screen existing.

• Use (.) for a route at the same segment level.
• Use (..) for a route one segment above.
• Remember that matchers count route segments, not folders such as @modal slots.
• Keep the full-page route usable without the intercepted presentation.

A routed modal still has normal dialog responsibilities

Routing solves the URL and history behaviour. It does not provide focus trapping, Escape handling, an accessible name, scroll locking, or focus restoration. Use a tested dialog primitive or implement those behaviours deliberately.

Provide a close action that calls router.back when there is known navigation history, and a safe fallback route when the modal may have been reached in an unusual state.

Do not reach for advanced routing to avoid component state

Parallel and intercepted routes add file conventions that every future contributor must understand. They are worth it when the URL, browser history, reload behaviour, and independent loading states are part of the feature.

For a tooltip, disclosure, or temporary local panel, ordinary component state is usually the honest solution.