The App Router and File-Based Routing

How File-Based Routing Works

In the App Router, the file system is the router. Every folder inside src/app/ that contains a page.tsx becomes a publicly accessible URL. The folder name maps directly to the URL segment.

src/app/
  page.tsx          -> /
  about/
    page.tsx        -> /about
  blog/
    page.tsx        -> /blog
    [slug]/
      page.tsx      -> /blog/:slug
  dashboard/
    settings/
      page.tsx      -> /dashboard/settings

Special filenames carry special meaning inside a route segment. page.tsx renders the UI, layout.tsx wraps child segments, loading.tsx shows a skeleton while content loads, error.tsx catches rendering errors, and route.ts defines an API endpoint — all in the same folder.

Route Groups

Wrap a folder name in parentheses — (marketing) — to create a route group. The folder is excluded from the URL but still lets you share a layout among its children. This is great for grouping public pages vs authenticated pages without affecting the URLs.