Créer la page d’accueil

Une page d’accueil vide ou générique ne permet pas à vos visiteurs de choisir une randonnée. Vous allez remplacer le contenu provisoire de la route racine par une présentation du catalogue et une liste d’itinéraires issue de données locales. Chaque entrée affichera un nom et un résumé ; les liens et les images seront ajoutés dans les leçons prévues pour ces notions.

Comme vous l’avez repéré dans la leçon sur l’organisation de app, la page de la route racine se trouve dans app/page.tsx. Remplacez le contenu provisoire de ce fichier par le composant complet ci-dessous. Vous n’ajoutez pas de fichier : la liste de données reste, pour cette première version, dans le même fichier que la page.

const itineraires = [
  {
    slug: "foret",
    nom: "La boucle de la forêt",
    resume: "Un parcours ombragé entre les arbres, adapté à une sortie tranquille."
  },
  {
    slug: "montagne",
    nom: "Le sentier des crêtes",
    resume: "Une randonnée en altitude avec des points de vue dégagés."
  }
];

export default function HomePage() {
  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}>
            <h2>{itineraire.nom}</h2>
            <p>{itineraire.resume}</p>
          </article>
        ))}
      </section>
    </>
  );
}

Séparer les données et leur affichage

Le tableau itineraires contient deux objets. Chaque objet regroupe les informations d’un seul parcours : une valeur slug qui l’identifie, un nom destiné au titre et un resume destiné à la description courte. Pour cette leçon, ces valeurs restent des données locales écrites directement dans le fichier ; vous n’avez besoin ni d’un service externe ni d’une base de données.

Le composant HomePage renvoie une composition JSX. La première section présente le catalogue ; la seconde accueille les cartes. Dans cette seconde section, map parcourt le tableau et produit un élément article pour chaque objet. Les expressions entre accolades insèrent les valeurs de l’objet dans le JSX : le nom devient un titre et le résumé un paragraphe.

La propriété key fournit à React une valeur stable pour distinguer les éléments créés par la boucle. Ici, slug est unique pour chaque itinéraire et ne dépend pas de la position de l’élément dans le tableau. Vous évitez ainsi d’utiliser l’index comme clé, ce qui devient fragile si vous réordonnez ou modifiez la liste.

Vérifier le résultat

Enregistrez le fichier et consultez la route racine dans votre navigateur, sur l’adresse locale utilisée depuis la première leçon. Vous devez voir le titre « Randonnées à découvrir », la phrase de présentation, puis deux cartes : « La boucle de la forêt » et « Le sentier des crêtes », chacune accompagnée de son résumé. Si une carte manque, vérifiez que l’objet correspondant figure bien dans le tableau et que le composant parcourt ce tableau avec map.

Cette page est encore une liste de contenu, pas un parcours de navigation : aucun élément ne mène pour l’instant vers une page de détail. Vous avez aussi volontairement gardé les données et le rendu simples afin de pouvoir les enrichir ensuite avec les mêmes itinéraires. La prochaine leçon créera une route dynamique pour afficher le détail correspondant à un itinéraire.

À retenir

• La page de la route racine est définie dans app/page.tsx.
• Un tableau local peut regrouper les données des itinéraires affichés.
• map produit une carte JSX à partir de chaque objet du tableau.
• La clé key doit s’appuyer sur une valeur stable et unique, ici le slug.