PricingLoginStart free
Next.js 15 Fullstack Web Apps · Leçon

Routes parallèles et interceptrices

Mettez en œuvre des modèles d’interface avancés, comme les routes parallèles pour des sections indépendantes et les routes interceptrices pour des expériences similaires à des fenêtres modales.

Leçon 3 sur 412 étapes

Routes parallèles et interceptrices est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Advanced Routing Patterns

Welcome! In this lesson, we'll dive into two powerful Next.js App Router features: Parallel Routes and Intercepting Routes.

These patterns help you build more complex, flexible, and performant user interfaces.

Independent UI with Parallel Routes

Parallel Routes allow you to render multiple independent views or "slots" within the same layout, at the same time.

Think of a dashboard with different sections (e.g., analytics, recent activity) loading independently, or a social media feed with a profile sidebar.

Defining Parallel Route Slots

You define a parallel route by creating a folder prefixed with @, like @team or @analytics, inside your layout's directory.

  • Each @slot folder contains its own page.js or route.js.
  • The parent layout.js receives these slots as props.

Parallel Routes File Structure

Here's how you might set up a dashboard with two parallel slots: @users and @reports. The main layout.js renders both.

File Structure:

app/
├── dashboard/
│ ├── @users/
│ │ └── page.js
│ ├── @reports/
│ │ └── page.js
│ └── layout.js
└── page.js

Parallel Route Layout Code

The layout.js receives the parallel slots as props and renders them. If a slot isn't active for the current URL, Next.js can render a default.js.

/* app/dashboard/layout.js */
export default function DashboardLayout({ children, users, reports }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>{users}</div>
        <div style={{ flex: 1 }}>{reports}</div>
      </div>
      {children} {/* Renders content of dashboard/page.js if present */}
    </div>
  );
}

/* app/dashboard/@users/page.js */
export default function UsersPage() {
  return (
    <div style={{ border: '1px solid blue', padding: '10px' }}>
      <h2>Users Section</h2>
      <p>List of active users...</p>
    </div>
  );
}

/* app/dashboard/@reports/page.js */
export default function ReportsPage() {
  return (
    <div style={{ border: '1px solid green', padding: '10px' }}>
      <h2>Reports Section</h2>
      <p>Monthly sales report...</p>
    </div>
  );
}

Intercepting Routes for Modals

Intercepting Routes allow you to "catch" a route from within the current layout and display it as an overlay or modal, without changing the browser's URL.

This is perfect for showing image galleries, product details, or login forms on top of the current page.

Defining Intercepting Routes

Intercepting routes use the (.), (..), or (...) conventions to match segments at different levels relative to the current route.

  • (.)segment: Catches a segment at the same level.
  • (..)segment: Catches a segment one level above.
  • (...)segment: Catches a segment at the root app directory level.

Intercepting a Sibling Route

Imagine a photo gallery. When you click a photo, instead of navigating to /photos/123, a modal opens, but the URL remains /photos.

File Structure:

app/
├── photos/
│ ├── @modal/(.)[id]/
│ │ └── page.js
│ ├── page.js
│ └── layout.js

Intercepting Route Code Example

Here's a simplified example for a photo modal. The @modal slot catches the [id] route when navigated from /photos, displaying it as an overlay.

/* app/photos/page.js */
import Link from 'next/link';

export default function PhotosPage() {
  const photos = [{ id: '1', title: 'Sunset' }, { id: '2', title: 'Mountain' }];
  return (
    <div>
      <h1>My Photos</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
        {photos.map(photo => (
          <Link key={photo.id} href={`/photos/${photo.id}`}>
            <div style={{ border: '1px solid #ccc', padding: '10px', textAlign: 'center' }}>
              <h3>{photo.title}</h3>
              <p>(Click to view)</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

/* app/photos/@modal/(.)[id]/page.js */
export default function PhotoModal({ params }) {
  return (
    <div style={{
      position: 'fixed', top: '0', left: '0', right: '0', bottom: '0',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex',
      justifyContent: 'center', alignItems: 'center'
    }}>
      <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
        <h2>Photo ID: {params.id}</h2>
        <p>This is a modal for photo details.</p>
        <Link href="/photos">Close Modal</Link>
      </div>
    </div>
  );
}

When to Use Which Pattern

Parallel Routes are for displaying multiple, independent sections of UI simultaneously in a fixed layout (e.g., dashboards).

Intercepting Routes are for displaying content on top of the current page, typically as a modal, without changing the underlying URL (e.g., image viewers).

They solve different but equally important UI challenges!

Route Pattern Challenge

Consider a social media profile page. You want to display a user's posts on the left and their followers list on the right, both updating independently. Additionally, clicking a post should open its full view in a modal.

Which routing patterns would best achieve these two distinct UI requirements?

Réponds-y dans la leçon interactive

Recap: Advanced Routing

Great job! You've learned about two powerful Next.js App Router features:

  • Parallel Routes (@slot folders) for displaying independent UI segments side-by-side.
  • Intercepting Routes ((.), (..), (...) conventions) for catching routes and showing them as overlays or modals.

These patterns unlock advanced UI compositions for complex applications.

Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
12
Leçons
48
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Routes parallèles et interceptrices » est-elle gratuite ?

Oui — le texte complet de « Routes parallèles et interceptrices » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routes parallèles et interceptrices » ?

Mettez en œuvre des modèles d’interface avancés, comme les routes parallèles pour des sections indépendantes et les routes interceptrices pour des expériences similaires à des fenêtres modales. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Routes parallèles et interceptrices » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Routes dynamiques et segments attrape-tout
  2. Mises en page imbriquées et groupes de routes
  3. Routes parallèles et interceptrices
  4. Conventions d’interface de chargement et d’erreur
← Retour à Next.js 15 Fullstack Web Apps