Next.js Pages Router Explained — File-Based Routing

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Next.js Pages Router Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

The Next.js Pages Router maps files in the pages directory to routes automatically. Each .jsx/.tsx file becomes a route based on its filename and folder structure.

What You'll Learn

File-based routing fundamentals
Dynamic routes with [param]
Catch-all routes with [...param]
Link component and useRouter
Shallow routing

Why It Matters

The Pages Router was the original Next.js routing system. Many existing projects still use it, and it remains simpler than App Router for basic applications.

// pages/index.jsx
import Link from "next/link";

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog</h1>
      {posts.map(post => (
        <Link key={post.id} href={`/blog/${post.slug}`}>
          <h2>{post.title}</h2>
        </Link>
      ))}
    </div>
  );
}

// pages/blog/[slug].jsx
import { useRouter } from "next/router";

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

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// pages/blog/[...slug].jsx — catch-all for /blog/a/b/c
export default function CatchAll({ params }) {
  return <div>Path: {params.slug.join(" / ")}</div>;
}

Expected output: Home links to blog posts, each post renders at /blog/[slug], and catch-all routes handle nested paths.

← Previous Next.js Setup Explained — Project Scaffolding and Configuration Next → Next.js App Router Explained — Modern React Routing

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Nextjs