🧭 Mastering Routing in Next.js: From Basics to Advanced

When building scalable web apps, routing is one of the most crucial parts—and Next.js nails it with its file-based routing system. In this blog, we’ll explore the complete routing ecosystem in Next.js including:

• Basic Routing

• Nested & Dynamic Routes

• Catch-All Routes

• Reusable Layouts

• Metadata API

• Handling 404 Pages

• Route Groups

• Private Folders

Let’s dive in!

---

📁 1. File-Based Routing in Next.js

In Next.js, the file structure becomes your route. Every file inside the app/ or pages/ directory (depending on which you're using) becomes a route automatically.

Example:

app/
├── page.tsx          --> /
├── about/
│   └── page.tsx      --> /about
├── contact/
│   └── page.tsx      --> /contact

No need for React Router!

---

🧭 2. Nested Routing

To create nested routes, just nest folders.

app/
└── dashboard/
    ├── page.tsx         --> /dashboard
    └── settings/
        └── page.tsx     --> /dashboard/settings

Each level automatically maps to a deeper route.

---

🔁 3. Dynamic Routes

For routes that change (like /blog/[slug]), wrap the segment in square brackets:

app/
└── blog/
    └── [slug]/
        └── page.tsx     --> /blog/hello-world

You can access the dynamic param using:

import { useParams } from 'next/navigation';

const Blog = () => {
  const params = useParams();
  return <div>Blog slug: {params.slug}</div>;
};

---

🧬 4. Nested Dynamic Routes

Want something like /users/[userId]/posts/[postId]?

app/
└── users/
    └── [userId]/
        └── posts/
            └── [postId]/
                └── page.tsx  --> /users/123/posts/456

Use useParams() to get both userId and postId.

---

🧾 5. Catch-All Routes

Use [...slug] for a route that catches all segments:

app/
└── docs/
    └── [...slug]/
        └── page.tsx    --> /docs/anything/here/works

This is useful for documentation pages, breadcrumbs, etc.

---

🧩 6. Building Reusable Layouts

Layouts are defined using layout.tsx and wrap your child pages.

Example:

app/
└── dashboard/
    ├── layout.tsx       --> Applies to all nested routes
    └── page.tsx
    └── settings/
        └── page.tsx

// layout.tsx
export default function Layout({ children }) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Now Sidebar is shared across all nested dashboard routes.

---

🧠 7. Metadata API (SEO-Ready)

In the app/ directory, you can use the Metadata API to define SEO-related data for each route.

export const metadata = {
  title: 'Dashboard',
  description: 'Your admin panel dashboard',
};

You can also generate metadata dynamically using generateMetadata.

---

❌ 8. Custom 404 Pages

Create a not-found.tsx in any route to show a custom "Page Not Found" message.

Global 404:

app/
└── not-found.tsx    --> Triggers on unmatched routes

To trigger it manually:

import { notFound } from 'next/navigation';
notFound();

---

📁 9. Route Groups (Next.js 13+)

Route groups help structure your project without affecting the URL path.

app/
└── (auth)/
    └── login/
        └── page.tsx    --> /login

The (auth) folder is ignored in the route path but helps organize auth-related files.

---

🔐 10. Private Folders (Not Publicly Routable)

You can use a combination of route groups and middleware to secure folders.

For example:

app/
└── (private)/
    └── dashboard/
        └── page.tsx

Then use middleware to restrict access:

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  const isLoggedIn = checkAuthToken(request);
  if (!isLoggedIn) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

---

🏁 Conclusion

Next.js offers one of the most intuitive yet powerful routing systems out there. Whether you're building a static site, an e-commerce platform, or a complex dashboard, understanding its routing structure will save you tons of setup time and boost productivity.

From dynamic routes to reusable layouts and SEO metadata—Next.js takes care of it all.