Pages Router: インデックスページの仕上げ

次に、インデックスページ（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 にアクセスすると、各記事へのリンクが表示されるようになります：

リンク

動作しない場合は、こちらのコードと比較してください。

以上です！このレッスンを終える前に、次のページでダイナミックルーティングに関するヒントをいくつか紹介します。