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，頁面現在會顯示每篇文章的連結：

如果功能不正常，請確認你的程式碼與此相符。

完成！在結束本課程之前，我們將在下一頁討論一些關於動態路由 (dynamic routes) 的實用技巧。