Server Actions sono funzioni async che girano sul server ma possono essere chiamate direttamente dai tuoi componenti (incluse form e event handler) — permettendoti di eseguire mutazioni (create/update/delete) senza dover costruire manualmente un endpoint API. Le contrassegni con la direttiva "use server".
;
{ 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>
);
}
L'attributo action del form punta alla Server Action. Al submit, Next.js invia FormData al server, esegue la funzione lì, e può revalidare le pagine interessate — tutto senza API route e senza codice fetch lato client.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts e fetch client.revalidatePath/revalidateTag aggiornano i dati cachati dopo la mutazione.⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and
check authorization inside them, exactly as you would a real API route.
Le Server Actions collassano lo stack di mutazione consueto (API route + client fetch + state handling) in una singola funzione server che chiami direttamente — la risposta dell'App Router per form e cambiamenti di dati.
Riducono il boilerplate, abilitano progressive enhancement, e si integrano con caching/revalidation, ma (come qualsiasi endpoint) richiedono validazione e controlli auth al loro interno.