Server Actions

Priority: P1 (HIGH)

[!WARNING] If project uses pages/ directory instead of App Router, ignore this skill entirely.

Handle form submissions and mutations without creating API endpoints.

Implementation Guidelines

• Directive: Always start file or function with 'use server'. Access formData.get('title') for typed form fields. Export async functions for mutations.
• Form Handling: Use action prop of <form> to trigger actions via action={createPost}. Use useFormStatus() for pending states — disabled={pending} on buttons. Use useActionState (React 19/Next.js 15) for action={action} form state with <form action={action}>.
• Data Refresh: Trigger UI updates using revalidatePath('/') or revalidateTag('tag-name') after successful mutation.
• Interactivity: For non-form triggers, invoke actions using useTransition hook to handle loading UI and prevent page from blocking.
• Optimistic Updates: Use useOptimistic to show expected UI state immediately before server confirms mutation.
• Security: Sanitize all inputs from FormData. Perform auth checks inside every action (await auth()). Limit file uploads by size and MIME type.