Navigate from one page to another page in Next.js

Today we will show you how to navigate from one page to another page in Next.js using link. It's a very basic example of the redirection between two pages in Next.js.

Navigate between pages in Next.js, Multi-Page Site with Navigation in Next.js, Redirect from one to another pages, navigate to pages using Link in Next.js, Linking two pages in Next.js using Link, A guide to navigating with Next JS links, Example of the redirection in Next.js.

Checkout more articles on ReactJS

react-select" title="How to get selected by only value in react-select">How to get selected by only value in react-select
autocomplete-in-reactjs" title="Google Place Autocomplete in ReactJS">Google Place Autocomplete in ReactJS
Google Maps in ReactJS">Add Multiple Custom Markers to Google Maps in ReactJS
Search filter for multiple object in ReactJS
Element Variables in ReactJS

In this article we will create multiple pages and manage the redirection between pages using link in Next.js.

Steps to navigate between pages

Setup project in Next.js">Setup project in Next.js
Create pages
User link to manage redirection
Output

1. Setup project in Next.js

Let's begin with the initial setup of the Next.js project. If you don't know how to create a project in Next.js then please refer to the following link.

How to setup a project in Next.js

2. Create pages

First, we need to create a few pages like Home, Contact and About in the `pages` directory. For understanding purpose we will create pages with minimum code.

pages/index.js

const Index = () => <h1>Home page!</h1>
export default Index;

pages/about.js

const About = () => <h1>About page!</h1>
export default About;

pages/contact.js

const Contact = () => <h1>Contact page!</h1>
export default Contact;

3. User link to manage redirection

Now we will use `next/link` to manage the redirection between pages. In order to add the anchor tag, we have to wrap the `a` tag using `Link` tag and set the `href` to the `Link` tag. Check the code below for more understanding.

import Link from "next/link";
...
...
<Link href="/">
  <a style={{ marginRight: 15 }}>Home</a>
</Link>
<Link href="/about">
  <a style={{ marginRight: 15 }}>About</a>
</Link>
<Link href="/contact">
  <a>Contact</a>
</Link>
...
...

So for now, let's implement it in each file to add the link and in the upcoming article, we will create a shared component to reduce the code.

pages/index.js

import Link from "next/link";

const Index = () => <div>

  <h3><a href="https://www.cluemediator.com/">Clue Mediator</a></h3>
  <br />

  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>

  <h1>Home page!</h1>
</div>

export default Index;

pages/about.js

import Link from "next/link";

const About = () => <div>

  <h3><a href="https://www.cluemediator.com/">Clue Mediator</a></h3>
  <br />

  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>

  <h1>About page!</h1>
</div>

export default About;

pages/contact.js

import Link from "next/link";

const Contact = () => <div>

  <h3><a href="https://www.cluemediator.com/">Clue Mediator</a></h3>
  <br />

  <Link href="/">
    <a style={{ marginRight: 15 }}>Home</a>
  </Link>
  <Link href="/about">
    <a style={{ marginRight: 15 }}>About</a>
  </Link>
  <Link href="/contact">
    <a>Contact</a>
  </Link>

  <h1>Contact page!</h1>
</div>

export default Contact;

4. Output

Run the code and see the output.

Output - Navigate from one page to another page in Next.js - Clue Mediator

That's it in today's article.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository