Server Actions huma funzjonijiet async li jaħdmu fuq is-server imma jistgħu jkunu msejħa direttament mill-komponenti tiegħek (inklużi mill-formoli u maniġġar tal-avvenimenti) — li jigħtik il-permess li tagħmel mutazzjonijiet (oħloq/ħadditsa/ħassar) mingħajr il-ħtieġa li tibni endpoint API b'mod manuali. Int timmarchalhom bid-direttiva "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>
);
}
L-attribut action tal-formola jimqiegħed fuq is-Server Action. Meta ssummettix, Next.js jibgħat FormData lis-server, iħaddem il-funzjoni hemm, u jista' jrevalida l-paġni affettwati — kollox mingħajr rotta API u mingħajr kodiċi fetch tal-client-side.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts u fetch ta' client.revalidatePath/revalidateTag jirfrixxaw id-data cache wara l-mutazzjoni.⚠️ 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 jibiddlu l-istakk ta' mutazzjoni tas-soltu (rotta API + client fetch + handling tal-istat) fi funzjoni server singola li sejjaħ direttament — ir-risposta tal-App Router għal formoli u bidliet tad-data.
Jitilfu l-boilerplate, jippermettu t-titjib progessiv, u jintegraw mal-caching/revalidazzjoni, iżda (bħal kwalunkwe endpoint) jeħtieġu validazzjoni u kontrolli auth ġuwhom.