Routing in Next.js (App Router + Pages Router)

Routing is one of the biggest reasons why Next.js feels clean and production-ready. Instead of writing route configs manually, Next.js uses file-based routing — which means your folder structure becomes your route structure.

In this blog, we’ll learn routing in Next.js with both:

✅ App Router (recommended)
✅ Pages Router (legacy but still used)

What is File-based Routing?

In Next.js, every folder/file inside app/ (or pages/) becomes a route.

Example:

app/ page.js → / about/ page.js → /about contact/ page.js → /contact

So:

/about route exists because app/about/page.js exists.
/contact route exists because app/contact/page.js exists.

App Router vs Pages Router (Important)

i) App Router (Next.js 13+)

Uses app/ directory:

supports Layouts
supports Server Components
supports Loading & Error UI
supports route groups, parallel routes

📌 Example: app/ page.js → / blog/ page.js → /blog

ii) Pages Router (older system)

Uses pages/ directory:

routes created using file names
no nested layouts
more manual

📌 Example: pages/ index.js → / blog.js → /blog

<Callout>
✅ Recommended: Use **App Router** for all new projects.
</Callout>

Static Routes (Simple Routes)

Static routes are direct routes like /about.

App Router

app/about/page.js

Pages Router

pages/about.js

Nested Routes (Routes inside Routes)

Next.js supports nested routes automatically.

Example:

app/blog/page.js → /blog app/blog/featured/page.js → /blog/featured

So now routing becomes super easy.

Dynamic Routes (Most Useful)

Dynamic routes are routes with parameters like:

/blog/nextjs-routing
/product/123

App Router Dynamic Route

Create folder: app/blog/[slug]/page.js

export default function BlogDetails({ params }) {
  return (
    <div>
      <h1>Blog Slug: {params.slug}</h1>
    </div>
  );
}

Now visiting: ✅ /blog/routing-in-nextjs will output the slug.

✅ 6) Multiple Dynamic Routes Example: /product/12/reviews/9

Create structure:

app/product/[id]/reviews/[reviewId]/page.js
export default function Review({ params }) {
  return (
    <div>
      Product: {params.id} <br />
      Review: {params.reviewId}
    </div>
  );
}

✅ 7) Catch-All Routes When you want to capture many segments:

Example:

/docs

/docs/nextjs

/docs/nextjs/routing

Create:

app/docs/[...slug]/page.js
export default function Docs({ params }) {
  return <div>{params.slug.join(" / ")}</div>;
}

✅ 8) Route Groups (Super Clean Folder Structure) Route groups help in organizing routes without affecting URL.

Example:

app/ (auth)/ login/ page.js → /login signup/ page.js → /signup Even though folder name is (auth) — it will NOT appear in URL ✅

✅ 9) Layouts in Routing (App Router Feature 🔥) Layouts are reusable UI across routes.

Example:

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Now Navbar/Footer stay common for all pages.

✅ 10) Loading UI (loading.js) Next.js allows instant loading UI per route.

Example:

app/blog/loading.js
export default function Loading() {
  return <p>Loading Blog...</p>;
}

This appears automatically while route data loads.

✅ 11) Error UI (error.js) Create:

app/blog/error.js
"use client";

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try Again</button>
    </div>
  );
}

✅ 12) 404 Page (not-found.js) Create:

app/not-found.js
export default function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

✅ 13) Navigation (Link + useRouter) ✅ Link (Best)

import Link from "next/link";

<Link href="/about">Go to About</Link>
✅ useRouter (Client only)
"use client";
import { useRouter } from "next/navigation";

export default function Btn() {
  const router = useRouter();
  return <button onClick={() => router.push("/contact")}>Contact</button>;
}

✅ Final Thoughts Routing in Next.js is simple because it’s based on: ✅ folders + files = routes

Once you master:

dynamic routes

layouts

loading/error UI

route groups

You can create scalable and clean applications easily 🚀

✅ Quick Summary Static Routes → about/page.js

Dynamic Routes → [slug]/page.js

Catch All → [...slug]/page.js

Layout → layout.js

Loader → loading.js

Error UI → error.js

404 → not-found.js

Thanks for reading 💙 If you want, I can also give you: ✅ Routing diagram image ✅ SEO optimized meta tags for this blog ✅ Full blog JSON + Next.js blog listing logic

ii) blog.json Entry (for listing/blog system)

Add this object inside your blog.json array:

{
  "title": "Routing in Next.js: Complete Guide (App Router + Pages Router)",
  "description": "Learn Next.js routing in a simple way — App Router vs Pages Router, dynamic routes, nested routes, route groups, layouts, loading UI, error handling, and navigation.",
  "date": "2026-01-22",
  "slug": "routing-in-nextjs",
  "tags": ["Next.js", "Routing", "React", "App Router", "Pages Router"],
  "category": "Next.js",
  "cover": "/images/blog/routing-nextjs-cover.png",
  "readingTime": "7 min read",
  "author": "Dipak Khare",
  "file": "routing-in-nextjs.mdx",
  "published": true
}

✅ Recommended Blog Folder Structure

Best structure for scalable blog system:

content/
  blog/
    routing-in-nextjs.mdx

public/
  images/
    blog/
      routing-nextjs-cover.png

data/
  blog.json

Routing in Next.js: Complete Guide

Have an idea, project, or opportunity? 🚀