Rute Paralel dengan Slot Bernama dan Segmen Default

Parallel Routes is a Next.js App Router feature that lets you render multiple independent route segments simultaneously inside a single layout. Each segment lives in its own named slot and can navigate, load, and error independently.

• Think of a dashboard with a sidebar, a main panel, and a notification feed — all loaded in parallel, each with its own loading/error states.
• Parallel routes are defined using the @folder naming convention inside a route segment directory.
• Each slot becomes a prop on the parent layout.tsx.

This is fundamentally different from nested layouts: parallel slots share the same URL but render separate route trees side by side.

To create a parallel slot, prefix a folder with @ inside any route segment. Next.js treats these as named slots rather than URL segments.

• app/dashboard/@analytics/page.tsx → slot named analytics
• app/dashboard/@team/page.tsx → slot named team
• The @folder name does not appear in the URL — visiting /dashboard renders all matching slots.

A typical parallel-routes directory tree looks like this:

The parent layout.tsx receives each named slot as a React prop alongside the standard children prop. You can position them anywhere in the JSX.

• TypeScript types for slots are just React.ReactNode.
• Slots are completely independent — one can suspend while another is already rendered.
• The children prop itself is an implicit slot named children.

Each named slot needs its own page.tsx. These pages are standard Server Components (or Client Components) — there is nothing special about their internal structure.

• Slots can have their own loading.tsx, error.tsx, and nested routes.
• Data fetching inside a slot is independent: one slot can await a slow database call without blocking the others.

Each slot can ship its own loading.tsx. Next.js wraps it in a Suspense boundary automatically, so slots stream in independently — fast slots appear immediately while slow ones show a skeleton.

• This eliminates the waterfall problem common in single-tree layouts.
• Users see meaningful UI much sooner because partial content renders first.

Parallel routes shine during hard navigation (full page load), but soft navigation (client-side link clicks) reveals a problem.

When a user navigates to a sub-route — for example /dashboard/settings — Next.js looks for a matching page in every active slot. If a slot has no page for /settings, it becomes unmatched.

• An unmatched slot does not simply disappear — Next.js needs to know what to render.
• Without a fallback, Next.js renders a 404 for the entire page.
• The solution is default.tsx.

default.tsx is the fallback file Next.js renders for a slot when it has no matching page.tsx for the current URL. It acts like a catch-all within the slot's subtree.

• Place default.tsx at the root of each slot: @analytics/default.tsx.
• During soft navigation to an unmatched sub-route, Next.js renders default.tsx instead of 404-ing.
• default.tsx receives the same params as a page; you can use it to show the slot's normal content unchanged, or a meaningful placeholder.

The implicit children slot (i.e. page.tsx at the segment root) also needs a default.tsx when parallel slots are present. Without it, navigating to a named slot's sub-route that doesn't match children will 404.

• Add app/dashboard/default.tsx alongside app/dashboard/page.tsx.
• It typically re-renders the same content as page.tsx, or a neutral empty state.

Named slots support their own nested route hierarchies. You can add [id] dynamic segments, route groups, or additional layouts entirely inside a slot — all without affecting the URL segments of sibling slots.

• Example: @analytics/chart/[chartId]/page.tsx renders at /dashboard/chart/42 only inside the analytics slot.
• The parent layout and other slots remain untouched.
• Each nested level inside a slot can have its own loading.tsx, error.tsx, and default.tsx.

A classic use-case for parallel routes is rendering a modal in one slot while the main content stays visible in another — without losing the current scroll position or unmounting components.

• Create an @modal slot with a default.tsx that returns null (nothing visible by default).
• When a user clicks a trigger, Next.js navigates to the modal's page, filling the slot.
• The main children slot continues rendering unchanged.

As the number of slots grows, keep your layout props explicit with a dedicated TypeScript interface. This makes refactoring safer and IDE autocompletion more helpful.

• Slot props are always React.ReactNode — they accept any renderable value Next.js injects.
• You can combine parallel slots with searchParams or route params in the same layout signature.
• For shared slot configuration (e.g. theming), pass context via a React Context Provider inside the layout rather than prop-drilling through each slot page.

Test your understanding of the default.tsx file in parallel routes.

Here is what you learned in this lesson:

• Parallel Routes let you render multiple independent route trees in the same layout simultaneously, each in its own @slot folder.
• Named slots use the @folderName convention and become props (React.ReactNode) on the parent layout.tsx.
• Each slot is truly independent: it can have its own loading.tsx, error.tsx, nested routes, and data fetching without blocking siblings.
• default.tsx is the critical fallback file. Without it, soft navigation to a URL that does not match a slot produces a 404. Place a default.tsx in every slot — including the implicit children slot — to prevent this.
• Common patterns include dashboard multi-panels (analytics + team side by side) and modal-alongside-page where the @modal slot's default.tsx returns null.
• Keep layout props strongly typed with a TypeScript interface as the slot count grows.

With parallel routes and default.tsx in place, your layouts become resilient, independently streaming, and far easier to reason about than a single monolithic route tree.