Next.js

Next, let’s update our index page (pages/index.js). We need to add links to each post page using the Link component.

Let's import Link and Date in pages/index.js:

import Link from 'next/link'
import Date from '../components/date'

Then, near the bottom of the Home component, replace the li tag with the following:

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>
    <a>{title}</a>
  </Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

It should now have links to each article:

If something is not working, make sure that your code looks like this.

That’s it! Before we wrap up this lesson, let’s talk about some tips for dynamic routes on the next page.