Next.js 14 Server Actions 全面指南

# Next.js 14 Server Actions 全面指南 ## 什么是 Server Actions？ Server Actions 是 Next.js 14 引入的服务端数据变更方案，允许你直接在组件中定义服务端函数，取代传统的 API Route。 ## 基本用法 ```tsx // app/posts/new/page.tsx async function createPost(formData: FormData) { 'use server'; const title = formData.get('title') as string; const content = formData.get('content') as string; await db.post.create({ data: { title, content, authorId: getCurrentUserId() } }); revalidatePath('/posts'); redirect('/posts'); } export default function NewPostPage() { return ( 发布文章 ); } ``` ## 配合 useFormState 处理错误 ```tsx 'use client'; import { useFormState } from 'react-dom'; function LoginForm() { const [state, formAction] = useFormState(loginAction, { error: null, }); return ( {state.error && {state.error}} ); } ``` ## 安全注意事项 1. Server Actions 本质是 POST 端点，需要做权限校验 2. 永远不要信任 formData，必须服务端校验 3. 使用 `zod` 做输入验证 ```typescript import { z } from 'zod'; const PostSchema = z.object({ title: z.string().min(1).max(200), content: z.string().min(10), }); async function createPost(formData: FormData) { 'use server'; const parsed = PostSchema.safeParse({ title: formData.get('title'), content: formData.get('content'), }); if (!parsed.success) { return { error: parsed.error.flatten() }; } // ... 安全地使用 parsed.data } ``` ## 与 API Route 的对比 Server Actions 适合表单提交和数据变更；API Route 适合第三方集成、WebHook、跨域访问。两者可共存。