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.

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

Steps to navigate between pages

1. Setup project in Next.js
2. Create pages
3. User link to manage redirection
4. 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.

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

pages/about.js

pages/contact.js

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.

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

pages/about.js

pages/contact.js

4. Output

Run the code and see the output.

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

Demo & Source Code