with one click
nextjs-server-actions
Implement mutations, forms, and RPC-style calls with Next.js Server Actions. Use when implementing Server Actions, form mutations, or RPC-style data mutations in Next.js.
Menu
Implement mutations, forms, and RPC-style calls with Next.js Server Actions. Use when implementing Server Actions, form mutations, or RPC-style data mutations in Next.js.
| name | nextjs-server-actions |
| description | Implement mutations, forms, and RPC-style calls with Next.js Server Actions. Use when implementing Server Actions, form mutations, or RPC-style data mutations in Next.js. |
| metadata | {"triggers":{"files":["app/**/actions.ts","src/app/**/actions.ts","app/**/*.tsx","src/app/**/*.tsx"],"keywords":["use server","Server Action","revalidatePath","useFormStatus"]}} |
[!WARNING] If project uses
pages/directory instead of App Router, ignore this skill entirely.
Handle form submissions and mutations without creating API endpoints.
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.
Form: <form action={createPost}> (Progressive enhancements work without JS).
Event Handler: onClick={() => createPost(data)}.
Pending State: Use useFormStatus hook (must inside component rendered within form).
Always validate inputs with z.object({ schema and safeParse before processing. Check authorization within action. See Secure Action Example.
Use useActionState (React 19/Next.js 15+) for state handling and useFormStatus for button loading states.
redirect() for success navigation; it throws error that Next.js catches to handle redirect.actions.ts to avoid closure bugs.redirect() in try/catch: redirect() throws; catching it suppresses redirect.Standardize BRD and BRD-lite discovery for business goals, stakeholder impact, current-to-future state, and measurable value outcomes. Use when creating BRD, business case, project justification, ROI narrative, or AS-IS to TO-BE scope.
Standardize PRD discovery and drafting for product scope, user outcomes, requirement IDs, and acceptance criteria. Use when creating PRD, product requirements, feature specification, or acceptance criteria plan.
Standardize SRS and FRS specifications for technical behavior, interfaces, data contracts, quality constraints, and verification mapping. Use when writing SRS, functional specification, system behavior requirements, API/data contracts, or non-functional thresholds.
Clarify a rough product or engineering idea into a BRD-lite brief (Why) with measurable business value.
Turn an approved PRD or implementation goal into SRS/FRS technical requirements (How), architecture, contracts, and verification decisions.
Plan a feature from BRD-lite brief or clear intent into PRD (What), decisions, implementation plan, and task slices.