Enrutador de Páginas: Mejorando la Página de Inicio

A continuación, actualicemos nuestra página de inicio (pages/index.js). Necesitamos agregar enlaces a cada página de publicación usando el componente Link.

Abre pages/index.js y agrega las siguientes importaciones en la parte superior del archivo para Link y Date:

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

Luego, cerca del final del componente Home en el mismo archivo, reemplaza la etiqueta li con lo siguiente:

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

Si vas a http://localhost:3000, la página ahora tendrá enlaces a cada artículo:

Enlaces

Si algo no funciona, asegúrate de que tu código se vea así.

¡Eso es todo! Antes de concluir esta lección, hablemos sobre algunos consejos para rutas dinámicas en la siguiente página.