Next.js Pages and Routing Basics

Routing means deciding what the user sees when they visit a specific URL. In Next.js, your folder structure inside the app/ directory controls routing. You create a folder and add a page.js file — that is all you need to make a new page.

The page.js File

Every page in Next.js is a React component exported from a file named page.js. The location of this file determines the URL.

app/page.js                   → yoursite.com/
app/about/page.js             → yoursite.com/about
app/services/page.js          → yoursite.com/services
app/contact/page.js           → yoursite.com/contact

A Basic page.js File

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>We build great websites.</p>
    </main>
  );
}

The function name does not matter for routing. Only the file location matters.

Diagram: Folder → URL Mapping

app/
 ├── page.js               →  /
 ├── about/
 │    └── page.js          →  /about
 ├── blog/
 │    └── page.js          →  /blog
 └── pricing/
      └── page.js          →  /pricing

RULE: folder name = URL segment

How Next.js Finds the Right Page

When someone visits yoursite.com/about, Next.js looks for the app/about/page.js file. If that file exists, it renders and returns it. If it does not exist, Next.js shows a 404 page automatically.

User visits /about
      ↓
Next.js looks for app/about/page.js
      ↓
File found → Render and show it
File not found → Show 404 page

Creating a New Page Step by Step

To create a page at yoursite.com/services, follow these steps:

Step 1: Create the Folder

Inside the app/ folder, create a new folder named services.

Step 2: Add page.js

Inside the services folder, create a file named page.js.

Step 3: Write the Component

export default function ServicesPage() {
  return (
    <main>
      <h1>Our Services</h1>
      <p>We offer web design, development, and SEO.</p>
    </main>
  );
}

Visit localhost:3000/services in your browser. The page appears immediately.

The 404 Page

Next.js shows a default 404 page when a user visits a URL that does not match any page file. You can create a custom 404 page by adding a file named not-found.js inside the app/ folder.

app/not-found.js    →  Custom 404 page shown for all missing routes

Rules for Page Files

Only page.js Becomes a Route

You can put other files inside route folders — like component files or helper files — and they will not become pages. Next.js only treats page.js as the renderable page for that route.

app/blog/
  ├── page.js          ← This becomes /blog (a real page)
  ├── utils.js         ← This is NOT a page (just a helper file)
  └── BlogCard.js      ← This is NOT a page (just a component)

File Must Export a Default Function

Every page.js must export a default React component using export default. Without this, Next.js cannot render the page.

Nested Pages

You build nested pages by creating nested folders. Each level of folders adds a segment to the URL.

app/
  blog/
    tutorials/
      page.js          → yoursite.com/blog/tutorials

Key Takeaway

Routing in Next.js is based entirely on your folder structure inside app/. Create a folder, add a page.js file with a default export, and that URL is live. No routing configuration file is needed.