章节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