🚀 Routes Parallèles dans Next.js

Les Routes Parallèles (Parallel Routes) sont une fonctionnalité puissante de Next.js 13+ qui permet de rendre plusieurs pages simultanément dans une même mise en page. Cela permet de créer des interfaces complexes comme des dashboards, des modales, ou des vues côte à côte.

1️⃣ Qu’est-ce qu’une Route Parallèle ?

📌 Une Route Parallèle permet d’afficher plusieurs segments de route en même temps dans un même layout.
📌 Elle est définie par un dossier préfixé par @ (appelé un “slot”).
📌 Chaque slot peut charger son propre contenu indépendamment des autres.

🛠 Exemple d’architecture avec des routes parallèles :


app/
├── layout.tsx        → Layout principal avec slots
├── page.tsx          → Page principale "/"
├── @dashboard/       → Slot "dashboard"
│   ├── page.tsx      → Contenu du slot dashboard
│   ├── loading.tsx   → Loading spécifique au slot
├── @sidebar/         → Slot "sidebar"
│   ├── page.tsx      → Contenu du slot sidebar

📍 Les deux slots @dashboard et @sidebar sont rendus en parallèle !

2️⃣ Création d’un Layout avec des Slots Parallèles

📍 Le layout reçoit les slots comme props enfants

app/layout.tsx


export default function RootLayout({
  children,
  dashboard,
  sidebar,
}: {
  children: React.ReactNode;
  dashboard: React.ReactNode;
  sidebar: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        <header>
          <nav>🧭 Navigation</nav>
        </header>
        <div className="flex">
          <aside className="w-64">{sidebar}</aside>
          <main className="flex-1">
            {children}
            {dashboard}
          </main>
        </div>
      </body>
    </html>
  );
}

💡 Explication :

✅ children correspond au contenu de page.tsx de la route actuelle.
✅ dashboard correspond au contenu de @dashboard/page.tsx.
✅ sidebar correspond au contenu de @sidebar/page.tsx.
✅ Tous sont rendus simultanément !

3️⃣ Exemple : Contenu des Slots

📍 Slot Dashboard (@dashboard/page.tsx)

app/@dashboard/page.tsx


export default function DashboardSlot() {
  return (
    <div className="p-4 bg-blue-100 rounded-lg">
      <h2 className="text-xl font-bold">📊 Tableau de bord</h2>
      <p>Statistiques et métriques en temps réel.</p>
    </div>
  );
}

📍 Slot Sidebar (@sidebar/page.tsx)

app/@sidebar/page.tsx


export default function SidebarSlot() {
  return (
    <nav className="p-4 bg-gray-100">
      <h3 className="font-semibold mb-2">📌 Menu</h3>
      <ul className="space-y-2">
        <li><a href="/">🏠 Accueil</a></li>
        <li><a href="/settings">⚙️ Paramètres</a></li>
        <li><a href="/profile">👤 Profil</a></li>
      </ul>
    </nav>
  );
}

💡 Résultat : La sidebar et le dashboard s’affichent en même temps, dans la même page !

4️⃣ Gestion du Loading et des Erreurs par Slot

📌 Chaque slot peut avoir son propre fichier loading.tsx et error.tsx.

🛠 Structure avec loading et error :


app/
├── @dashboard/
│   ├── page.tsx
│   ├── loading.tsx   → Loader spécifique au dashboard
│   ├── error.tsx     → Gestion d'erreur spécifique
├── @sidebar/
│   ├── page.tsx
│   ├── loading.tsx   → Loader spécifique à la sidebar

📍 Exemple de loading pour le dashboard

app/@dashboard/loading.tsx


export default function DashboardLoading() {
  return (
    <div className="p-4 bg-blue-50 animate-pulse rounded-lg">
      <p className="text-gray-500">⏳ Chargement du tableau de bord...</p>
    </div>
  );
}

💡 Chaque slot charge indépendamment, donc si le dashboard prend du temps à charger, la sidebar reste visible !

5️⃣ Cas d’usage : Modales avec Routes Parallèles

📌 Les routes parallèles sont parfaites pour les modales qui peuvent être ouvertes via une route.

🛠 Structure pour une modale :


app/
├── layout.tsx
├── page.tsx          → Page principale
├── @modal/
│   ├── default.tsx   → Slot vide par défaut
│   ├── (.)photo/
│   │   └── [id]/
│   │       └── page.tsx → Modale photo
├── photo/
│   └── [id]/
│       └── page.tsx  → Page photo complète

📍 Layout intégrant la modale

app/layout.tsx


export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

📍 Default.tsx pour le slot vide

app/@modal/default.tsx


export default function ModalDefault() {
  return null; // Pas de modale affichée par défaut
}

📍 Contenu de la modale

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


import { notFound } from "next/navigation";
 
export default function PhotoModal({ params }: { params: { id: string } }) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg max-w-lg">
        <h2 className="text-xl font-bold mb-4">📷 Photo {params.id}</h2>
        <img 
          src={`/images/photo-${params.id}.jpg`} 
          alt={`Photo ${params.id}`}
          className="rounded"
        />
        <a href="/" className="mt-4 block text-blue-500">← Retour</a>
      </div>
    </div>
  );
}

💡 Résultat : En cliquant sur un lien vers /photo/1, la modale s’ouvre au-dessus de la page actuelle sans la remplacer !

6️⃣ Le fichier `default.tsx`

📌 Le fichier default.tsx est obligatoire pour les slots qui n’ont pas de contenu correspondant à la route actuelle.

📍 Quand utiliser default.tsx ?

Quand un slot n’a pas de page pour certaines routes.
Pour éviter une erreur 404 dans le slot.

app/@sidebar/default.tsx


export default function SidebarDefault() {
  return (
    <nav className="p-4 bg-gray-50">
      <p className="text-gray-400">Navigation par défaut</p>
    </nav>
  );
}

7️⃣ Comparaison : Routes Parallèles vs Layouts classiques

⚡ Critère	🏗 Layouts classiques	🚀 Routes Parallèles
Nombre de contenus simultanés	1 (`children`)	Plusieurs slots
Chargement indépendant	❌ Non	✅ Oui
Loading/Error par section	❌ Non	✅ Oui
Utilisation pour modales	❌ Complexe	✅ Natif
Cas d’usage	Sites simples	Dashboards, modales, apps complexes

🎯 Conclusion : Pourquoi utiliser les Routes Parallèles ?

✔ Interfaces complexes → Affichez plusieurs vues simultanément (dashboards, split views).
✔ Chargement indépendant → Chaque slot peut avoir son propre état de loading.
✔ Modales natives → Ouvrez des modales via l’URL sans perdre le contexte.
✔ Expérience utilisateur optimisée → L’utilisateur voit le contenu progressivement.

💡 Les routes parallèles sont essentielles pour créer des applications Next.js modernes et performantes ! 🚀