Master the vocabulary behind Next.js parallel and intercepting routes.
0 / 5 completed
1 / 5
At standup, a dev wants to render two independent sections of a dashboard that can load and error separately. Which App Router feature fits?
Parallel routes, defined with named @slot folders, let you render multiple independent pages into the same layout simultaneously, each with its own loading and error states. This suits dashboards with multiple independently-loading panes. It is distinct from simple nested dynamic routing.
2 / 5
During a design review, the team wants a modal that can be dismissed to reveal the underlying page, and deep-linked directly. Which pattern combines with parallel routes for this?
Intercepting routes (using conventions like (.)) are commonly combined with parallel route slots to show a route as a modal overlay while preserving the ability to deep-link and refresh into the full page. This pattern powers photo-modal and similar UIs. It relies on both features working together.
3 / 5
In a code review, a dev needs a fallback UI when a parallel slot has no matching route for the current URL. Which file provides it?
A default.tsx file inside a parallel route's slot folder renders as a fallback when Next.js can't otherwise determine what to show that slot on the current navigation. Without it, a hard navigation could 404 on an unmatched slot. This file is specific to the parallel routes convention.
4 / 5
An incident report shows one dashboard panel's error crashed the whole page. What should be added per slot?
Each parallel route slot can have its own error.tsx boundary, so a failure in one slot doesn't take down independently-rendered sibling slots. This isolation is one of the main benefits of parallel routes. Adding scoped error boundaries fixes the cascading crash.
5 / 5
During a PR review, a teammate asks how slots map to props in the shared layout. How are they accessed?
The shared layout.tsx receives each parallel slot as a prop named after its @slot folder (e.g., @team becomes a team prop), which it renders wherever needed. This explicit prop mapping is how the layout composes multiple simultaneously-rendered routes. It keeps the composition declarative.