Intercepting Routes

React 🔴 Senior

Définition

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

Analogie

Comme un aperçu rapide au survol : tu vois le contenu sans quitter ta page, mais l'URL directe montre la version complète.

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), aperçu de produit, détail de notification sans quitter le feed.

#nextjs#routing#advanced

← → au clavier pour passer d'une fiche à l'autre