Parallel Routes in Next.js — Rendering Dynamic Pages with Named Slots

1. What Are Parallel Routes?

Parallel Routes let you render multiple route segments at the same time or conditionally within a shared layout. They’re perfect for dashboards, feeds, and other dynamic UI sections.

2. Defining Slots with @folder

Use folders prefixed with @ to define slots. For example:

app/@team/page.tsx
app/@analytics/page.tsx

In the root layout, pass these slots as props:

export default function Layout({ children, team, analytics }) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

3. default.js — Fallback for Unmatched Slots

If a slot isn’t active for the current route, Next.js renders default.js as a fallback. Otherwise, it shows a 404.

// app/@auth/default.tsx
export default function Default() {
  return null
}

4. Navigation Behavior

• Soft Navigation: Only the active slot changes
• Hard Navigation: Unmatched slots fall back to default.js or 404

5. Reading Active Segments with useSelectedLayoutSegment

'use client'
import { useSelectedLayoutSegment } from 'next/navigation'

export default function Layout({ auth }) {
  const loginSegment = useSelectedLayoutSegment('auth')
}

6. Conditional Routes Based on User Role

export default function Layout({ user, admin }) {
  const role = checkUserRole()
  return role === 'admin' ? admin : user
}

7. Building Tab Groups with Layout Inside a Slot

To create tabs, define a layout inside the slot:

// app/@analytics/layout.tsx
<nav>
  <Link href="/page-views">Page Views</Link>
  <Link href="/visitors">Visitors</Link>
</nav>
<div>{children}</div>

8. Creating Modals with Parallel + Intercepting Routes

• Main route: /login
• Modal: @auth/(.)login/page.tsx

// app/@auth/(.)login/page.tsx
<Modal>
  <Login />
</Modal>

Opening the Modal:

// app/layout.tsx
<Link href="/login">Open modal</Link>
<div>{auth}</div>
<div>{children}</div>

Closing the Modal:

'use client'
import { useRouter } from 'next/navigation'

export function Modal({ children }) {
  const router = useRouter()
  return (
    <>
      <button onClick={() => router.back()}>Close modal</button>
      <div>{children}</div>
    </>
  )
}

Closing with Link:

<Link href="/">Close modal</Link>

Neutral Slot to Close Modal:

// app/@auth/page.tsx
export default function Page() {
  return null
}

9. Independent Loading and Error States

Each slot can have its own loading.js and error.js for better UX and streaming behavior.

Conclusion

Parallel Routes in Next.js are a powerful tool for building dynamic, tabbed, conditional, and modal-driven interfaces. With named slots, default.js fallbacks, and intercepting routes, you can create fluid, shareable, and context-aware user experiences.