Learning NextJs - Day 3

Now that you can create your own pages in next you certainly will need a way
to navigate between them without writing the url directly in your browser.

For that purpose the next framework has built in a component called Link.
Let’s add in our home page two links one for the root page and another for
the About page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Link from "next/link";

function Home() {
  return (
    <div>
      <Link href="/about">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>

      <h1>Welcome to my App!</h1>
    </div>
  );
}

export default Home;

Note that the Link component is just a wrapper which provide you client side transitions between your pages, that’s why I am putting an “a” tag inside of it.
If you open your browser at http://localhost:3000 you can easily navigate between them.

Prefetching

You can pass the prefetch prop to the Link component. If next see this prop it will… well prefetch your page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Link from "next/link";

function Home() {
  return (
    <div>
      <Link href="/about">Home</Link>
      <Link prefetch href="/about">
        About
      </Link>

      <h1>Welcome to my App!</h1>
    </div>
  );
}

In the above code next will donwload all the javascript code related to the about page in a background process making the interaction with that page faster. This is a production only feature so you can only test it once your app is deployed.