AgentSkillsCN

react-server-actions

在Next.js 14+中实现React服务器操作,以安全、逐步增强的方式处理表单及服务器突变,无需API路由。在处理表单提交、执行服务器端突变、实现逐步增强、创建无需JavaScript即可工作的操作、在服务器端验证数据、突变后重新验证缓存数据、在服务器端处理文件上传、实现乐观UI更新,或构建在没有客户端JavaScript情况下优雅降级的表单时使用。

SKILL.md
--- frontmatter
name: react-server-actions
description: Implement React Server Actions in Next.js 14+ for secure, progressively enhanced form handling and server mutations without API routes. Use when handling form submissions, performing server-side mutations, implementing progressive enhancement, creating actions that work without JavaScript, validating data on the server, revalidating cached data after mutations, handling file uploads server-side, implementing optimistic UI updates, or building forms that gracefully degrade without client-side JavaScript.

React Server Actions - Form Handling

When to use this skill

  • Handling form submissions in Next.js 14+ applications
  • Performing server-side data mutations without API routes
  • Implementing progressive enhancement for forms
  • Creating actions that work without client-side JavaScript
  • Validating form data securely on the server
  • Revalidating Next.js cache after data mutations
  • Handling file uploads with server-side processing
  • Implementing optimistic UI updates with useOptimistic
  • Building accessible forms with server-first architecture
  • Integrating with database operations directly
  • Managing form state with useFormState hook
  • Creating secure mutations with server-only code

When to use this skill

  • Implementing forms, mutations in Next.js App Router.
  • When working on related tasks or features
  • During development that requires this expertise

Use when: Implementing forms, mutations in Next.js App Router.

Server Action

```typescript 'use server';

export async function createPost(formData: FormData) { const title = formData.get('title'); await db.post.create({ data: { title } }); revalidatePath('/posts'); } ```

Resources