Let’s create NextJS routes in a NextJS project. If you don’t have a NextJS project, you can follow the “Create a NextJS project from scratch” blog where we have already created a NextJS project.

1. Open a NextJS project in the code editor and start the development server

• Open the NextJs project in your code editor.
• Start your development server by running the command in the project’s root directory’s terminal.

npm run dev

• Once the command runs in the terminal, you’ll see a URL:http://localhost:3000 click on that link and you’ll see this interface

• Your Project is working fine.

2. Create NextJS routes directories and files

To create routes in the NextJS project, you need to create directories with the same name as you want for your routes in the app directory which is src/app/

• First, we will create a home directory in the app directory by right click on it and selecting a new folder, and then naming the folder “home” like src/app/home

• Once the home directory is created, click on it and add a new file with the name page.js.

• Add some code to the page.js for example:

import React from "react";

function home() {
  return <div>Welcome User!</div>;
}

export default home;

• repeat this step for how many routes you want to create we are going for home, about, and contact routes.

3. Check the created NextJS routes

After the routes are created and your project is live on localhost//:3000

• To check if routes are working, type the first route’s name which is the same as the route directory’s name “home” after localhost//:3000. Just like “http://localhost:3000/home”

• And press Enter, and it will redirect you to the home page.

• To check all other routes, if they are working fine you can repeat the same way
• Just type the route name after the localhost//:3000/<route-name>

4. Create a Navbar to access all NextJS routes

• To create a navbar, we will first create a directory with the name components in the app directory.

• In the component, directory create a js file with the name Navbar

• and now let’s add some code here for our navbar

import React from "react";

function Navbar() {
  return (
    <div style={{ width: "100%", margin: "10px 0px" }}>
      <ul style={{ display: "flex", gap: "10px", justifyContent: "center" }}>
        <li>
          <a href="/home">HOME</a>
        </li>
        <li>
          <a href="/about">ABOUT</a>
        </li>
        <li>
          <a href="/contact">CONTACT</a>
        </li>
      </ul>
    </div>
  );
}

export default Navbar;

• Once you write this code, import this Navbar component in the home page file or in all route files to display the navbar.

• Once you’ll save all the files you made changes in, these all changes will reflect on your page running on the browser, and you’ll see:

• If you’ll click on the ABOUT, it will redirect you to the About page or About route.

That’s how we create NextJS routes in our NextJS project. In case you want to create nested routes follow the next step 5, or you want to create dynamic routes then check out “Create dynamic routes in NextJS project”.

5. Create nested NextJS routes.

• To create a nested NextJS route all you need to do is to create a directory with the name “about-1” in the “about” directory along with its file, and in that directory “about-1” create another file with the name page.js.

• there you have created a nested route, to access this route in your browser, write /about-1 after localhost//:3000/about. Just like http://localhost:3000/about/about-1

That is how you can create nested routes in all directories as well as you can create a grandchild route of the about by creating another route in “about-1” and accessing it by http://localhost:3000/about/about-1/<name-of-new-nested-route>.

That’s all for NextJS routes, if you’re looking for dynamic NextJS routes then check out “Create dynamic routes in NextJS project”. Happy Coding!