Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
routing
communitycreator

How to implement routing in Next JS

Gautham Vijayan

Next JS has been growing in popularity, as it solves most of the problems related to React JS and is being increasingly used in enterprises around the globe. In this post, we will discuss how we can use the routing package given by the Next JS team and how we can configure a 404 page in our Next JS project.

Steps

First, create a new Next JS project with the below command:


npx create-next-app nextroute
cd nextroute

In React JS, we would install a package called react-router-dom to implement routing inside the application. But Next JS has its own inbuilt router from the next/link, with which we can navigate between the pages.

Before using the next/link, we need to set up the different pages/routes inside the pages folder. In React, we would setup the routes inside the BrowserRoute component, but in Next JS, we have to create different files inside pages folder.

Lets create a new file in the pages folder called about.js.

Now, make some changes inside the about.js file.

import React from 'react'

const about = () => {
    return (
        <div>
            This is About File
        </div>
    )
}

export default about

Now, go to the terminal and run:

npm run dev

After running this command, go to http://localhost:3000/about and you will be able to see the below text.

So, if you want to have another route called contact, simply create another file called contact.js inside the page folder, and you will be able to see a new route.

Now, let’s try to create multiple routes like /articles/author. To achieve this, we need to create a folder inside the pages folder called articles. Inside that folder, we can create two files called index.js and author.js.

The index.js file will have the component which will be shown in the browser while we are in the route http://localhost:3000/articles and when we are in the route http://localhost:3000/articles/author we will see the component inside the author.js.

The folder structure will look like this:

Now, after integrating these routes, let’s integrate a 404 page. For that, we need to create a file called 404.js inside our pages folder.

Inside the 404.js file, we need to create a new component called NotFound and customize our 404 page.


import React from 'react'

const NotFound = () => {
    return (
        <div>
            Not Found 
        </div>
    )
}

export default NotFound


To make sure this 404 component is working, navigate to http://localhost:3000/1 or any other localhost 3000 route to check if it’s working.

Now, lets use the next/link to navigate from one route to the other route.

In index.js, import import Link from ‘next/link’ at the top of the file.

Now, if we want to navigate to /articles path, we can use “Link” to navigate to that particular path. Below will be the index.js file.


import Head from "next/head";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div>
        <Link href="/articles">Navigate to Articles</Link>
      </div>
    </div>
  );
}



That’s it! We have successfully integrated routing in Next JS.

You can find the repository link here.

RELATED TAGS

javascript
routing
communitycreator
RELATED COURSES

View all Courses

Keep Exploring