Deviopath › Next.js

Parallel Route Slots and default.tsx

Hard · Routing

Parallel routes let one layout render several pages at once. Folders named @team and @analytics next to app/dashboard/layout.tsx are slots, passed to the layout as the team and analytics props; the normal page.tsx is the implicit children slot. Slots are not URL segments: app/dashboard/@team/settings/page.tsx is shown for /dashboard/settings.

What a slot shows depends on the navigation type:

- Soft navigation (client-side, <Link>): slots that match the new URL render their page; slots that do not match keep showing their previous page.

- Hard navigation (first load or refresh): Next.js cannot recover the previous state, so unmatched slots render their default.tsx. In Next.js 16 every named slot must have a default.tsx or the build fails. For the children slot, a missing default.tsx gives a 404 for the route.

Write simulateSlots(basePath, slots, navigations). This is a simplified model of how slots are chosen. slots maps slot names (children plus named slots) to file paths relative to the slot folder. navigations are { type: "soft" | "hard", url }.

- If any named slot has no default.tsx, return the string "Build error: missing default.tsx in @a, @b" (names sorted).

- For each navigation, take the URL path (no query) after the basePath segments. A slot matches if it has a .../page.tsx whose folders match those segments one by one; a [param] folder matches any one segment, and on several matches the one with static folders earlier wins. An empty path matches page.tsx.

- If no slot matches, the result is "404" and the remembered state does not change.

- A navigation counts as hard if its type is "hard" or nothing has rendered successfully yet. Hard: unmatched slots use "default.tsx"; if an unmatched slot has none (only possible for children), the result is "404" and the state does not change. Soft: unmatched slots keep their previous file.

- Otherwise the result is an object mapping each slot name to the file it renders, and it becomes the remembered state.

Return the list of results.

Next: Validate a Multi-File Upload Action