Next.js File Based Routing (Part-1)

In traditional React apps, we need to install the React-Router first, and we need to write a code at least a few lines to set up the routes and navigation. However, in Next.js, routing is the core feature.

During the setup of the Next.js application (visit here if you are new to this page), the page folder is created by default. If we add a new file under the page folder, Next.js identifies it as a route.

Take a look at the below illustration.

It shows the page folder under the application. Under the page folder, there are few javascript files and a blog directory.

And the blog directory has two javascript files Index.js and another file with a weird name. We will discuss this strange file name later.

Index.js file under the page folder refers to the home ('/') page of the application

About.js refers to /about page of the application
Contact.js refers to the '/contact' page of the application
index.js under the blog folder refers to the '/blog' page of the application
[id].js under the blog folder indicates the dynamic routing. "id" implies the blog_id of the application (For ex- '/blog/1', where 1 is the blog id).

Adding our First Route

Open the app in your favorite IDE and, don't forget to start the app (using yarn dev or npm).

Delete the "api" and index.js file under the page folder. Refresh your home page you'll see a 404 page not found request. It is the expected result index.js under the page folder refers to the home page of our application. By deleting that file results in a custom 404 error.

Recreate the file (index.js) with the following content

function HomePage() {
  return (
    <div>This is the root of the application </div>
  )
}
export default HomePage;

If you are familiar with the "React" Code looks similar to the library. Next.js is the extension of react library. It is fair to assume the similarity in the code.

Add Another Route

Let's add another router '/contact'.

Add a new file contact.js under the page folder and update it with the following:

function ContactPage() {
  return (
    <div>
      Send me an email at foo@gmail.com
    </div>
  )
}
export default ContactPage;

Visit http://localhost:3000/contact and, you will see "Send me an email at foo@gmail.com".

What we have learned so far is to add the simple routes to our Next.js application. And we can add as many pages as we want in our Next.js app. If you are new here, please visit Part-1 of this series first.

Typical Web application routes are well designed. To visit the profile the URL path is more or less similar to /user/profile. Similarly, to change the user password, the URL is /user/change_password.

To build nested routes in Next.js is a lot simpler than React. We need to create a folder (In this case, user) and create a file profile.js.

Update the following code in the profile.js.

function ProfilePage() {
  return (
    <div>
      This is user profile page.
    </div>
  )
}
export default ProfilePage;

Now visit, http://localhost:3000/user/profile

There are a couple of things to notice here:

We didn't create an index.js file.
What happens if we create a profile folder and then create an index.js beneath it.

If we create an index.js beneath the user folder, then the URL path is /user instead of /user/profile.

Secondly, if we create a profile folder and add index.js, the URL is still the same as before (/user/profile). You are free to chose any method of your choice to structure the routes.

function ChangePasswordPage() {
  return (
    <div>
      Change you password here.
    </div>
  )
}
export default ChangePasswordPage;

Now visit http://localhost:3000/user/change_password

To organise our application we need nested routes. In this article, we learned how to handle the nested routes in Next.js.

In the next article we see how to handle the dynamic routes in Next.js.

See you there.