Parallel Routes Generator

Parallel Routes Generator

🎯 Mission

Implémenter des modals avec Parallel Routes Next.js pour éviter les layout shifts et améliorer l'UX.

🏗️ Structure

app/(dashboard)/
├── @modal/
│   ├── (..)upgrade/
│   │   └── page.tsx          # Modal interceptée
│   ├── (..)confirm-delete/
│   │   └── page.tsx
│   └── default.tsx            # Returns null
├── layout.tsx                 # Accepte {children, modal}
└── page.tsx

Layout avec Modal Slot

// app/(dashboard)/layout.tsx

export default function DashboardLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

Default Modal

// app/(dashboard)/@modal/default.tsx

export default function Default() {
  return null;
}

Modal Intercepté

// app/(dashboard)/@modal/(..)upgrade/page.tsx

import { Modal } from '@/components/ui/modal';
import { UpgradeForm } from '@/features/subscription/components/UpgradeForm';

export default function UpgradeModal() {
  return (
    <Modal>
      <UpgradeForm />
    </Modal>
  );
}

Modal Component

'use client';

import { useRouter } from 'next/navigation';
import { Dialog, DialogContent } from '@/components/ui/dialog';

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

  return (
    <Dialog open => router.back()}>
      <DialogContent>
        {children}
      </DialogContent>
    </Dialog>
  );
}

Usage

// Link ouvre le modal
<Link href="/upgrade">Upgrade</Link>

// URL directe charge la page complète
// URL via navigation charge le modal

✅ Checklist

• Slot @modal créé
• default.tsx retourne null
• Route interceptée avec (..)
• Modal composant avec close handler
• Layout accepte {modal} slot

Rappel: Parallel Routes = Better UX que modals traditionnels.