name: react-server-actions description: 在Next.js 14+中实现React服务器动作,用于安全、渐进增强的表单处理和服务器端突变,无需API路由。使用场景包括处理表单提交、执行服务器端突变、实现渐进增强、创建无需客户端JavaScript的动作、在服务器上安全验证数据、突变后重新验证缓存数据、服务器端处理文件上传、实现乐观UI更新,或构建在无客户端JavaScript时优雅降级的表单。
React服务器动作 - 表单处理
何时使用此技能
- 在Next.js 14+应用中处理表单提交
- 执行无需API路由的服务器端数据突变
- 为表单实现渐进增强
- 创建无需客户端JavaScript的动作
- 在服务器上安全验证表单数据
- 在数据突变后重新验证Next.js缓存
- 使用服务器端处理处理文件上传
- 使用useOptimistic实现乐观UI更新
- 构建以服务器为先架构的可访问表单
- 直接集成数据库操作
- 使用useFormState钩子管理表单状态
- 创建仅服务器代码的安全突变
何时使用此技能
- 在Next.js App Router中实现表单和突变。
- 当处理相关任务或功能时
- 在需要此专业知识的开发过程中
使用时机:在Next.js App Router中实现表单和突变。
服务器动作
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
await db.post.create({ data: { title } });
revalidatePath('/posts');
}