Next.js Quick Start Guide

Making Next.js routing

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

// pages/second.jsimport 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.

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 ...