For years, mutating data in Next.js meant writing an API route, calling it with fetch, managing loading state, and revalidating caches by hand. Server Actions collapse all of that into a single async function you can call directly from a form. Here is how to use them well in production.
Your First Server Action
A Server Action is an async function marked with "use server". Pass it straight to a form's action prop:
// app/actions.ts
"use server";
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";
export async function createPost(formData: FormData) {
const title = formData.get("title") as string;
await db.post.create({ data: { title } });
revalidatePath("/posts"); // refresh the cached list
}// app/posts/new/page.tsx
import { createPost } from "../../actions";
export default function NewPost() {
return (
<form action={createPost}>
<input name="title" required />
<button type="submit">Create</button>
</form>
);
}Validate Before You Trust Input
A Server Action is a public endpoint — treat every input as hostile. Validate with Zod:
import { z } from "zod";
const Schema = z.object({ title: z.string().min(3).max(120) });
export async function createPost(formData: FormData) {
const parsed = Schema.safeParse({ title: formData.get("title") });
if (!parsed.success) return { error: "Invalid title" };
// ... safe to use parsed.data
}Loading State with useFormStatus
"use client";
import { useFormStatus } from "react-dom";
export function SubmitButton() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>;
}Security Reminder
Server Actions run on the server but are callable by anyone. Always authenticate and authorize inside the action — never assume the UI restricted access.
When to Use Them
Use Server Actions for form submissions and mutations tied to your own UI. Keep traditional Route Handlers for public APIs consumed by mobile apps or third parties.
Server Actions remove an entire layer of boilerplate while keeping your data logic on the server. Combined with revalidatePath and Zod, they are the cleanest way to handle mutations in the App Router.
