Server Actions adalah fungsi async yang berjalan di server tetapi dapat dipanggil langsung dari komponen Anda (termasuk dari bentuk dan penanganan peristiwa) — memungkinkan Anda melakukan mutasi (buat/perbarui/hapus) tanpa perlu membuat titik akhir API secara manual. Anda menandainya dengan direktif "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>
);
}
Atribut action bentuk menunjuk ke Server Action. Saat dikirim, Next.js mengirim FormData ke server, menjalankan fungsi di sana, dan dapat memvalidasi kembali halaman yang terpengaruh — semuanya tanpa rute API dan tanpa kode fetch sisi klien.
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts dan pengambilan klien.revalidatePath/revalidateTag menyegarkan data yang di-cache setelah mutasi.⚠️ 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 mengubah tumpukan mutasi biasa (rute API + pengambilan klien + penanganan status) menjadi fungsi server tunggal yang Anda panggil langsung — jawaban App Router untuk bentuk dan perubahan data.
Mereka mengurangi boilerplate, memungkinkan peningkatan progresif, dan terintegrasi dengan caching/validasi ulang, tetapi (seperti titik akhir apa pun) memerlukan validasi dan pemeriksaan auth di dalamnya.