From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Nested routes

Nested routes - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Nested routes

“

You can also create a nested route by following the folder structure. Let's try to create a nested route under the about route. For example, the route that we want to create is slash about slash settings. So here slash is the root segment. Again the about is a segment and settings is called the leaf segment. In fact, the later part generally is referred as leaf in Next.js. So let's implement this. I'll create the settings folder inside the about folder and also create the page.js file. Now let me copy the component code from the about component and paste it over here. And I'll change the component name to settings and also update the text to this is the settings page. Let's save this and check the output. I'll enter the URL slash about slash settings and there we get the settings page as well. So to have nested routes, you just create nested folders as per the need. In fact, there is a lot inside, but that we will see as we proceed further.

Contents