Créer les liens avec Link

Depuis la page d’accueil d’un catalogue, un itinéraire doit pouvoir être ouvert directement depuis sa carte. Un lien HTML classique peut provoquer le rechargement complet de la page ; dans l’App Router, vous utilisez Link pour naviguer entre les routes de l’application sans ce rechargement.

La route dynamique de détail existe déjà dans app/itineraires/[slug]/page.tsx : son segment [slug] permet d’afficher un itinéraire à partir de son identifiant. Vous allez maintenant rendre les noms de la liste accessibles comme liens vers cette route.

Importer Link dans la page d’accueil

Link est un composant fourni par next/link. Son attribut href reçoit l’URL interne à atteindre. Dans le catalogue, vous composez cette URL avec le slug de chaque itinéraire : la forêt mène à /itineraires/foret et la montagne à /itineraires/montagne.

import Link from "next/link";

const itineraires = [
  {
    slug: "foret",
    nom: "Sentier de la forêt",
    resume: "Une promenade ombragée au cœur des arbres."
  },
  {
    slug: "montagne",
    nom: "Crête de montagne",
    resume: "Un itinéraire en altitude avec vue sur les sommets."
  }
];

export default function Accueil() {
  return (
    <>
      <section className="sentier-introduction">
        <h1>Randonnées à découvrir</h1>
        <p>Choisissez un itinéraire selon vos envies.</p>
      </section>
      <section className="sentier-grille" aria-label="Itinéraires disponibles">
        {itineraires.map((itineraire) => (
          <article className="sentier-carte" key={itineraire.slug}>
            <Link
              className="sentier-lien"
              href={`/itineraires/${itineraire.slug}`}
            >
              <h2>{itineraire.nom}</h2>
            </Link>
            <p>{itineraire.resume}</p>
          </article>
        ))}
      </section>
    </>
  );
}

Chaque carte contient un Link dont la destination est construite à partir du même slug que celui utilisé pour identifier l’itinéraire. Le nom devient ainsi un lien activable, tandis que le résumé reste un texte ordinaire. Les images seront ajoutées dans les leçons consacrées à leur préparation et à leur affichage.

Comprendre la navigation avec Link

Lorsque vous activez un Link pointant vers une route de votre application, Next.js réalise généralement la navigation côté client. La nouvelle page est affichée sans recharger tout le document depuis le serveur comme le ferait une navigation classique. Votre layout partagé reste en place pendant que le contenu de la route change.

En production, Next.js peut aussi précharger les données d’une route liée lorsqu’un lien entre dans la zone visible du navigateur. Le préchargement prépare l’accès à la page avant l’activation du lien ; vous n’avez pas à écrire de gestionnaire d’événement ni à ajouter une directive "use client" pour ce comportement.

Vérifier le résultat

Lancez le serveur de développement comme dans la leçon de création du projet, puis ouvrez la page d’accueil. Vous devez voir les deux noms d’itinéraires sous forme de liens. Activez chacun d’eux : le navigateur atteint la route correspondante et la page de détail existante affiche les données associées au slug.

Le layout racine contient déjà un lien de marque et un lien vers l’accueil ; il n’est pas nécessaire de le modifier pour cette étape. La prochaine leçon vérifiera les destinations et le parcours complet entre la liste et les détails.

À retenir

• Importez le composant avec `import Link from "next/link"`.
• Renseignez `href` avec l’URL interne à ouvrir.
• Construisez la destination de chaque carte à partir de son slug.
• `Link` permet une navigation côté client et Next.js peut précharger les routes liées.