8. Parallel Routes

Using the Streaming and <Suspense> patterns covered previously, you can split distinct UI areas on a single page (e.g., a dashboard showing "orders" and "revenue") by extracting child components and wrapping them in <Suspense>. However, that manual approach misses out on the automated loading.tsx/error.tsx file-convention semantics established in earlier phases. Parallel Routes resolve this exact structural limitation.

1. Syntax: named slots (@slotName)

app/dashboard/
  @orders/
    page.tsx       (order list)
    loading.tsx    (dedicated loading state for this section)
    error.tsx      (dedicated error boundary for this section)
  @revenue/
    page.tsx       (revenue chart)
    loading.tsx
    error.tsx
  layout.tsx       (receives both slots as props)
  page.tsx

export default function DashboardLayout({
  children,
  orders,
  revenue,
}: {
  children: React.ReactNode;
  orders: React.ReactNode;
  revenue: React.ReactNode;
}) {
  return (
    <div>
      <div className="main">{children}</div>
      <div className="left">{orders}</div>
      <div className="right">{revenue}</div>
    </div>
  );
}

• Each named slot (@orders, @revenue) has its own isolated loading.tsx and error.tsx.
• Slots execute and fail independently: a runtime error thrown in @revenue triggers only its own error.tsx boundary, leaving @orders and children fully operational.

2. children is an implicit slot

• The standard children prop in layout.tsx is simply an unnamed, default slot mapped directly to the page.tsx located at the root of that segment (outside any @slotName folders).
• children, @orders, and @revenue all act as parallel component injection points; layout.tsx orchestrates their placement in the DOM.

3. default.tsx: required to prevent 404 errors

• When triggering a hard navigation (direct URL entry, full page reload, or external links), Next.js cannot automatically infer what an inactive slot should render if the URL does not explicitly match a nested route inside that slot. Without a fallback file, Next.js throws a 404 error for the entire route.
• During soft navigations (in-app client transitions via <Link> or browser forward/back buttons), Next.js preserves the previously active state of each slot.
• Providing a default.tsx file inside every named slot folder serves as the fallback view for hard refreshes and is practically mandatory when using Parallel Routes.

4. Current scope boundaries

• Parallel Routes and Intercepting Routes are advanced architectural patterns, primarily leveraged in complex multi-panel dashboards or URL-driven modal overlays (such as Instagram-style photo viewports that retain shareable/refreshable URLs).
• This note captures the foundational core (named slots, children parity, and default.tsx fallback mechanics) while intentionally deferring Intercepting Routes syntax ((.), (..)) until a concrete domain requirement arises.