Pages & the App Router

Next.js uses the file system as the routing table. Each folder under app/ represents a URL segment, and a file named page.js inside that folder becomes the page rendered at that URL.

A few examples

app/page.js                → /
app/about/page.js          → /about
app/blog/page.js           → /blog
app/blog/hello/page.js     → /blog/hello

A folder without a page.js is still a valid segment — it just has no UI. That is useful for grouping (covered in lesson 11).

What goes in page.js

A page is a React component that is the default export of the file. That's it. The component returns JSX:

// app/about/page.js
export default function AboutPage() {
  return (
    <section>
      <h1>About us</h1>
      <p>We build calm software.</p>
    </section>
  );
}

Special files in a route folder

• **page.js** — the UI for this URL.
• **layout.js** — wraps the page and any child segments (next lesson).
• **loading.js** — shown while the page is streaming in.
• **error.js** — shown if the page throws.
• **not-found.js** — shown when notFound() is called.
• **route.js** — turns the folder into an API endpoint instead of a page.

Naming rules

• Folder names become URL segments. Use lowercase, dashes for spaces — app/getting-started/page.js → /getting-started.
• Folders that start with _ are private and ignored by the router.
• Square brackets like [slug] mark dynamic segments (lesson 10).