Next.js Nested Routing – Complete Guide with Examples

Introduction

In this lesson, you will learn Next.js nested routing and how to organize routes using folders. Nested routing is important for building structured and scalable web applications. This Next.js tutorial will help you understand how to create clean URLs and manage complex projects easily.

What is Nested Routing in Next.js

Definition

Next.js nested routing allows you to create routes inside folders, forming a hierarchy of pages. This helps in organizing content and improving navigation.

Why It Is Important

Nested routing makes your application more structured and easier to manage, especially for large projects.

How Nested Routing Works

Basic Example

If you create the following structure:
pages/blog/post.js → /blog/post
pages/blog/category.js → /blog/category
Each folder becomes part of the URL structure.

Nested Routing with Pages Router

Folder-Based Structure

You can create folders inside the pages directory to define nested routes.

Example

pages/services/web.js → /services/web
pages/services/app.js → /services/app

Nested Routing with App Router

Modern Approach

In the app router, nested routing is more powerful and supports layouts.

Example

app/blog/post/page.js → /blog/post
app/services/web/page.js → /services/web

Benefits of Nested Routing

Better Organization

Keeps related pages grouped together, making code easier to manage.

Scalable Structure

Helps in building large applications with multiple sections.

Improved SEO

Structured URLs improve readability and search engine ranking.

Combining Nested and Dynamic Routing

Example

pages/blog/[id]/comments.js → /blog/1/comments

Use Case

Useful for blogs, product reviews, and user-generated content.

Layouts in App Router

Shared Layouts

You can create shared layouts for nested routes using layout.js in the app folder.

Advantage

Reduces code duplication and improves consistency across pages.

Common Mistakes

Deep Nesting

Avoid creating too many nested levels as it can make the structure complex.

Poor Naming

Use meaningful folder and file names for better clarity.

Mixing Routers

Avoid mixing pages and app router unnecessarily in one project.

Best Practices

Keep Structure Simple

Use nesting only when needed.

Use Logical Grouping

Group related pages inside folders.

Optimize for SEO

Use clean and descriptive URLs for better ranking.

Conclusion

Next.js nested routing is a powerful feature that helps you organize your application efficiently. It allows you to create structured URLs and manage complex projects with ease. Mastering nested routing will improve your development workflow and application scalability.
Click here for more free courses

FAQs

What is nested routing in Next.js

Nested routing allows you to create routes inside folders to form structured URLs.

How do I create nested routes

Create folders inside the pages or app directory and add files inside them.

Is nested routing SEO friendly

Yes, it creates clean and structured URLs that improve SEO.

Can I combine nested and dynamic routing

Yes, both can be used together for advanced routing.

Should I use nested routing in small projects

It is better for medium to large projects but can be used in small projects if needed.