Next.js 15 Fullstack (App Router + Server Actions) · Leçon

Routes interceptées pour des expériences modales partagées

Utilisez les conventions (.) et (..) pour afficher le contenu dans une fenêtre modale tout en conservant une URL partageable.

Leçon 2 sur 413 étapes

Routes interceptées pour des expériences modales partagées est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 2 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 (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

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

What Are Intercepting Routes?

Next.js 15 introduces intercepting routes — a routing convention that lets you load a route within the context of the current layout, rather than navigating to a completely new page.

The most common use case is a modal pattern: clicking a photo in a grid shows it in a modal overlay, but the URL updates to /photos/42. If you share that URL, the recipient sees the full photo page — not the modal.

The browser URL changes (shareable, bookmarkable)
The current page stays visible behind the modal
Hard refresh or direct navigation loads the full standalone page

This is sometimes called the modal soft-navigation pattern, popularised by Pinterest, Instagram, and Vercel's own site.

The Interception Conventions: (.) and (..)

Next.js uses folder-name prefixes to declare that one route intercepts another. The prefix mirrors relative path syntax:

(.) — intercept a route at the same level in the segment tree
(..) — intercept a route one level up
(...) — intercept a route from the app root

The folder named with these prefixes lives inside a parallel route slot (a folder prefixed with @), so the two features work together.

Example: to intercept /photos/[id] from the / home page, you create app/@modal/(.)photos/[id]/page.tsx.

Project Structure for the Photo Modal

Let's build a concrete example: a photo gallery where clicking a thumbnail opens a modal, but the URL becomes /photos/42.

The file tree looks like this:

app/
  layout.tsx               ← root layout with @modal slot
  page.tsx                 ← gallery grid (home)
  @modal/
    default.tsx            ← renders null (slot default)
    (.)photos/
      [id]/
        page.tsx           ← intercepted modal UI
  photos/
    [id]/
      page.tsx             ← full standalone photo page

When a user clicks a photo from the gallery, Next.js renders @modal/(.)photos/[id]/page.tsx inside the root layout's @modal slot. A hard refresh of /photos/42 renders photos/[id]/page.tsx normally.

Root Layout: Accepting the @modal Slot

The root layout must accept the parallel @modal slot as a prop alongside children. This is how Next.js injects the intercepted route content.

// app/layout.tsx
import type { ReactNode } from 'react';

interface RootLayoutProps {
  children: ReactNode;
  modal: ReactNode;   // injected by the @modal parallel route slot
}

export default function RootLayout({ children, modal }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        {children}
        {modal}  {/* renders null by default, modal content when intercepted */}
      </body>
    </html>
  );
}

Default Slot: Rendering Nothing When No Modal Is Active

When the user visits / without any interception, Next.js needs to render something for the @modal slot. You provide a default.tsx that returns null.

Without this file, Next.js will throw a 404 because it cannot resolve the slot.

// app/@modal/default.tsx
// This file is required — it tells Next.js to render nothing
// when no route is being intercepted into this slot.
export default function ModalDefault() {
  return null;
}

The Intercepting Route Page: Modal UI

Now create the intercepted route page. This is what renders inside the @modal slot when a user soft-navigates (via <Link>) to /photos/[id].

It receives the same params as the real page and can fetch the same data. The modal wrapper itself is just a component — you control the overlay styling.

// app/@modal/(.)photos/[id]/page.tsx
import { Modal } from '@/components/Modal';
import { getPhoto } from '@/lib/photos';

interface Props {
  params: Promise<{ id: string }>;
}

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

  return (
    <Modal>
      <img
        src={photo.url}
        alt={photo.title}
        className="max-w-full max-h-screen object-contain"
      />
      <h2 className="mt-4 text-lg font-semibold">{photo.title}</h2>
    </Modal>
  );
}

Building the Modal Component with router.back()

The Modal component needs to close itself when the user dismisses it. The idiomatic way is router.back() — this navigates back in history, which removes the intercepted route and restores the gallery page without a full reload.

Use a 'use client' directive because useRouter is a client-side hook.

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

import { useRouter } from 'next/navigation';
import { useEffect, useCallback, type ReactNode } from 'react';

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

  const close = useCallback(() => router.back(), [router]);

  // Close on Escape key
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') close();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [close]);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
      onClick={close}  // click backdrop to close
    >
      <div
        className="relative bg-white rounded-xl p-6 max-w-2xl w-full"
        onClick={(e) => e.stopPropagation()}  // prevent backdrop close on content
      >
        <button
          onClick={close}
          className="absolute top-3 right-3 text-gray-500 hover:text-gray-900"
          aria-label="Close modal"
        >
          ✕
        </button>
        {children}
      </div>
    </div>
  );
}

The Full Photo Page: Direct Navigation Fallback

The standalone /photos/[id] page is what users see when they visit the URL directly — from a shared link, a hard refresh, or a search engine crawler. It renders the complete page layout without any modal wrapper.

This page and the intercepted page can share the same data-fetching function (getPhoto) — no duplication needed for the data layer.

// app/photos/[id]/page.tsx
import { getPhoto } from '@/lib/photos';
import Link from 'next/link';

interface Props {
  params: Promise<{ id: string }>;
}

export default async function PhotoPage({ params }: Props) {
  const { id } = await params;
  const photo = await getPhoto(id);

  return (
    <main className="container mx-auto py-12">
      <Link href="/" className="text-blue-600 hover:underline mb-6 inline-block">
        ← Back to gallery
      </Link>
      <img
        src={photo.url}
        alt={photo.title}
        className="w-full rounded-xl shadow-lg"
      />
      <h1 className="mt-6 text-3xl font-bold">{photo.title}</h1>
      <p className="mt-2 text-gray-600">{photo.description}</p>
    </main>
  );
}

The Gallery Page: Linking Into the Modal

The home gallery page links to /photos/[id] using a standard <Link> component. Next.js detects the intercepting route automatically — you do not need any special prop on the link.

When JavaScript is enabled and the user clicks the link, the interception fires. Without JS (or on first load), the full page loads as normal.

// app/page.tsx
import Link from 'next/link';
import { getPhotos } from '@/lib/photos';

export default async function GalleryPage() {
  const photos = await getPhotos();

  return (
    <main className="container mx-auto py-12">
      <h1 className="text-3xl font-bold mb-8">Photo Gallery</h1>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {photos.map((photo) => (
          <Link key={photo.id} href={`/photos/${photo.id}`}>
            <img
              src={photo.thumbnailUrl}
              alt={photo.title}
              className="rounded-lg aspect-square object-cover hover:opacity-90 transition"
            />
          </Link>
        ))}
      </div>
    </main>
  );
}

Using (..) to Intercept One Level Up

The (..) prefix intercepts a route that is one segment higher in the URL tree than the slot's location.

Consider a product page at /shop/[category]/[productId]. You want clicking a product inside /shop/[category] to open a modal. The @modal slot lives inside app/shop/[category]/, but the target route is also one level down — so you use (..) to step up and intercept from there.

File path example:

app/shop/[category]/
  @modal/
    default.tsx
    (..)shop/[category]/[productId]/
      page.tsx   ← intercepts the product page

The rule of thumb: count how many segment levels separate the @modal folder from the target route, and use that many dots.

Loading UI and Suspense Inside Intercepted Routes

Intercepted route pages are async Server Components, so you can wrap them with Suspense to show a loading skeleton while data is fetched — exactly like any other Next.js route.

Add a loading.tsx file next to the intercepted page, or wrap the content in <Suspense fallback={...}> in the modal component itself.

// app/@modal/(.)photos/[id]/loading.tsx
// Shown while the async PhotoModal page is fetching data.
export default function PhotoModalSkeleton() {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
      <div className="bg-white rounded-xl p-6 max-w-2xl w-full animate-pulse">
        <div className="h-80 bg-gray-200 rounded-lg" />
        <div className="mt-4 h-6 bg-gray-200 rounded w-1/2" />
      </div>
    </div>
  );
}

Knowledge Check: Which Convention to Use?

Test your understanding of the interception route conventions.

Réponds-y dans la leçon interactive

Lesson Recap: Intercepting Routes for Modal Experiences

In this lesson you learned how to deliver the URL-preserving modal pattern in Next.js 15 using intercepting routes.

(.) convention intercepts a route at the same segment level; (..) steps one level up; (...) goes to the app root.
Intercepting routes always live inside a parallel route slot (@modal) so the parent layout can render both the background page and the modal simultaneously.
A default.tsx returning null is required in the slot to avoid 404s when no modal is active.
The modal closes with router.back(), which removes the intercepted route from history without a full reload.
The full standalone page at the real route path still exists — hard refresh and shared links always load the complete page, making the URL truly shareable.
Add loading.tsx or Suspense inside the intercepted route to show a skeleton while async data loads.

This pattern gives users a fast, app-like feel while keeping pages SEO-friendly and accessible to anyone with just a link.

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: 22
Leçons: 88

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Routes interceptées pour des expériences modales partagées » est-elle gratuite ?

Oui — le texte complet de « Routes interceptées pour des expériences modales partagées » 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 (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routes interceptées pour des expériences modales partagées » ?

Utilisez les conventions (.) et (..) pour afficher le contenu dans une fenêtre modale tout en conservant une URL partageable. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions) ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) 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 2 sur 4.

Combien de temps prend la leçon « Routes interceptées pour des expériences modales partagées » ?

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 (App Router + Server Actions) ?

Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) 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

Routes parallèles avec emplacements nommés et segments par défaut
Routes interceptées pour des expériences modales partagées
Rendu conditionnel des emplacements pour les tableaux de bord et les onglets
Créer un parcours de fenêtre photo avec une navigation souple

← Retour à Next.js 15 Fullstack (App Router + Server Actions)