Server Actions são funções assíncronas que executam no servidor, mas podem ser chamadas diretamente de seus componentes (incluindo de formulários e manipuladores de eventos) — permitindo que você execute mutações (criar/atualizar/deletar) sem construir manualmente um endpoint da API. Você as marca com a diretiva "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>
);
}
O action do formulário aponta para a Server Action. Ao enviar, Next.js envia FormData para o servidor, executa a função lá e pode revalidar páginas afetadas — tudo sem rota de API e sem código de fetch no lado do cliente.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts e fetches do cliente.revalidatePath/revalidateTag atualizam dados em cache após a mutação.⚠️ 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 condensam a pilha de mutação usual (rota de API + fetch do cliente + manipulação de estado) em uma única função do servidor que você chama diretamente — a resposta do App Router para formulários e alterações de dados.
Elas reduzem boilerplate, habilitam aprimoramento progressivo e se integram com cache/revalidação, mas (como qualquer endpoint) exigem validação e verificações de autenticação dentro delas.