Server Actions เป็นฟังก์ชัน async ที่ทำงาน บนเซิร์ฟเวอร์ แต่สามารถเรียกได้โดยตรงจากคอมโพเนนต์ของคุณ (รวมถึงจากแบบฟอร์มและตัวจัดการเหตุการณ์) — ซึ่งช่วยให้คุณสามารถดำเนินการ mutations (สร้าง/อัปเดต/ลบ) โดยไม่ต้องสร้างเอนดพอยต์ API ด้วยตนเอง คุณทำเครื่องหมายด้วย directive "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>
);
}
action ของแบบฟอร์มชี้ไปที่ Server Action เมื่อส่งแบบฟอร์ม Next.js ส่ง FormData ไปยังเซิร์ฟเวอร์ เรียกใช้ฟังก์ชันที่นั่น และสามารถตรวจสอบความถูกต้องของหน้าที่ได้รับผลกระทบ — ทั้งหมดโดยไม่ต้องใช้เส้นทาง API และโค้ด fetch ฝั่งไคลเอนต์
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.ts และการดึงข้อมูลไคลเอนต์revalidatePath/revalidateTag รีเฟรชข้อมูล cached หลัง 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 ยุบสแต็ก mutation ธรรมชาติ (เส้นทาง API + ดึงข้อมูลไคลเอนต์ + การจัดการสถานะ) เป็นฟังก์ชันเซิร์ฟเวอร์เดียวที่คุณเรียกโดยตรง — คำตอบของ App Router สำหรับแบบฟอร์มและการเปลี่ยนแปลงข้อมูล
พวกเขาลดโค้ด boilerplate เปิดใช้ progressive enhancement และผสานรวมกับ caching/revalidation แต่ (เหมือนเอนดพอยต์ใด ๆ) ต้องการการตรวจสอบและการตรวจสอบการยืนยันตัวตนภายในพวกเขา