動態路由

優化 index 頁面

下一步，我們要更新 index 頁面（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 查看，在這個頁面已經可以連結到其他文章頁。

如果哪裡出錯了，請確保你的程式碼長得像這個樣子。

到此結束！在我們總結此課程之前，在下一階段我們來談談動態路由的一些小訣竅。

← 返回上一頁 前往下一頁 →