コンテンツへスキップ

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にアクセスすると、ページに各記事へのリンクが表示されます

Links

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

これで終わりです!このレッスンを締めくくる前に、次のページで動的ルーティングに関するいくつかのヒントについて話しましょう。

チャプターを完了しました35

次へ

36: 動的ルーティングの詳細