# Nextjs Server Actions

> Implement secure Next.js Server Actions for mutations, forms, and optimistic UI. Use when building actions, form flows, auth checks, or revalidation after writes.

- Skill: `filippodesilva/nextjs-server-actions` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add filippodesilva/nextjs-server-actions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/filippodesilva/nextjs-server-actions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: FilippoDeSilva (https://skillmd.com/u/filippodesilva)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/filippodesilva/nextjs-server-actions

---

# 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

- [ ] Action validates `FormData` or arguments before processing.
- [ ] Action performs authn/authz inside the server function.
- [ ] Mutations call DAL/service code, not raw storage from components.
- [ ] Success path revalidates tags or paths.
- [ ] Redirects or thrown errors are handled in the expected control flow.

## Anti-Patterns

- **No unvalidated Server Action inputs**: Always validate with Zod before processing.
- **No skipped auth checks**: Verify session/user inside every action, not middleware.
- **No actions defined inside components**: Define in `actions.ts` to avoid closure bugs.
- **No `redirect()` in try/catch**: `redirect()` throws; catching it suppresses redirect.

## References

- [Framework Map](../references/framework-map.md)
- [Secure Action Example](references/secure-actions.md)