Posted on Nov 28, 2023

Next js Routing

#javascript #programming #nextjs #react

Next js is a framework that has revolutionized the way we developers build websites and web applications. It has lots of amazing tools that are so helpful for your web application. Next js has amazing features like server-side rendering, automatic code splitting, client-side routing, optimized SEO and other amazing features.

These features has attracted lots of developers and companies to use Next js.

Next js has an in-built routing system that makes it a nice framework, unlike React js, that uses third party libraries for it`s routing.

In this article, we will discuss how to create a navigation bar in Next js, exploring the in-built Next js routing system. We will also discuss about the importance of using Next js. Furthermore, We will also compare Next js with it`s cousin React js.

Prerequisites you need to understand this article

Basic understanding of HTML.
Basic understanding of CSS.
Basic understanding of JavaScript.
Basic understanding of React js.
You must have Node js installed on your computer
And finally, a web browser like Google Chrome.

What is a framework
A framework is a pre-built, standardized collection of tools, libraries and best practices that helps software developers to build good user interface. Furthermore, frameworks also makes development of software much faster and easier for developers.

What is Next js
Next js is an awesome framework built by a company called vercel, this framework was built with some React js features which makes it easier for front-end developers that uses React js to quickly use it too. However, even with close similarities between React js and Next js, Next js has a very different routing or navigation system with React js, which makes it look very new to developers who has experience in React js.

Next js uses a file-system based router where folders are used to define routes. What does that mean, it simply means that Next js creates routing based on the file structure of your application.
Each component you want to create, you will create a folder for each of the components, these folders will have a file that must be page.js inside them. This page.js file in each folder, is where you will write your codes for each component you want your users to see.

Note
You can use any extension for the page file, you can use .js, .jsx and .ts

As you can see here, all of the folders has page.js file where the components for each folder is written. If a user wants to navigate to our dashboard, all they need to do is to use this path /dashboard and they will see our dashboard.

Note: All of your component folders will be in the app folder.

Let`s code
Create a new folder in your favorite code editor (I will be using Visual Studio Code), head over to your terminal and run this command npx create-next-app@latest to create Next js inside that folder. Make sure you end the command with ./ with a little space in between them like this npx create-next-app@latest ./, this will create Next js in that current folder.

When you run that command, you will get this question press enter to continue the installation.

After that, you will also see these questions, make sure you select the answers like I just did in this image. To select the answers, you have to use your (left and right) arrows accordingly, then press enter.

After the installation process, you will have a screen like this

Now we will create 3 folders inside our app folder, each of these folders will have a page.js file where we will be writing the components for each folder.

Now that we have created our folders and pages, let`s start building each component inside the pages of each folders.

"use client"
const Analytics = () => {
    return ( 
        <section>
            <h1>This is the analytics page</h1>
        </section>
     );
}

export default Analytics;

"use client"
const dashboard = () => {
    return ( 
        <section>
        <h1>This is the dashboard</h1>
        </section>
     );
}

export default dashboard;

"use client"
const Settings = () => {
    return ( 
        <section>
            <h1>This is the settings page</h1>
        </section>
     );
}

export default Settings;

Let us view what we have been creating since, head over to your terminal and run this command npm run dev to view your work on the browser. Once the command has finish running, you have to go to your browser and paste this url http://localhost:3000 to view what we have been building.
You must see something like this on your browser

Now go ahead and change the url of your application by adding a slash, and then, the name of the folder you want to see. Like this /settings.

Note This is case sensitve, make sure that it is the exact folder name that you type, if not, you will get a 404 error message.

Now i know you will be wondering, "will my users have to type the page they want to see manually?" No they will not, you will have to create another folder (your navigation) with a page file, like other folders. Inside that page, create a navigation links and import the navigation component inside the layout.js file. Like this

Navigation The navigation consists of navigation links, we make use of the in-built link in Next js and use that to replace the normal anchor tag.

"use client"
import Link from 'next/link'
const Navigation = () => {
    return ( 
        <main>
            <nav className='bg-red-500'>
        <ul className='flex '>
          <li className='p-3 cursor-pointer'><Link href="/">Home</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/analytics">Analytics</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/dashboard">Dashboard</Link></li>
          <li className='p-3 cursor-pointer'><Link href="/settings">Settings</Link></li>
        </ul>
      </nav>
        </main>
     );
}

export default Navigation;

Layout page This page is where you import any component you want to seen across all components, like your navigation and footer components.

You are supposed to have something like this

The home page here is that page.js file inside the app folder, that file carrys the template code you will see when you run npm run dev command in your terminal. You have to clear those template codes up and create what you want as your home page.
Here is mine

Conclusion
Next js uses file based routing system that enables developers to build fast and easy to implement navigations based on their file structure. It does not need an additional library for that, which is very cool.

Now you have seen how easy it is to implement navigation in Next js. Happy coding!

Top comments (3)

Md. Sakil Sazzad Joy • Dec 3 '23

"Next js has an in-built routing system that makes it a nice framework, unlike React js, that uses third party libraries for it`s routing.".
Really man?😆😆
You see 2/3 videos about some framework and start making these kind of immature blogs.😂