The Complete Production SOP: How to Deploy and Run React 19 Server Actions & Progressive Form Mutations in Autonomous AI Agents

---
name: "react-19-server-actions"
description: "Execute type-safe server-side mutations directly from React components with zero boilerplate."
metadata:
  author: "React"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write react 19 server action"
  - "progressive enhancement form nextjs"
  - "zod validate server action"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

'use server';

import { z } from 'zod';
import { revalidatePath } from 'next/cache';

const UpdateProfileSchema = z.object({
  userId: z.string().uuid(),
  displayName: z.string().min(2).max(50),
  email: z.string().email(),
});

export type ActionState = {
  success: boolean;
  errors?: Record<string, string[]>;
  message?: string;
};

export async function updateProfileAction(
  prevState: ActionState,
  formData: FormData
): Promise<ActionState> {
  const raw = Object.fromEntries(formData.entries());
  const validated = UpdateProfileSchema.safeParse(raw);

  if (!validated.success) {
    return {
      success: false,
      errors: validated.error.flatten().fieldErrors,
    };
  }

  try {
    // Execute database mutation here with validated.data
    revalidatePath('/dashboard/settings');
    return { success: true, message: 'Profile updated successfully.' };
  } catch (err) {
    return { success: false, message: 'Database mutation failed.' };
  }
}