Creating Your First Page

In the App Router, a route is created by adding a folder inside app/ and placing a page.tsx file inside that folder. There is no separate routes configuration file to edit and no router to register anything with — the file system itself is the router.

Worked example: an About page

To create a page available at /about, add a folder named about inside app/, and a page.tsx file inside that folder.

Folder structure

Bash

app/
├── page.tsx        # "/"
└── about/
    └── page.tsx    # "/about"

app/about/page.tsx

TSX

export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We build things with Next.js.</p>
    </div>
  )
}

Save the file, start (or keep running) npm run dev, and visit http://localhost:3000/about.

About Us
We build things with Next.js.

The default export requirement

A page.tsx file must have its page component as the default export. Next.js looks specifically for the default export when it renders the route — a named export alone will not be picked up as the page's UI.

This will not work as a page

TSX

// ❌ Named export only — Next.js won't render this as the page
export function AboutPage() {
  return <h1>About Us</h1>
}

Warning

Forgetting `default` is one of the most common early mistakes. Without it, Next.js will report the route as missing its required default export instead of rendering your component.

Server Components by default

Notice that AboutPage above is just a plain function — no special import, no "use client" directive, nothing marking it as server-only. That is because every component under app/ is a Server Component by default: it renders on the server, and only the resulting HTML (plus a minimal amount of JavaScript for interactivity elsewhere on the page) is sent to the browser. The dedicated Server Components page later in this series covers exactly what that means and when you need to opt out of it.

A folder becomes a route only when it contains a page.tsx.
The page component must be the file's default export.
Nested folders create nested URL segments — app/about/team/page.tsx becomes /about/team.
Every component under app/ is a Server Component unless explicitly opted out.

Note

This example lives directly under `app/`. Real projects almost always add a shared `layout.tsx` alongside pages like this one — covered in the Layouts & Shared UI page next in this series.