Nested Routes in Next.js

In this tutorial, you will create routes inside another route.

Define the Nested Routing in App Router

Example: In this example, I define the main router, which has a nested router.


app/main/
 ├─ page.js            → /main
 ├─ settings/
 │    └─ page.js       → /main/settings
 └─ users/
      └─ [id]/
          └─ page.js   → /main/users/1

Define the Nested Routing in the Pages Router

Example: In this example, I define the main router, which has a nested router.


pages/main/index.js                → /main
pages/main/settings.js             → /main/settings
pages/main/users/[id].js           → /main/users/:id

Why is nested routing useful?

There are many reasons for the benefits of nested routing.

1. Useful for Multi-step forms.

2. Useful for Multi-level navigation.

3. Useful for Admin Dashboard (I define dashboard as the main in the above example.)

Nested Routes in Next.js – Interview Questions

Q 1: What are nested routes?

Ans: Routes inside another route structure.

Q 2: How are nested routes created?

Ans: By creating subfolders inside the app/ directory.

Q 3: Do nested routes share layouts?

Ans: Yes, parent layouts are shared.

Q 4: Are nested routes SEO-friendly?

Ans: Yes, they follow hierarchical URLs.

Q 5: Can nested routes have dynamic parameters?

Ans: Yes, using [param].