章节35

美化索引页

接下来，我们更新索引页（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>

如果你访问 https://:3000，页面现在有指向每篇文章的链接

如果出现问题，请确保你的代码与此处一致。

就是这样！在我们结束本课程之前，让我们讨论一下下一页上关于动态路由的一些提示。

美化索引页

您已完成本章35