Read an App Router application as a route tree

First, build a mental model

A route tree maps URL segments to nested UI boundaries. A page is a destination; a layout surrounds destinations; loading and error boundaries describe transitions and recovery.

1. Folders define route segments, while page.tsx makes a UI route reachable. A layout composes shared structure around its descendants; the root layout supplies the document shell.
2. Dynamic segments such as [slug] represent parameters. A static export must enumerate supported paths using the appropriate static parameter generation rather than inventing new files at request time.
3. loading.tsx and error.tsx provide scoped pending/error UI under framework rules. Error recovery must not imply a failed write succeeded, and a layout is not a substitute for authorization at the actual data boundary.
4. Metadata describes the document for browsers and crawlers. Route handlers use route.ts for HTTP behavior; their runtime needs depend on what the handler actually does.

{
  "app/layout.tsx": "shared document shell",
  "app/learn/page.tsx": "/learn",
  "app/learn/[slug]/page.tsx": "/learn/<known-slug>",
  "app/learn/[slug]/loading.tsx": "pending UI boundary",
  "app/learn/[slug]/error.tsx": "recovery UI boundary",
  "app/catalog/route.ts": "HTTP response handler"
}

1. URL

   A request for /learn/functions selects the learn and dynamic-slug route segments.

2. Composition

   The page appears inside the applicable layouts; route structure explains which UI is shared.

3. Artifact contract

   For a static site, functions must be a generated route. A folder convention alone does not create every possible slug.