Créer une route dynamique de détail

Une page de détail doit présenter l’itinéraire choisi, sans créer un fichier différent pour chaque randonnée. Vous allez faire varier l’URL et laisser Next.js transmettre la partie variable à la page. Ainsi, une seule route peut afficher les détails de la forêt ou de la montagne.

Dans la leçon précédente, vous avez construit la page d’accueil avec un tableau local et `map`. Vous allez reprendre les mêmes identifiants, `foret` et `montagne`, pour que les URL de détail correspondent aux itinéraires déjà présentés.

Créer le segment dynamique

Dans `app/itineraires/`, créez un dossier nommé exactement `[slug]`, avec les crochets, puis ajoutez-y `page.tsx`. Ce nom déclare un segment dynamique : dans une URL telle que `/itineraires/foret`, la valeur `foret` est transmise à la page sous la propriété `slug`. Le dossier correspond à la route `/itineraires/[valeur]`, et non à une URL contenant littéralement les crochets.

type Itineraire = {
  slug: string;
  nom: string;
  resume: string;
  description: string;
  distance: string;
  duree: string;
};

const itineraires: Itineraire[] = [
  {
    slug: "foret",
    nom: "Sentier de la forêt",
    resume: "Une balade paisible sous les arbres.",
    description: "Un itinéraire ombragé au cœur de la forêt, adapté à une sortie en famille.",
    distance: "5 km",
    duree: "2 h"
  },
  {
    slug: "montagne",
    nom: "Boucle de la montagne",
    resume: "Un parcours avec vue sur les sommets.",
    description: "Une randonnée en altitude qui traverse des paysages ouverts et offre une vue sur les sommets.",
    distance: "12 km",
    duree: "5 h"
  }
];

type PageProps = {
  params: Promise<{ slug: string }>;
};

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

  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 fonction de page reçoit `params`, qui contient les segments dynamiques de l’URL. Dans les versions récentes de Next.js, `params` est une promesse : la page est donc déclarée `async` et récupère `slug` avec `await`. La recherche compare ensuite cette valeur à la propriété `slug` de chaque objet et sélectionne l’itinéraire correspondant.

Le JSX affiche les informations du résultat avec les classes prévues pour la carte et ses détails. Aucun composant interactif ni état côté navigateur n’est nécessaire pour afficher ces données : la page reste un composant serveur. Le point d’exclamation après `find` indique ici que le code suppose un slug connu ; il ne constitue pas une gestion d’erreur pour un itinéraire absent.

Vérifier les deux itinéraires

Lancez le serveur de développement comme vous l’avez fait lors de la création du projet, puis ouvrez directement chaque URL dans le navigateur. `/itineraires/foret` doit afficher le sentier de la forêt, sa description, sa distance et sa durée ; `/itineraires/montagne` doit afficher les valeurs de la boucle de la montagne. La page conserve le même fichier : seule la valeur de `slug` change.

À retenir

• Le dossier `app/itineraires/[slug]/` définit une route avec un segment variable.
• Next.js fournit la valeur de ce segment dans `params.slug`.
• La recherche par slug permet de sélectionner l’objet à afficher dans la page de détail.
• Les URL `/itineraires/foret` et `/itineraires/montagne` affichent des contenus distincts.

Dans la prochaine leçon, vous traiterez explicitement le cas où le slug demandé ne correspond à aucun itinéraire.