Server Actions zijn async-functies die op de server draaien, maar rechtstreeks vanuit je componenten kunnen worden aangeroepen (ook vanuit formulieren en event handlers) — waarmee je mutations (create/update/delete) kunt uitvoeren zonder handmatig een API-eindpunt te bouwen. Je markeert ze met de "use server" directive.
// 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>
);
}
De action van het formulier wijst naar de Server Action. Bij verzending stuurt Next.js de FormData naar de server, voert daar de functie uit en kan beïnvloede pagina's revalideren — allemaal zonder API-route en zonder client-side fetch-code.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts-handlers en client fetches te schrijven.revalidatePath/revalidateTag vernieuwen gecachte gegevens na de mutation.⚠️ 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 vallen de gebruikelijke mutation-stack (API-route + client fetch + state handling) samen tot een enkele serverfunctie die je rechtstreeks aanroept — het antwoord van de App Router op formulieren en gegevenswijzigingen.
Ze reduceren boilerplate, maken progressive enhancement mogelijk en integreren met caching/revalidatie, maar vereisen (net als elk eindpunt) validatie- en auth-controles daarin.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren