Station 12 · Forms & server actions

The signal

Most of the web is two computers passing notes. The patron's browser packs an envelope. Our server reads it, does something, writes back. Then the browser unfolds the reply and rerenders the page. That round trip is the most important shape in programming, and on this stack it is shorter than you think.

Below is a miniature of our real donate form. Press Send it and watch every leg of the trip — collect, send, process, respond, rerender — in the order they happen. Read the script and you have read the actual file under app/donate.

donate.ts — one form, two sides of the wire

1// actions.ts — runs on the SERVER
2"use server";
3
4export async function donate(formData) {
5  const amount = formData.get("amount");
6  // talk to Stripe here, save to the database, etc.
7  return { ok: true, amount };
8}
9
10// page.tsx — rendered on the server, shipped to BROWSER
11<form action={donate}>
12  <input name="amount" type="number" />
13  <button type="submit">Send it</button>
14</form>

Hover any line. Then press Send it and watch every leg of the round trip light up in order.

Browser

1 · Collect
browser packs the form into a request
2 · Send
request travels across the wires
3 · Server runs
server
donate(formData) executes on our server
4 · Respond
server hands a result back to the browser
5 · React updates
the page rerenders with the result

A server action is a function the browser is allowed to call as if it were local — except it actually runs on our machine, with access to Stripe and the database. The "use server" line at the top of the file is the whole magic. Everything else is plain JavaScript.

What you just learned

The browser and the server are two computers separated by a few hundred milliseconds of wire. Most of the web is them passing notes.
A form's action attribute is the address it posts to. In Next.js you can hand it a real function — 'use server' makes that function run on our machine instead of the patron's.
The browser packs the input values into a request, the server runs the function with them, the result comes back, and React rerenders with whatever returned.
Our real donate flow is exactly this: a form, an action, a Stripe call, a return. Add a database write or an email — same shape.

Back to the Engine Room

Curriculum complete · all twelve stations open

Right this way…

The signal

1// actions.ts — runs on the SERVER

2"use server";

4export async function donate(formData) {

5 const amount = formData.get("amount");

6 // talk to Stripe here, save to the database, etc.

7 return { ok: true, amount };

8}

10// page.tsx — rendered on the server, shipped to BROWSER

11<form action={donate}>

12 <input name="amount" type="number" />

13 <button type="submit">Send it</button>

14</form>

What you just learned

The browser and the server are two computers separated by a few hundred milliseconds of wire. Most of the web is them passing notes.

A form's action attribute is the address it posts to. In Next.js you can hand it a real function — 'use server' makes that function run on our machine instead of the patron's.

The browser packs the input values into a request, the server runs the function with them, the result comes back, and React rerenders with whatever returned.

Our real donate flow is exactly this: a form, an action, a Stripe call, a return. Add a database write or an email — same shape.