// 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 处理程序和客户端 fetch。revalidatePath/revalidateTag 在数据变更后刷新缓存数据。⚠️ 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 将通常的数据变更堆栈（API 路由 + 客户端 fetch + 状态处理）折叠为单个您直接调用的服务器函数——App Router 对表单和数据更改的答案。
它们减少了样板代码，启用了渐进式增强，并与缓存/重新验证集成，但（像任何端点一样）需要在其中进行验证和身份验证检查。