# Parallel Routes Generator

> Implémente les Parallel Routes Next.js pour modals sans layout shifts. MANDATORY pour modals. À utiliser lors de modals, dialogs, ou quand l'utilisateur mentionne "modal", "dialog", "parallel route", "intercepted route".

- Skill: `majiayu000/parallel-routes-generator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/parallel-routes-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/parallel-routes-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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

```typescript
// app/(dashboard)/layout.tsx

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

### Default Modal

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

export default function Default() {
  return null;
}
```

### Modal Intercepté

```typescript
// 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

```typescript
'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 onOpenChange={() => router.back()}>
      <DialogContent>
        {children}
      </DialogContent>
    </Dialog>
  );
}
```

### Usage

```typescript
// 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.