next-safe-action

Implements type-safe server actions with middleware chains and optimistic updates in Next.js.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/gengirish/dropflow --skill next-safe-action-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-safe-action
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/next-safe-action
Command: npx skills add https://github.com/gengirish/dropflow --skill next-safe-action-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next-safe-action.

What problem does it solve? Building server actions in Next.js without a structured pattern leads to inconsistent authentication checks, missing input validation, and scattered error handling across your codebase. This Skill provides a standardized pattern for creating type-safe, tenant-scoped server actions using next-safe-action in the DropFlow project. ## Core Features & Use Cases - Middleware Chains: Compose reusable clients like authAction and adminAction that inject authenticated context (userId, tenantId, tenantPrisma) into every action. - Schema-Validated Actions: Define actions with Zod schemas from @dropflow/types so inputs are parsed and validated before execution. - Optimistic Updates: Use useOptimisticAction on the client to update UI state immediately while the server mutation runs. - Use Case: When adding a new createOrder action in actions/orders/create-order.ts, follow this pattern to get authentication, tenant isolation, validation, and cache revalidation with minimal boilerplate. ## Quick Start Ask the AI to create a new authenticated server action for a specific domain following the next-safe-action pattern in this project.

Frequently Asked Questions about next-safe-action

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a type-safe server action in Next.js?▼

Use next-safe-action to chain a base client with middleware, attach a Zod schema via .schema(), and define the handler in .action(). The parsed input and injected context are fully typed, and the action file must start with the "use server" directive.

How to add authentication middleware to next-safe-action?▼

Create a middleware with .use() on the base client that verifies the session and returns next({ ctx }) with user data. Downstream actions then receive this context, and you can chain additional middleware like admin role checks on top.

Does next-safe-action support optimistic updates in React?▼

Yes, the useOptimisticAction hook accepts currentState and an updateFn that computes the optimistic state from the action input. The UI reflects the new state immediately while the server action executes in the background.

How are validation errors handled in next-safe-action?▼

When input fails Zod schema validation, the action does not execute and the client receives validationErrors in the result object from useAction. Server-thrown errors are surfaced through the handleServerError callback as result.serverError.

When should I use adminAction instead of authAction?▼

Use adminAction for operations restricted to administrators, such as settings changes, workflow configuration, and tenant management. It extends authAction by verifying the ADMIN role and adding it to the context before the action runs.