Next.js Routing

Routing in Next.js is a built-in system that automatically maps URLs to files and folders.

This means:

No need for extra libraries like React Router
Routes are created using file and folder structure
Navigation is fast and optimized

Next.js supports both pages/ and app/ directory-based routing.

Key Features of Next.js Routing

File-based routing system
Supports static, dynamic, and nested routes
Built-in navigation using Link
SEO-friendly URLs
High performance with prefetching

Types of Routes in Next.js

1. Static Routes

A static route is created using a fixed file name.

Example:

plaintext

// pages/index.js
export default function Home() {
  return <div>Home Page</div>;
}

Access:

plaintext

http://localhost:3000/

2. Nested Routes

Nested routes are created using folders.

Example:

plaintext

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

Access:

plaintext

http://localhost:3000/users/about

3. Dynamic Routes

Dynamic routes allow variable values in URLs.

Example:

plaintext

// pages/users/[id].js
import { useRouter } from "next/router";

export default function User() {
  const router = useRouter();
  const { id } = router.query;

  return <p>User: {id}</p>;
}

Access:

plaintext

http://localhost:3000/users/1
http://localhost:3000/users/abc

4. API Routes

API routes allow backend logic inside Next.js.

Example:

plaintext

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

Access:

plaintext

http://localhost:3000/api/hello

Advanced Routing

5. Catch-All Routes

Used to match multiple paths.

plaintext

pages/[...slug].js

Example:

plaintext

/blog/a
/blog/a/b
/blog/a/b/c

6. Optional Catch-All Routes

Handles zero or more segments.

plaintext

pages/[[...slug]].js

Example:

plaintext

/blog
/blog/a
/blog/a/b

Navigation in Next.js

Using Link Component

plaintext

import Link from "next/link";

<Link href="/about">About Page</Link>

Fast navigation
No page reload
Prefetching enabled

Using useRouter Hook

plaintext

import { useRouter } from "next/router";

function MyComponent() {
  const router = useRouter();

  console.log(router.pathname);
  console.log(router.query);

  return <div>Check console</div>;
}

Use cases:

Redirect user
Access query params
Handle dynamic routes

Step-by-Step Routing Setup

Step 1: Create Project

plaintext

npx create-next-app myproject

Step 2: Create Structure

Inside pages/:

plaintext

pages/
 ├── index.js
 ├── users/
 │    ├── index.js
 │    ├── about.js
 │    └── [id].js

Step 3: Add Navigation

plaintext

import Link from "next/link";

export default function Home() {
  const id = 1;

  return (
    <>
      <h1>Home Page</h1>
      <ul>
        <li><Link href="/users">Users</Link></li>
        <li><Link href="/users/about">About</Link></li>
        <li><Link href={`/users/${id}`}>User {id}</Link></li>
      </ul>
    </>
  );
}

Step 4: Run Project

plaintext

npm run dev

Real-World Uses of Routing

Static websites
Blogs (categories, posts)
E-commerce (product pages)
Dashboards (profile, settings)
Full-stack apps (frontend + API)

Important Note

In Next.js 13+:

<Link> no longer needs <a> tag inside
App Router is preferred over Pages Router

Final Summary

Next.js routing is simple, powerful, and automatic. By just creating files and folders, you can build complete navigation systems without any external libraries.