How to setup Next.js File Based Routing?

In a typical React application, we enable routing using the react-router package. However, Next.js greatly simplifies this approach by providing file-based routing as a feature. In this post, we look at how to setup Next.js file based routing.

If you are a beginner in Next.js, I will recommend you to go through the post about getting started with Next.js.

1 – Introduction to Next.js File Based Routing

In Next.js, we move away from the code-based routing provided by the react-router package. In Next.js, there is no react-router usage.

Instead, we simply create normal React component files and let Next.js infer the routes according to the folder structure. Next.js handles this by looking at the special pages folder within the source directory of the project.

For example, within the pages folder, we create a file index.js.

function HomePage() {
    return(
        <div>
            <h1>Home Page</h1>
        </div>
    )
}

export default HomePage;

If we start the application and visit http://localhost:3000, we should see the home page in the browser. This is basically the root path or route of our project.

If we want to create another route, we can simply create another file about.js within the pages folder.

function AboutPage() {
    return(
        <div>
            <h1>About Page</h1>
        </div>
    )
}

export default AboutPage;

We can now visit the URL http://localhost:3000/about and see the about page in the browser.

Basically, Next.js looks at the file name and if it is something other than index.js, the file is exposed as a separate route. Notice that the files contain normal React functional components.

This approach is known as Next.js file based routing.

2 – Next.js Nested Routes using File Based Routing

Many times, we need to implement a hierarchy of paths. Think of it as our web application having different sections and each section has a different set of pages.

Next.js also supports nested routes using the same approach of file based routing.

For example, if our website has a section for showcasing developer portfolios, we might want to have a route path /portfolio.

To support this, we simply create a new folder portfolio within the pages folder. To have a home page for the portfolio section, we also create a new index.js file within the portfolio folder.

See below example:

function PortfolioPage() {
    return(
        <div>
            <h1>The Portfolio Page</h1>
        </div>
    )
}

export default PortfolioPage;

We can view this particular page by visiting http://localhost:3000/portfolio.

Moving further, we can also have sub-pages within the portfolio section. For example, we may have a portfolio of particular developer named Adam.

To support this path, we create another file adam.js within the portfolio folder.

function AdamPortfolio() {
    return(
        <div>
            <h1>Adam's Portfolio</h1>
        </div>
    )
}

export default AdamPortfolio;

We can view Adam’s portfolio by visiting http://localhost:3000/portfolio/adam.

Next.js automatically goes through the pages folder and all its sub-directories to resolve paths.

Conclusion

Basically, file-based routing is one of the most important features of Next.js that sets is apart from a normal React application.

It effectively removes the need to write complex piece of React code to support application routing. While there is nothing wrong with react-router, Next.js simply makes things easier.

In the next post, we will look at dynamic routing in Next.js.

Also, do you want to build a large NextJS application? Check out this post to build a NextJS Event Management Application.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.