Making Next.js routing

Now that we know how to make Next.js routing, let's make another page:

// pages/second.js
import React from "react";
export default () => (<div>Second</div>);

This new page is accessible via http://localhost:3000/second.

Now, let's add a link to that second page to the index page.

Note

If we use a simple <a> tag for this, it will work, of course, but it will perform a regular server request instead of client-side navigation, so performance will be much worse: the client will reload all the initialization payloads, and will be forced to re-initialize the entire app.

1. In order to do proper client-side navigation, we need to import a link component from Next.js:

      // pages/index.js
      import React from "react";
      import Link from "next/link";
      export default () => (<div><Linkhref="/second"><a>Second</a>
      </Link></div>);

2. Here, we added a new link to the page content; notice that we have added an empty...