Navigate Between Pages

Using Link

Now we are going to use next/link to link our two pages.

Add the following code into pages/index.js

import Link from 'next/link';

export default function Index() {
  return (
    <div>
      <Link href="/about">
        <a>About Page</a>
      </Link>
      <p>Hello Next.js</p>
    </div>
  );
}

Here we've imported next/link as Link and use it like this:

<Link href="/about">
  <a>About Page</a>
</Link>

Now try to visit http://localhost:3000/

Then click the "About Page" link. It will navigate you to the "About" page.

This is client-side navigation; the action takes place in the browser, without making a request to the server. You can verify this by opening your browser's network request inspector.

Okay, now we have a simple task for you:

How would you best describe the experience of the Back button?