0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Conditional Slot Rendering for Dashboards and Tabs

Drive dashboard sections and tabbed views by mapping route segments to parallel slots.

What Are Parallel Routes?

Next.js 15 introduces Parallel Routes, a layout primitive that lets you render multiple pages simultaneously within the same layout — each in its own named slot.

This is ideal for dashboards where you want independent sections like an analytics panel, a team feed, and a notifications sidebar all loading concurrently and independently.

  • Slots are defined with the @slotName folder convention inside a layout segment
  • Each slot is passed as a prop to the parent layout.tsx
  • Slots render in parallel — one can stream while another is already resolved

Think of slots as named holes in your layout that the router fills with different route subtrees simultaneously.

Folder Structure for Parallel Slots

To create parallel slots, place @slotName folders directly inside your route segment folder. Each slot folder acts as its own mini route tree.

A typical dashboard might look like this:

  • app/dashboard/layout.tsx — receives all slot props
  • app/dashboard/@analytics/page.tsx — analytics slot
  • app/dashboard/@team/page.tsx — team feed slot
  • app/dashboard/@notifications/page.tsx — notifications slot

The slot folders do not affect the URL. The URL remains /dashboard while all three slots render simultaneously.

// File: app/dashboard/layout.tsx
// TypeScript interface showing slot props

interface DashboardLayoutProps {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
  notifications: React.ReactNode;
}

export default function DashboardLayout({
  children,
  analytics,
  team,
  notifications,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard-grid">
      <main className="col-span-2">{children}</main>
      <aside className="analytics-panel">{analytics}</aside>
      <aside className="team-panel">{team}</aside>
      <aside className="notifications-panel">{notifications}</aside>
    </div>
  );
}

All lessons in this course

  1. Parallel Routes with Named Slots and Default Segments
  2. Intercepting Routes for Shared Modal Experiences
  3. Conditional Slot Rendering for Dashboards and Tabs
  4. Building a Photo-Modal Flow with Soft Navigation
← Back to Next.js 15 Fullstack (App Router + Server Actions)