What is file-based routing in NextJS? #1

Hi There,👋

I am Gibson, In this article, we will learn about What is file-based routing and why is it helpful in NextJS.

NextJS Route #1

Enough talking, let’s see the topics🔥

Table of contents:

Traditional React Router

How NextJs Route work?

Conclusion

Traditional React Router:

In traditional React applications, the setup for routing typically appeared as follows.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

In the conventional React application, it was necessary to include a specific code related to routing within one of your components, where you can add various route-related components using the react-router-dom. Of course, it's not wrong with this setup.

Note: In Next.js, there is no need for the react-router library and to set up routes within the code.

In NextJs the special “pages” folder in Next.js is used for routing purposes because Next.js automatically scans its contents to find the path structure of our application.

How NextJs Route work?

Let’s see some examples, This is the example pages folder.

NextJs Folder Structures

Here in this pages’s folder, we have two JavaScript files: “index.js” and “about.js”.

And the products folder, there are two extra JavaScript files. One is the index.js file, which is located in the products folder instead of the pages folder. The other file has a strange name with square brackets containing “id” followed by “.js”. After a while, we’ll discuss the strange file name, so there’s no need to worry about it at this moment.

Let’s see how the “pages” folder works in Next.js. based on the above diagram, inside the pages folder’s “index.js” file should be our main starting page for requests to our domain for an empty path.

For the “about.js” file, my intention is to load an about page. In essence, it will simply render the component specified in the “about.js” file, making it accessible at the URL “our domain.com/about.”

NOTE: The file name is treated as a path, with the exception of the index.js file.

The “index.js” file, being a special file, is considered the root path within the current folder.

“/products” is the base route for your Next.js application. When a user accesses the URL “domain.com/product,” the content for this route will be determined by the contents of the “index.js” file.

“index.js” This file represents the default content that will be displayed when a user visits the “/product” route. This file will be displayed when someone accesses “yourdomain.com/product.”

“[id].js” is a dynamic route in Next.js. The square brackets “[ ]” indicate that this part of the URL is a parameter, and “id” is the name of the parameter. When a user accesses a URL like “domain.com/product/123” or “domain.com/product/abc,” Next.js will explain “123” or “abc” as the value of the “id” parameter, and it will handle the route.

This dynamic routing setup in Next.js allows you to create flexible and parameterized routes for your application, making it easy to display different content based on the structure of your folders.

And with this, we finished the article about file-based routing in NextJS, And in my next article, we will see more about file-based routing in NextJS.

Conclusion:

I hope this article would be helpful to you, we have learned some topics about the React Router. Hope to see you all in my next article, Until then Take Care! Keep Learning!👋

Read for more information here,👇

Building Your Application: Routing

Routing