File-Based Routing Basics

Folders are routes

Inside app/, a folder becomes a route segment when it contains a page.tsx. Nesting folders nests routes:

File	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/blog/page.tsx`	`/blog`
`app/blog/[slug]/page.tsx`	`/blog/:slug`
`app/dashboard/settings/page.tsx`	`/dashboard/settings`

The "page makes it public" rule

Only page.tsx exposes a route to the world. Other files in the same folder are organizational — they're loaded by the framework but not served as a URL. This means you can park colocated components next to a route without polluting the URL space.

The special file vocabulary

File	Role
`page.tsx`	The route UI — required to make a segment public.
`layout.tsx`	Shared UI wrap. Persists across child navigations.
`loading.tsx`	Suspense fallback for the segment.
`error.tsx`	Error boundary (must be a Client Component).
`not-found.tsx`	Rendered when `notFound()` is called inside.
`template.tsx`	Like layout, but re-mounts on every navigation.
`default.tsx`	Fallback for parallel route slots on hard navigation.
`route.ts`	API endpoint. Can't coexist with `page.tsx` in the same folder.

Code

A minimal page·tsx

// app/about/page.tsx → /about
export default function AboutPage() {
  return (
    <main className="prose mx-auto p-8">
      <h1>About</h1>
      <p>Server-rendered by default.</p>
    </main>
  );
}

Colocated components don't make routes·text

app/blog/
├── page.tsx               → /blog (public)
├── PostCard.tsx           → not a route, just a sibling
├── useFilters.ts          → not a route
└── [slug]/
    ├── page.tsx           → /blog/:slug (public)
    └── ShareButton.tsx    → not a route

Folders are routes

The "page makes it public" rule

The special file vocabulary

Code

External links

Exercise

Progress

Comments 0