nextjs-server-actions
Installation
SKILL.md
Server Actions
Priority: P1 (HIGH)
[!WARNING] If project uses
pages/directory instead of App Router, ignore this skill entirely.
Build action files as secure server entrypoints, not as thin wrappers around unsafe form data.
Recipe
- Define action in
actions.tswith'use server'. - Parse input with a schema before touching storage or services, for example
z.object({ ... }).safeParse(...)orformData.get('title')-> validated shape. - Authorize inside the action; middleware alone is not enough.
- Delegate to DAL/service layer; keep storage details out of route UI files.
- Revalidate exact tags/paths owned by the mutation.
- Expose pending and optimistic state with
useFormStatus,useActionState,useTransition, oruseOptimisticas needed. Typical form wiring is<form action={createPost}>or<form action={action}>, withuseFormStatus()anddisabled={pending}inside the submit child.