Construire une navigation cohérente

Une page de détail ne doit pas être une impasse : après avoir consulté un itinéraire, vos visiteurs doivent pouvoir revenir facilement à la liste. Vous allez compléter le parcours du catalogue et vérifier la destination de chaque lien interne, sans modifier le layout partagé ni ajouter de code exécuté dans le navigateur.

Définir le parcours attendu

Le parcours de base comporte deux destinations : la page d’accueil, à l’URL /, et une page de détail, par exemple /itineraires/foret. Depuis l’accueil, un lien de carte mène au détail correspondant ; depuis ce détail, un lien de retour conduit à l’accueil. Le layout fournit déjà une entrée « Accueil » persistante, et la leçon « Créer les liens avec Link » a ajouté les liens des itinéraires sur la page d’accueil.

La destination d’un lien doit correspondre à la page annoncée par son libellé. Ici, « Retour au catalogue » doit pointer vers /, tandis que le lien d’un itinéraire doit pointer vers son segment dynamique. Vous contrôlez ainsi que le visiteur peut parcourir la liste, consulter un détail et revenir à la liste sans avoir à saisir une URL.

Ajouter le retour sur la page de détail

Dans app/itineraires/[slug]/page.tsx, placez un lien après les informations de l’itinéraire. Le fichier complet ci-dessous conserve la sélection par slug et l’appel à notFound() en l’absence de correspondance ; il ajoute le lien de retour avec la classe prévue au contrat. Les deux objets locaux permettent de rendre le fichier directement exécutable et illustrent les routes du catalogue.

import Link from "next/link";
import { notFound } from "next/navigation";

const itineraires = [
  {
    slug: "foret",
    nom: "Sentier de la forêt",
    description: "Une randonnée au calme sous les arbres.",
    distance: "6 km",
    duree: "2 h",
  },
  {
    slug: "montagne",
    nom: "Chemin de montagne",
    description: "Un itinéraire avec des vues dégagées sur les sommets.",
    distance: "10 km",
    duree: "4 h",
  },
];

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

export default async function Page({ params }: PageProps) {
  const { slug } = await params;
  const itineraire = itineraires.find((item) => item.slug === 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>
      <Link className="sentier-retour" href="/">
        Retour au catalogue
      </Link>
    </article>
  );
}

Le lien est un composant Link de next/link, comme ceux déjà utilisés sur la page d’accueil. Son attribut href vaut / : le lien ramène donc toujours au catalogue, quel que soit le slug affiché. La page reste un composant serveur ; aucune directive "use client" n’est nécessaire pour cette navigation.

Vérifier les destinations

Lancez l’application avec la commande de développement déjà utilisée dans les leçons précédentes, puis ouvrez la page d’accueil. Cliquez sur le lien d’un itinéraire et vérifiez que l’adresse correspond à son slug, par exemple /itineraires/foret. Sur la page obtenue, activez « Retour au catalogue » et confirmez que vous revenez à /.

Répétez le parcours avec l’autre itinéraire. Vérifiez aussi le lien « Accueil » du layout : il doit mener à la même page que le lien de retour. Si une destination est incorrecte, corrigez son href à l’endroit où le lien est défini, plutôt que de modifier le layout partagé ou de créer une nouvelle route.

À retenir

• Chaque itinéraire de la page d’accueil mène à la route correspondant à son slug.
• Le lien « Retour au catalogue » de la page de détail pointe vers `/`.
• Le lien « Accueil » du layout et le lien de retour conduisent à la même destination.
• Vous vérifiez les URL et les destinations en parcourant les deux itinéraires.

Dans la prochaine leçon, vous préparerez les fichiers image qui accompagneront les itinéraires du catalogue.