Pages Router: 优化首页 | Next.js

接下来，让我们更新首页 (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，现在页面会显示每篇文章的链接：

如果功能不正常，请确保你的代码与此一致。

完成！在结束本课程之前，让我们在下一页讨论一些关于动态路由的使用技巧。