How to Start Adding New Routes to Your Next.js Application

In this tutorial, we will explore how can we add new routes in our Next.js application with examples (basic, nested, dynamic routes)

In this tutorial, we will explore how can we add new routes in our Next.js application.

Next.js is a very popular front-end library that is using server-side rendering. The popularity of Next.js is increasing every day.

In this tutorial, we will explore

• Basic Routes
• Nested Routes
• Dynamic Routes
• 2 Dynamic routes in the same path

Official documentation can be found here.

Adding Routes to Next.js

Setting up the routes in Next.js is very easy. We need to define our paths in our pages folder.

Basic Routes

For example, if we want to build our page under the directory we need to add our component to the following paths described below:

`/` => pages/index.jsx
`/blog` => pages/blog/index.jsx
`/contact` => pages/contact/index.jsx