Gérer un itinéraire introuvable

Une URL de détail peut contenir un slug qui ne correspond à aucune randonnée : une faute de saisie ou un ancien lien suffit. Sans vérification, votre page risque de lire les propriétés d’une valeur inexistante et de produire une erreur au lieu d’aider la personne qui consulte le catalogue. Vous allez intercepter ce cas et afficher un état « introuvable » prévu par Next.js.

La leçon précédente a relié le segment dynamique `[slug]` à l’itinéraire correspondant dans vos données locales. Ici, vous gardez cette sélection et ajoutez une branche lorsque la recherche échoue. Aucun composant client ni gestionnaire d’événement n’est nécessaire : la vérification s’effectue dans la page serveur.

Interrompre le rendu quand l’itinéraire manque

Dans `app/itineraires/[slug]/page.tsx`, importez `notFound` depuis `next/navigation`, puis appelez cette fonction après la recherche si aucun itinéraire ne correspond. `notFound()` interrompt le rendu de la page de détail et demande à Next.js d’afficher l’interface introuvable la plus proche dans l’arborescence. Il n’est donc pas nécessaire d’ajouter un `else` contenant le reste de la page.

import { notFound } from "next/navigation";

const itineraires = [
  {
    slug: "foret",
    nom: "La forêt des cèdres",
    resume: "Un parcours ombragé au cœur des arbres.",
    description: "Suivez un sentier forestier entre les cèdres et les clairières.",
    distance: "6 km",
    duree: "2 h",
  },
  {
    slug: "montagne",
    nom: "Le belvédère des crêtes",
    resume: "Une montée vers un panorama dégagé.",
    description: "Rejoignez les crêtes par un itinéraire de montagne panoramique.",
    distance: "9 km",
    duree: "4 h",
  },
];

type PageProps = {
  params: {
    slug: string;
  };
};

export default function Page({ params }: PageProps) {
  const itineraire = itineraires.find(
    (element) => element.slug === params.slug
  );

  if (!itineraire) {
    notFound();
  }

  return (
    <article className="sentier-carte">
      <div className="sentier-details">
        <h1>{itineraire.nom}</h1>
        <p>{itineraire.description}</p>
        <p>Distance : {itineraire.distance}</p>
        <p>Durée : {itineraire.duree}</p>
      </div>
    </article>
  );
}

La recherche utilise toujours le slug et les données locales du catalogue. Dans votre fichier existant, conservez les objets et les valeurs déjà présents : l’exemple complet ci-dessus illustre la vérification et le rendu avec les deux slugs du projet, `foret` et `montagne`. Si votre page contient déjà d’autres éléments conformes au contrat, gardez-les dans le retour affiché après le contrôle.

Définir l’interface introuvable

Ajoutez `app/not-found.tsx`, le fichier conventionnel de l’App Router pour l’état introuvable. Son composant fournit un titre et une explication simples. Comme la route dynamique se trouve dans `app`, cette interface peut être affichée lorsqu’elle appelle `notFound()` et qu’aucun fichier `not-found.tsx` plus proche n’est défini.

export default function NotFound() {
  return (
    <section className="sentier-introduction">
      <h1>Itinéraire introuvable</h1>
      <p>Cette randonnée n’existe pas dans le catalogue.</p>
    </section>
  );
}

Le composant utilise une classe déjà prévue par le contrat du projet et n’ajoute aucun style inline. Vous n’avez pas besoin de modifier `app/layout.tsx` pour cette leçon : l’interface introuvable est rendue dans l’application avec le layout existant. Le contenu reste volontairement limité à l’explication de l’erreur ; la navigation vers le catalogue sera abordée avec les liens dans les prochaines leçons.

Vérifier les deux cas

Lancez le serveur de développement comme dans la première leçon, puis ouvrez `/itineraires/foret` et `/itineraires/montagne` : chacune doit encore afficher les informations de sa randonnée. Essayez ensuite `/itineraires/inconnue`. La page de détail ne doit pas s’afficher ; vous devez voir le titre « Itinéraire introuvable » et le message associé.

Si les deux URL valides affichent aussi l’état introuvable, vérifiez que les valeurs de `slug` dans vos données correspondent exactement à celles des URL. Si le cas inconnu provoque une erreur de propriété, vérifiez que l’appel à `notFound()` se trouve avant le retour JSX. Consultez également le terminal et la console du navigateur en cas d’erreur de compilation ou de rendu.

À retenir

• Recherchez l’itinéraire à partir du slug reçu dans la route dynamique.
• Appelez `notFound()` avant d’utiliser les propriétés si la recherche ne renvoie aucun résultat.
• Définissez une interface dans `app/not-found.tsx` pour expliquer clairement l’absence de l’itinéraire.
• Vérifiez séparément les routes valides et une URL contenant un slug inconnu.

Dans la prochaine leçon, vous définirez le layout partagé qui porte l’en-tête, la navigation et le pied de page du catalogue.