Readiness: Implemented

Build an app

Build an app

Most read

1. Start hereRoutingFiles become routes, layouts nest, and Server Components fetch their own data.
2. Server ComponentsThe boundary a directive draws, the graph that resolves it, and a split at the route, not the module.
3. Server actionsA function the browser calls by id: what may cross, what is refused, and why it authorizes itself.
4. Data in the browserA query cache for what the browser fetches after the page has arrived, with requests that fail honestly and answers checked where they enter.
5. FormsUncontrolled inputs, narrow subscriptions, and no Proxy.

What you need first

A project that runs — Your first project makes one. The tutorial builds one application out of most of the pages below, and is the quickest way to see how they fit before reading any of them in detail.

The pages, in order

1. RoutingFiles become routes, layouts nest, and Server Components fetch their own data.
2. Server ComponentsThe boundary a directive draws, the graph that resolves it, and a split at the route, not the module.
3. Server actionsA function the browser calls by id: what may cross, what is refused, and why it authorizes itself.
4. Testing Server Components and actionsA server action through its real endpoint, a component calling one over the wire, and a production build answering in the test's own process.
5. Data in the browserA query cache for what the browser fetches after the page has arrived, with requests that fail honestly and answers checked where they enter.
6. Languages and messagesRoute by locale and format MessageFormat 2 messages with checked arguments.
7. Validating inputSchemas that parse untrusted input into typed values, with issue paths, inferred Flow types and a JSON Schema export.
8. FormsUncontrolled inputs, narrow subscriptions, and no Proxy.
9. StateAtoms, a store, and where this parts company with Jotai.
10. Immutable updatesChange a draft with produce, keep unchanged branches, and record patches when needed.
11. Styling and contentCSS, StyleX, tokens, dark mode, Markdown and MDX.
12. UI componentsStyleX components you own, from uf ui add, on headless parts that own the keyboard and ARIA.
13. Rendering modesWhere a document comes from, and what the browser does once it has one.
14. Answering requestsMiddleware, route handlers, draft mode, QUERY, and streams, sockets and work that outlives the request.
15. Async ReactSuspense, transitions and optimistic UI: what waits, what stays visible, and what is only temporary.
16. Images, fonts, icons and cardsResized, self-hosted, subsetted and drawn at build time, remote images on request — and what that stops short of.
17. Web componentsUse the browser-facing package for media, time, document regions, cookies and vitals.
18. Dates and timeRepresent an instant without a host time zone, then choose a zone when displaying it.
19. CachingRoute, function, and fetch caches with explicit lifetimes and pluggable storage.
20. Signing inA contract rather than a provider: PKCE, a single-use state, and a session store you can replace.
21. EffectsFailures in the type, and what Flow costs against Effect-TS.
22. GraphQL and RelayRelay artifacts, typed components, request-scoped RSC preloads, and an independent backend.
23. SQL with sqlcWrite SQL, and get Flow row types and query functions checked against SQLite, PostgreSQL and MySQL.
24. LoggingA structured logger, and a request id readable from inside a render.
25. Web vitalsFive numbers the browser already has, and nothing that leaves the machine unless you ask.

The order is what most applications need first. Routing leads because a route is what the rest attaches to: a loader, a layout, a Suspense boundary, a form that posts to an action. Then the server boundary — Server Components and Server actions — and the data, input, forms and state that cross it; then what the interface looks like and how its controls behave. After those come the pages you reach for once the core works: Rendering modes and Answering requests for what each route becomes and what answers it, Suspense and transitions, assets and caching, signing in, typed effects, GraphQL, and last what a deployed application needs around it — logs and measurements. The syntax every example is written in is Flow, the modern parts, in Start.

Which page answers which question

When you are done

Targets is where an application goes once it builds: a server or a static host, a single executable file, a phone, a terminal. Testing is in The toolchain, with the other commands you run against what you built.

Edit this pagedocs/app/guide/build-an-app/$page.mdx