Routeur de pages - Amélioration de la page d\'accueil

Ensuite, mettons à jour notre page d'accueil (pages/index.js). Nous devons ajouter des liens vers chaque page d'article en utilisant le composant Link.

Ouvrez pages/index.js et ajoutez les imports suivants en haut du fichier pour Link et Date :

import Link from 'next/link';
import Date from '../components/date';

Puis, vers la fin du composant Home dans le même fichier, remplacez la balise li par ce qui suit :

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>{title}</Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

Si vous allez sur http://localhost:3000, la page contient maintenant des liens vers chaque article :

Liens

Si quelque chose ne fonctionne pas, assurez-vous que votre code ressemble à ceci.

C'est tout ! Avant de conclure cette leçon, parlons de quelques conseils pour les routes dynamiques sur la page suivante.

Amélioration de la page d'accueil