Next.js Parallel Routes Patterns

# Next.js Parallel Routes Patterns for Google Antigravity IDE

Build complex layouts with Parallel Routes using Google Antigravity IDE. This guide covers modal patterns, conditional rendering, and independent loading states.

## Basic Parallel Route Setup

```
app/
  @sidebar/
    default.tsx
    page.tsx
  @main/
    default.tsx
    page.tsx
  layout.tsx
  page.tsx
```

```typescript
// app/layout.tsx
export default function Layout({
  children,
  sidebar,
  main,
}: {
  children: React.ReactNode;
  sidebar: React.ReactNode;
  main: React.ReactNode;
}) {
  return (
    <div className="flex h-screen">
      <aside className="w-64 border-r">{sidebar}</aside>
      <main className="flex-1">{main}</main>
    </div>
  );
}

// app/@sidebar/default.tsx
export default function SidebarDefault() {
  return (
    <nav className="p-4">
      <h2 className="font-semibold mb-4">Navigation</h2>
      <ul className="space-y-2">
        <li><a href="/dashboard">Dashboard</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/settings">Settings</a></li>
      </ul>
    </nav>
  );
}

// app/@main/default.tsx
export default function MainDefault() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Welcome</h1>
      <p className="text-gray-600">Select a section from the sidebar.</p>
    </div>
  );
}
```

## Modal Parallel Route

```
app/
  @modal/
    (.)photo/[id]/
      page.tsx
    default.tsx
  photo/[id]/
    page.tsx
  layout.tsx
```

```typescript
// app/layout.tsx
export default function Layout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

// app/@modal/default.tsx
export default function ModalDefault() {
  return null;
}

// app/@modal/(.)photo/[id]/page.tsx
import { Modal } from "@/components/Modal";

export default async function PhotoModal({ params }: { params: { id: string } }) {
  const photo = await getPhoto(params.id);

  return (
    <Modal>
      <img src={photo.url} alt={photo.title} className="max-w-full max-h-[80vh]" />
      <h2 className="text-xl font-semibold mt-4">{photo.title}</h2>
      <p className="text-gray-600">{photo.description}</p>
    </Modal>
  );
}

// components/Modal.tsx
"use client";

import { useRouter } from "next/navigation";

export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="fixed inset-0 bg-black/50" onClick={() => router.back()} />
      <div className="relative bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <button onClick={() => router.back()} className="absolute top-4 right-4">Close</button>
        {children}
      </div>
    </div>
  );
}
```

## Conditional Slot Rendering

```typescript
// app/dashboard/layout.tsx
import { auth } from "@/lib/auth";

export default async function DashboardLayout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  notifications: React.ReactNode;
}) {
  const session = await auth();
  const isAdmin = session?.user?.role === "admin";

  return (
    <div className="grid grid-cols-12 gap-6 p-6">
      <div className="col-span-12 lg:col-span-8">{children}</div>
      <div className="col-span-12 lg:col-span-4 space-y-6">
        {isAdmin && analytics}
        {notifications}
      </div>
    </div>
  );
}
```

## Independent Loading States

```typescript
// app/@analytics/loading.tsx
export default function AnalyticsLoading() {
  return (
    <div className="bg-gray-100 rounded-lg p-4 animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-1/3 mb-4" />
      <div className="h-32 bg-gray-200 rounded" />
    </div>
  );
}

// app/@notifications/loading.tsx
export default function NotificationsLoading() {
  return (
    <div className="space-y-2">
      {[...Array(3)].map((_, i) => (
        <div key={i} className="bg-gray-100 rounded p-3 animate-pulse">
          <div className="h-3 bg-gray-200 rounded w-full mb-2" />
          <div className="h-3 bg-gray-200 rounded w-2/3" />
        </div>
      ))}
    </div>
  );
}
```

## Best Practices for Google Antigravity IDE

When using Parallel Routes with Google Antigravity, always provide default.tsx files. Use intercepting routes for modals. Implement independent loading states. Conditionally render slots based on user context. Let Gemini 3 generate parallel route structures from your layout requirements.

Google Antigravity excels at building complex layouts with Parallel Routes.