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

  1. Define action in actions.ts with 'use server'.
  2. Parse input with a schema before touching storage or services, for example z.object({ ... }).safeParse(...) or formData.get('title') -> validated shape.
  3. Authorize inside the action; middleware alone is not enough.
  4. Delegate to DAL/service layer; keep storage details out of route UI files.
  5. Revalidate exact tags/paths owned by the mutation.
  6. Expose pending and optimistic state with useFormStatus, useActionState, useTransition, or useOptimistic as needed. Typical form wiring is <form action={createPost}> or <form action={action}>, with useFormStatus() and disabled={pending} inside the submit child.

Verify

Installs
3
GitHub Stars
575
First Seen
Jun 24, 2026