Intercepting Routes

React 🔴 Senior

Definition

Permet d'intercepter une route pour afficher son contenu dans le layout actuel (ex: modale) au lieu de naviguer vers la page complete.

Analogie

Comme un apercu rapide au survol : tu vois le contenu sans quitter ta page, mais l'URL directe montre la version complete.

Exemple de code

// app/@modal/(.)photo/[id]/page.tsx
// Le (.) intercepte /photo/[id]
export default function PhotoModal({ params }) {
  return (
    <Modal>
      <Photo id={params.id} />
    </Modal>
  );
}
// URL directe /photo/123 -> page complete

Cas d'usage

Photos en modale (Instagram-like), apercu de produit, detail de notification sans quitter le feed.

#nextjs#routing#advanced