Assembler la page d’accueil complète

Une page d’accueil utile ne se limite pas à afficher des noms : chaque itinéraire doit mener à sa page de détail et être identifiable grâce à son visuel. Vous allez assembler ces éléments dans la page du catalogue, puis vérifier que les données affichées correspondent aux URL et aux fichiers présents dans le projet.

Assembler les données et la page

Vous avez déjà créé la page d’accueil dans app/page.tsx et ajouté à chaque itinéraire les informations nécessaires à l’affichage de son image. La page complète ci-dessous reprend ces données au même endroit : les deux objets utilisent les chemins publics prévus, des dimensions de 1200 × 800 et un texte alternatif descriptif. Si votre tableau existe déjà, conservez ses descriptions et ses résumés ; vérifiez surtout que ses propriétés portent les mêmes noms que ceux utilisés dans le JSX.

import Image from "next/image";
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.",
    descriptionImage: "Chemin de randonnée au milieu d’une forêt",
    image: "/images/foret.jpg",
    largeur: 1200,
    hauteur: 800
  },
  {
    slug: "montagne",
    nom: "Balcon de montagne",
    resume: "Un itinéraire en altitude avec vue sur les sommets.",
    descriptionImage: "Paysage de montagne vu depuis un sentier",
    image: "/images/montagne.jpg",
    largeur: 1200,
    hauteur: 800
  }
];

export default function PageAccueil() {
  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}`}>
              <Image
                className="sentier-image"
                src={itineraire.image}
                alt={itineraire.descriptionImage}
                width={itineraire.largeur}
                height={itineraire.hauteur}
              />
              <h2>{itineraire.nom}</h2>
            </Link>
            <p>{itineraire.resume}</p>
          </article>
        ))}
      </section>
    </>
  );
}

Le tableau associe chaque itinéraire à un slug, un nom, un résumé et les propriétés attendues par Image. Dans la boucle, le même slug construit l’URL et sert de clé stable ; un slug modifié dans les données modifie donc aussi la destination du lien. Le composant Link enveloppe l’image et le titre : les deux deviennent des points d’accès à la même page de détail.

Contrôler le résultat

Enregistrez le fichier et ouvrez la page d’accueil dans le navigateur sur lequel vous exécutez déjà le serveur de développement. Vous devez voir l’introduction, puis deux cartes présentant chacune une image, un titre lié et un résumé. Sélectionnez le titre ou l’image de chaque carte : l’URL doit correspondre au slug, soit /itineraires/foret ou /itineraires/montagne.

Si l’une des images ne s’affiche pas, comparez son chemin avec le nom exact du fichier dans public/images, en tenant compte des majuscules et minuscules. Si une destination ne correspond pas à l’itinéraire choisi, vérifiez le slug dans l’objet et l’adresse construite par le lien. Les pages de détail sont déjà reliées à ces segments dynamiques ; leur contenu sera finalisé dans la prochaine leçon.

À retenir

• Chaque objet du tableau fournit les données nécessaires à la carte et à son image.
• Le slug sert à la fois de clé et à construire l’URL de détail.
• Le composant Link rend l’image et le titre navigables vers la même destination.
• Les chemins d’images locales partent de la racine publique, par exemple /images/foret.jpg.
• Vérifiez dans le navigateur que les deux cartes, leurs images et leurs destinations correspondent.