File-Based Routing

In the App Router, the folder structure under app/ directly maps to the URL structure of your site. There is no routes file to edit and nothing to register — you create a folder, and if it contains the right file, that folder becomes a URL.

Folders map directly to URLs

Bash

app/
├── page.tsx              # /
├── about/
│   └── page.tsx          # /about
└── blog/
    └── page.tsx          # /blog

Special file names

Within any folder under app/, a handful of specifically-named files each have a defined meaning to the router:

File	Meaning
`page.tsx`	Defines the unique UI for a route and makes that folder's path publicly accessible.
`layout.tsx`	Shared UI that wraps the page and any nested routes below it, without re-rendering on navigation.
`loading.tsx`	An instant loading UI shown automatically while a route's content is being fetched (covered in depth on its own page).
`error.tsx`	A boundary that catches runtime errors within its segment and renders a fallback UI (covered on its own page).
`not-found.tsx`	The UI shown when `notFound()` is called or a route genuinely does not exist (covered on its own page).

A folder without page.tsx is not a route

Creating a folder under app/ does not, by itself, expose a URL. Only a folder that contains a page.tsx becomes visitable. This is intentional — it lets you organize files (components, styles, tests, utilities specific to one part of your app) alongside your routes without accidentally exposing them as pages.

components/ here is not a route

Bash

app/
└── dashboard/
    ├── page.tsx           # "/dashboard" — this exists
    └── components/
        └── Chart.tsx      # NOT a route — just a colocated file

Note

Because folders without a `page.tsx` are invisible to the router, you can safely colocate components, hooks, and helper files anywhere inside `app/` without worrying about accidentally creating new URLs. The dedicated Private Folders & Colocation page later in this series goes further with the `_folder` convention for the same purpose.

A folder under app/ becomes a URL segment.
Only a folder containing page.tsx is actually visitable.
layout.tsx, loading.tsx, error.tsx, and not-found.tsx each have a specific, reserved meaning.
Folders without a page.tsx are safe to use purely for organization.