Next.js 15 Server Actions 与表单处理实践

Next.js 15 Server Actions 与表单处理实践概述Server Actions 在 Next.js 15 中提供了无刷新、类型安全且无需显式 API 路由的表单提交流。本文基于官方稳定能力验证 `"use server"`、`FormData`、`revalidatePath/revalidateTag` 与会话读写，给出可落地模板与安全注意事项。关键参数/概念`"use server"`: 将函数标记为 Server Action（仅服务端执行）。`FormData`: 直接在 Action 中接收并解析表单数据（无需手写 `bodyParser`）。失效与更新：`revalidatePath(path)`、`revalidateTag(tag)` 精确失效缓存与增量更新。会话与请求上下文：`cookies()`、`headers()` 在 Action 中可读写认证与请求头。数据获取缓存：配合 `fetch` 的 `cache/no-store` 与 `next.revalidate` 控制缓存一致性。实践/示例// app/actions/save-post.ts "use server"; import { revalidatePath, revalidateTag, cookies } from "next/cache"; export async function savePost(formData: FormData) { const title = String(formData.get("title") || ""); const content = String(formData.get("content") || ""); if (!title || !content) { throw new Error("标题与内容为必填"); } // 可选：会话读取（例如 CSRF/用户态校验） const session = cookies().get("session")?.value || "anonymous"; // 写入数据库（伪代码，替换为实际 ORM/SDK） await db.posts.insert({ title, content, author: session }); // 精确失效与刷新页面/列表 revalidatePath("/posts"); revalidateTag("posts:list"); return { ok: true }; } // app/posts/new/page.tsx（Server Component） import { savePost } from "@/app/actions/save-post"; export default function NewPostPage() { return ( <form action={savePost} className="space-y-4"> <input name="title" placeholder="标题" required /> <textarea name="content" placeholder="内容" required /> <button type="submit">提交</button> </form> ); } // 数据读取侧（配合 tag 进行增量更新） export async function getPosts() { const res = await fetch("https://api.example.com/posts", { next: { tags: ["posts:list"], revalidate: 60 }, cache: "force-cache", }); return res.json(); } 验证方法表单提交流：在开发与生产环境分别提交，通过页面刷新与数据列表变化验证 `revalidatePath/revalidateTag` 的生效。缓存一致性：切换 `cache/no-store` 与 `next.revalidate` 数值（如 60/300），观察接口命中率与页面数据一致性。会话上下文：设置/清除 `cookies()` 值进行权限校验与行为分支验证。注意事项Server Actions 仅在服务器执行，避免调用浏览器专属 API；与 Edge Runtime 搭配时使用 Web API（如 `crypto.subtle`）。安全治理：对 `FormData` 做严格校验与类型约束，防止注入与越权；必要时引入 CSRF 校验。版本兼容：示例基于 Next.js 15 验证，需确保 `app` 目录与 React 18+ 环境。