Pages and Routing in Next.js

Next.js provides a powerful and simple routing system based on the file and folder structure of your project. You don’t need to configure routes manually—routes are created automatically.

1. Routing in Next.js (App Router)

Next.js uses the App Router (app/ directory) in modern versions. Each folder represents a route, and each page.js file represents a page.

Example

app/
├── page.js          → /
├── about/
│   └── page.js      → /about
├── contact/
│   └── page.js      → /contact

2. Nested Routes

You can create nested routes by nesting folders.

app/
├── blog/
│   ├── page.js      → /blog
│   └── post/
│       └── page.js  → /blog/post

3. Dynamic Routes

Dynamic routes are created using square brackets [].

Example

app/
├── blog/
│   └── [slug]/
│       └── page.js  → /blog/my-first-post

Here, slug is a dynamic parameter.

4. Route Groups

Route groups help organize routes without affecting the URL structure.

app/
├── (auth)/
│   ├── login/
│   │   └── page.js  → /login
│   └── register/
│       └── page.js  → /register

5. Layouts in Routing

Layouts allow you to share UI across multiple pages.

app/
├── dashboard/
│   ├── layout.js
│   └── page.js

The layout.js file wraps all pages inside the dashboard route.

6. Navigation Between Pages

Next.js provides the Link component for client-side navigation.

import Link from 'next/link';

export default function Home() {
  return (
    <Link href="/about">Go to About Page</Link>
  );
}

7. Not Found Pages

You can create a custom 404 page using not-found.js.

app/
└── not-found.js

8. Pages Router (Older Method)

Older versions use the pages/ directory.

pages/
├── index.js      → /
├── about.js      → /about
├── blog/
│   └── [slug].js → /blog/post-name

For new projects, the App Router is recommended.

Conclusion

Next.js routing is simple, powerful, and scalable. By using file-based routing, layouts, and dynamic routes, you can easily build complex navigation structures without manual configuration.