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.
- 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>);
- Here, we added a new link to the page content; notice that we have added an empty...