What is Pages Router in Next.js: Simple Explanation and Example

The pages router in Next.js is a file-based routing system where each file inside the pages folder automatically becomes a route in your app. It lets you create web pages by simply adding files, without manually configuring routes.

How It Works

The pages router in Next.js works like a map that connects URLs to files. Imagine your website as a house with many rooms. Each room is a page, and the pages folder is like the blueprint that tells Next.js where each room is located. When you add a file named about.js inside pages, Next.js automatically creates a route /about that visitors can access.

This system means you don’t have to write code to define routes manually. The file names and folder structure decide the URLs. For example, a file at pages/blog/post.js becomes accessible at /blog/post. This makes building and organizing your website simple and intuitive.

Example

This example shows how creating files in the pages folder creates routes automatically.

jsx

/* File: pages/index.js */
export default function Home() {
  return <h1>Welcome to the Home Page</h1>;
}

/* File: pages/about.js */
export default function About() {
  return <h1>About Us</h1>;
}

/* File: pages/blog/post.js */
export default function BlogPost() {
  return <h1>Blog Post</h1>;
}

Output

Visiting '/' shows 'Welcome to the Home Page'. Visiting '/about' shows 'About Us'. Visiting '/blog/post' shows 'Blog Post'.

When to Use

Use the pages router when you want a simple and fast way to create routes without extra setup. It is perfect for most websites and apps where routes follow a clear structure. For example, blogs, portfolios, company sites, and small apps benefit from this automatic routing.

If your app needs complex routing logic or dynamic nested routes, you might explore Next.js's newer app router, but the pages router remains easy and reliable for many projects.

Key Points

• The pages folder controls routing by file names.
• Each file inside pages becomes a URL path automatically.
• Nested folders create nested routes.
• No manual route configuration is needed.
• Great for simple to medium complexity apps.

Key Takeaways

The pages router creates routes automatically from files in the pages folder.

File and folder names define the URL paths without extra code.

It is ideal for straightforward website structures and quick development.

Nested folders inside pages create nested routes easily.

For complex routing needs, consider Next.js app router, but pages router is simple and effective.