Server Actions er asynkrone funksjoner som kjører på serveren, men kan kalles direkte fra komponentene dine (også fra skjemaer og hendelsesbehandlere) — som lar deg utføre mutasjoner (create/update/delete) uten å bygge et API-endepunkt manuelt. Du merker dem med "use server"-direktivet.
;
{ 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>
);
}
Skjemaets action peker på Server Action. Ved innsending sender Next.js FormData til serveren, kjører funksjonen der, og kan revalidere påvirkede sider — alt uten API-rute og uten klient-side fetch-kode.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts-håndterer og klient fetches.revalidatePath/revalidateTag oppdaterer bufret data etter mutasjonen.⚠️ 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 kollapser den vanlige mutasjons-stacken (API-rute + klient fetch + state handling) til en enkelt serverfunksjon du kaller direkte — App Routerens svar på skjemaer og dataendringer.
De reduserer boilerplate, aktiverer progressive enhancement, og integrerer med caching/revalidering, men (som alle endepunkter) krever validering og auth-sjekker inni dem.