インデックスページの調整

次に、インデックスページ (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 https://:3000 にアクセスすると、ページには各記事へのリンクが表示されるようになりました。

もしうまくいかない場合は、コードが このようになっている ことを確認してください。

これで完了です！このレッスンを終える前に、次のページで 動的ルーティング に関するヒントについて説明します。