Routing in Next.js: Complete Guide
2026-01-22
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:
/aboutroute exists becauseapp/about/page.jsexists./contactroute exists becauseapp/contact/page.jsexists.
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