Server Actions son funciones async que se ejecutan en el servidor pero pueden ser llamadas directamente desde tus componentes (incluyendo formularios y manejadores de eventos) — permitiéndote realizar mutaciones (crear/actualizar/eliminar) sin construir manualmente un endpoint de API. Las marcas con la directiva "use server".
// app/todos/actions.ts
"use server";
import { revalidatePath } from "next/cache";
export async function createTodo(formData: FormData) {
const title = formData.get("title") as string;
await db.todo.create({ data: { title } }); // runs on the server — DB access, secrets
revalidatePath("/todos"); // refresh the cached page with new data
}
// 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>
);
}
El atributo action del formulario apunta a la Server Action. Al enviar, Next.js envía los FormData al servidor, ejecuta la función allí, y puede revalidar las páginas afectadas — todo sin una ruta API y sin código fetch del lado del cliente.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts y fetches del cliente.revalidatePath/revalidateTag actualizan datos cacheados después de la mutación.⚠️ 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 colapsan la pila usual de mutaciones (ruta API + fetch del cliente + manejo de estado) en una única función de servidor que llamas directamente — la respuesta del App Router para formularios y cambios de datos.
Reducen boilerplate, habilitan mejora progresiva, e se integran con caching/revalidación, pero (como cualquier endpoint) requieren validación y verificaciones de autenticación dentro de ellas.