Next.js - create nested routes

In this article, we would like to show you how to create nested routes in Next.js.

Practical example

In this example, we present how to create nested routes, when the user visits the following URLs:

1. /product/first
2. /product/second

Note:

If you are running Next.js application locally, the URL would look like:

http://localhost:3000/product/first

Project structure

In the pages/ directory of the Next.js project, we need to create product/ folder with the following files inside it:

1. index.js file, which will be mapped to /product route,
2. first.js file, which will be mapped to /product/first route,
3. second.js file, which will be mapped to /product/second route.

/next.js-project/
    ├─ next/
    ├─ node_modules/
    └─ pages/
	    ├─ api/
	    └─ product/
            ├─ index.js
            ├─ first.js
            └─ second.js

Example components

Each component below represents a single page for our routing.

product/index.js:

function Product() {
    return <h1>Product page</h1>;
}

export default Product;

product/first.js:

function First() {
    return <h1>First product</h1>;
}

export default First;

product/second.js:

function Second() {
    return <h1>Second product</h1>;
}

export default Second;

Web browser preview