Server Actions är asynkrona funktioner som körs på servern men kan anropas direkt från dina komponenter (inklusive från formulär och händelsehanterare) — vilket gör att du kan utföra mutationer (skapa/uppdatera/ta bort) utan att manuellt bygga en API-slutpunkt. Du markerar dem med direktivet "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>
);
}
Formulärsets action pekar på Server Action. Vid inskickning skickar Next.js FormData till servern, kör funktionen där och kan omvalidera påverkade sidor — allt utan API-väg och utan klientsidig fetch-kod.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts-hanterare och klienthämtningar.revalidatePath/revalidateTag uppdaterar cachelagrad data efter mutationen.⚠️ 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 kollapsar den vanliga muationsstacken (API-väg + klienthämtning + tillståndshantering) i en enda serverfunktion som du anropar direkt — App Routerns svar på formulär och dataändringar.
De minskar boilerplate, möjliggör progressiv förbättring och integreras med caching/omvalidering, men (som alla slutpunkter) kräver validering och autentiseringskontroller inuti dem.