Next.js Pages

Pages in Next.js are React components that define routes in your application.

Next.js uses a file-based routing system where:

Each file inside the pages/ folder becomes a route
No manual routing setup is required

Types of Pages in Next.js

1. Static Pages

Created using normal file names
Content is fixed
Example:

plaintext

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

Access:

plaintext

/about

2. Dynamic Pages

Created using square brackets [ ]
Used when route values change dynamically

Example:

plaintext

// pages/users/[user].js
export default function User() {
  return <h1>User Page</h1>;
}

Access:

plaintext

/users/1
/users/anil

3. API Routes

Backend logic inside Next.js
Stored inside pages/api/

Example:

plaintext

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello API" });
}

Access:

plaintext

/api/hello

Create Your First Next.js Page

Step 1: Create Project

plaintext

npx create-next-app gfg

Step 2: Move into Folder

plaintext

cd gfg

Step 3: Run Project

plaintext

npm run dev

Open:

plaintext

http://localhost:3000

Project Structure

plaintext

pages/
 ├── index.js
 ├── gfg.js

Creating a Static Page

Example:

plaintext

// pages/gfg.js
export default function GfgPage() {
  return <div>Welcome to the GFG Page!</div>;
}

Output:

/ → Home page
/gfg → GFG page

Explanation:

pages/gfg.js automatically becomes /gfg
No routing configuration needed

Creating Dynamic Pages

Dynamic pages are created using [param].js.

Method 1: Using useRouter

plaintext

// pages/route/[gfg].js
import { useRouter } from "next/router";

export default function RoutePage() {
  const router = useRouter();

  return (
    <div>
      <h1>Dynamic Route</h1>
      <p>Path: {router.asPath}</p>
    </div>
  );
}

Method 2: Using usePathname (App Router)

plaintext

// pages/route/[gfg].js
import { usePathname } from "next/navigation";

export default function DynamicPage() {
  const pathname = usePathname();

  return <div>Current route: {pathname}</div>;
}

Example Explanation

pages/route/[gfg].js → Dynamic route
[gfg] acts as a variable

Example URLs:

plaintext

/route/123
/route/react

Output Behavior:

useRouter() → gives full route info
usePathname() → gives current path directly

Static vs Dynamic Pages

FeatureStatic PageDynamic PageFile Nameabout.js[id].jsRoute TypeFixedVariableUse CaseAbout, ContactUser, Product

Important Points

pages/index.js → Home route /
File name = route path
[param] → dynamic route
pages/api → backend routes
No need for external routing library

When to Use Pages

Use pages when:

You are using Pages Router (older or simple projects)
You want quick setup
You are building small to medium apps

For modern apps, prefer:

App Router (app/ folder)

Final Summary

Next.js Pages make routing simple by converting files into routes automatically. You can create static pages, dynamic pages, and even backend APIs inside the same project without extra configuration.