What are Parallel Routes in Next.js? | Next.js Interview Questions

What You'll Learn

Parallel route slots
Conditional rendering
Modals with routes

Parallel Routes Structure

code.jsJavaScript

app/
├── layout.tsx
├── page.tsx
├── @team/
│   └── page.tsx
└── @analytics/
    └── page.tsx

Layout with Slots

code.txtTSX

// app/layout.tsx
export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      {children}
      <div className="grid grid-cols-2">
        {team}
        {analytics}
      </div>
    </div>
  );
}

Conditional Rendering

code.txtTSX

// Show different content based on auth
export default function Layout({
  children,
  auth,
  dashboard,
}: {
  children: React.ReactNode;
  auth: React.ReactNode;
  dashboard: React.ReactNode;
}) {
  const isLoggedIn = checkAuth();

  return (
    <>
      {isLoggedIn ? dashboard : auth}
      {children}
    </>
  );
}

Default.tsx

code.txtTSX

// app/@team/default.tsx
// Shown when slot doesn't match current URL
export default function Default() {
  return null;
}