Роутер страниц: Доработка главной страницы

Теперь давайте обновим нашу главную страницу (pages/index.js). Нам нужно добавить ссылки на каждую страницу поста с помощью компонента Link.

Откройте pages/index.js и добавьте следующие импорты в начало файла для Link и Date:

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

Затем внизу компонента Home в том же файле замените тег li на следующий:

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

Если вы перейдете по адресу http://localhost:3000, на странице теперь будут ссылки на каждую статью:

Ссылки

Если что-то не работает, убедитесь, что ваш код выглядит так.

Вот и всё! Прежде чем завершить этот урок, давайте поговорим о некоторых советах по работе с динамическими маршрутами на следующей странице.