Server Actions in Forms

"use server" functions

A Server Action (Server Function) is an async function marked with "use server", either inline in a Server Component or in a separate file. Pass it to a form's action prop and React submits the form data to the server, runs the function, and refreshes the UI. Forms work even before JavaScript loads (progressive enhancement). After writing data, call revalidatePath or revalidateTag so cached pages update, or redirect to another page.

Forms that run on the server

Server Actions let forms and components call server code directly, with validation and revalidation.

A guestbook with a Server Action

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; next build compiled and type-checked it successfully. The inline action validates the name, stores it (in memory for the demo) and revalidates the page. In the build output the page is static; the action triggers revalidation when it runs. The action was compiled but not exercised with curl.

import { revalidatePath } from "next/cache";

const entries: string[] = [];                    // demo only: in-memory, lost on restart

async function addEntry(formData: FormData) {
  "use server";
  const name = String(formData.get("name") ?? "").trim();
  if (name.length < 2) return;                   // always validate on the server
  entries.push(name);
  revalidatePath("/guestbook");
}

export default function GuestbookPage() {
  return (
    <section>
      <form action={addEntry}>
        <input name="name" placeholder="Your name" />
        <button type="submit">Sign</button>
      </form>
      <ul>{entries.map((e, i) => <li key={i}>{e}</li>)}</ul>
    </section>
  );
}

Use a real database

The in-memory array is only for the demo; serverless and multi-instance deployments lose or split such state.

Quick check: What marks a function as a Server Action?

• Exporting it from next.config
• The "use client" directive
• Naming it action.js
• The "use server" directive