How Parallel Routes work
The parent layout receives every slot as a prop with the slot's name and renders it next to the children prop. children is itself an implicit slot, so app/page.js behaves like app/@children/page.js. Slot folders stay out of the URL, so a page at /@analytics/views is served at /views.
On a soft (client-side) navigation, Next.js renders only the slot that changed and keeps the other slots on their current subpages, even if those no longer match the URL. After a full page load or a browser refresh, Next.js cannot recover the active subpage in slots that do not match the URL, so it falls back to default.js for them.
Since Next.js 16, every slot needs an explicit default.js file and the build fails without one. A default.js that calls notFound() or returns null restores the old behavior. For the implicit children slot, a missing default.js returns a 404 page when Next.js cannot recover the parent page's active state. The full file convention is in the Parallel Routes reference.
Patterns and caveats
Streaming. Each parallel route streams independently, so each slot can have its own loading and error UI. For other ways to speed up App Router pages, see the Next.js performance optimization guide.
Modals. Combined with Intercepting Routes (the
(.)folder convention), Parallel Routes produce modals that have their own shareable URL and survive a refresh.Tab groups. A layout file inside a slot lets users navigate that slot on its own, which is how the docs build tab groups.
Active segment.
useSelectedLayoutSegmentanduseSelectedLayoutSegmentstake an optionalparallelRouteKeyargument that returns the active segment inside a given slot.Types. The global
LayoutPropsTypeScript helper infers a layout's named slots from the directory structure, so slot props are typed automatically.
Caveats. Slots at the same route segment level cannot mix prerendered and dynamically rendered output; if one slot is dynamic, all of them are. When a layout picks one slot by condition, for example an admin or a user dashboard, both slots still render on the server and run their data fetches, so each slot's page has to check authorization itself.
Sources
- Parallel Routes (File-system conventions, App Router docs; lastUpdated 2026-10-15)Next.js · nextjs.org
- Next.js 16 (release blog post)Next.js · nextjs.org
- default.js (File-system conventions, App Router docs)Next.js · nextjs.org
- layout.js (File-system conventions, App Router docs)Next.js · nextjs.org