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.