Next.js Parallel Routes: Multiple Pages in One View

WHY IT EXISTS Traditional routing maps one URL to one page view. But modern UIs, especially dashboards, often need to show multiple, independent sections at once. Parallel Routes solve this by allowing several pages to be composed into a single layout without complex client-side state management.

THE MENTAL MODEL Imagine a security control room with multiple monitors, each showing a different camera feed. The room is the layout, and each monitor is a "slot" for a parallel route. You can change the feed on one monitor without affecting the others. Each monitor can have its own loading state ("connecting...") or error state ("signal lost").

HOW IT WORKS Parallel Routes are defined using a folder convention called "slots." You create a folder prefixed with an ampersand, like @analytics or @team. These slots are automatically passed as props to the nearest shared layout.js file. You then render them in your layout: {props.analytics} and {props.team}. Each slot can navigate independently and has its own loading.js and error.js boundaries.

WHEN TO USE IT Use Parallel Routes for highly dynamic layouts that need to display multiple pieces of content conditionally. Three key places are: first, dashboards with independent widgets; second, UIs with tabs where each tab's content should be a separate route; and third, rendering modals that are tied to a specific URL, often used with Intercepting Routes.

WHEN NOT TO USE IT For simple, linear user flows where one page follows another, Parallel Routes add unnecessary complexity. If your layout only ever needs to render a single main content area (a single children prop), standard file-based routing is the simpler and better choice.

ONE CANONICAL EXAMPLE A common footgun is forgetting the fallback UI. If a user navigates to /dashboard but one of your slots, @team, doesn't have a /dashboard/page.js, Next.js doesn't know what to render there. By default, it shows a 404. To prevent this, you must create a @team/default.js file. This file will be rendered for any URL where the @team slot is not explicitly matched, ensuring the rest of your dashboard remains visible.