Server Actions are async functions that run on the server but can be called directly from your components (including from forms and event handlers) — letting you perform mutations (create/update/delete) without manually building an API endpoint. You mark them with the "use server" directive.
;
{ revalidatePath } ;
() {
title = formData.() ;
db..({ : { title } });
();
}
// app/todos/page.tsx — wire the action straight to a form
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* no onSubmit, no fetch, no /api route */}
<input name="title" />
<button>Add</button>
</form>
);
}
The form's action points at the Server Action. On submit, Next.js sends the FormData to the server, runs the function there, and can revalidate affected pages — all with no API route and no client-side fetch code.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts handlers and client fetches.revalidatePath/revalidateTag refresh cached data after the mutation.⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and
check authorization inside them, exactly as you would a real API route.
Server Actions collapse the usual mutation stack (API route + client fetch + state handling) into a single server function you call directly — the App Router's answer to forms and data changes.
They reduce boilerplate, enable progressive enhancement, and integrate with caching/revalidation, but (like any endpoint) require validation and auth checks inside them.