Nested Routes in Next.js: Organizing Complex Applications

Nested routes are a powerful feature in Next.js that allow you to organize complex applications with multiple levels of navigation. By structuring your routes hierarchically, you can create a more intuitive and maintainable application. In this article, we’ll explore how nested routes work in Next.js and how you can use them to build scalable and organized applications.

How Nested Routes Work

In Next.js, nested routes are created by organizing files into subdirectories within the pages directory. Each subdirectory represents a level of nesting in the URL structure. For example, a file named pages/blog/first-post.js corresponds to the route /blog/first-post.

Creating Nested Routes

To create nested routes, follow these steps:

1. Create a subdirectory in the pages directory. For example, pages/blog/.
2. Add files to the subdirectory to represent the nested routes. For example, pages/blog/first-post.js and pages/blog/second-post.js.

Here’s an example of a nested route structure:

pages/
├── blog/
│   ├── first-post.js
│   ├── second-post.js
│   └── index.js
└── index.js

In this example:

• pages/blog/index.js corresponds to the /blog route.
• pages/blog/first-post.js corresponds to the /blog/first-post route.
• pages/blog/second-post.js corresponds to the /blog/second-post route.

Creating an Index Page for Nested Routes

An index page in a nested route serves as the default page for that route. For example, pages/blog/index.js is the default page for the /blog route.

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog</h1>
      <p>Welcome to our blog.</p>
    </div>
  );
}

Linking Between Nested Routes

Next.js provides a Link component for client-side navigation between nested routes. This ensures that page transitions are fast and smooth, without a full page reload.

import Link from 'next/link';

export default function Blog() {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        <li>
          <Link href="/blog/first-post">
            <a>First Post</a>
          </Link>
        </li>
        <li>
          <Link href="/blog/second-post">
            <a>Second Post</a>
          </Link>
        </li>
      </ul>
    </div>
  );
}

Dynamic Nested Routes

You can also create dynamic nested routes by combining nested routes with dynamic routing. For example, to create a route like /blog/[slug], add a file named [slug].js in the pages/blog directory.

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>This is the content for the blog post titled "{slug}".</p>
    </div>
  );
}

Secrets and Hidden Facts

• Shared Layouts: Use the _app.js file or custom components to create shared layouts for nested routes.
• Custom Error Pages: Create a 404.js file in the pages directory to customize the 404 error page for nested routes.
• Middleware: Use middleware to handle requests and responses for nested routes, enabling advanced use cases like authentication and logging.

Conclusion

Nested routes are a powerful feature in Next.js that allow you to organize complex applications with multiple levels of navigation. By structuring your routes hierarchically, you can create a more intuitive and maintainable application. Whether you’re building a blog, an e-commerce platform, or a user dashboard, nested routes provide the flexibility and scalability you need to succeed.