next-safe-action
playground
Toggle Sidebar
Overview
Home
Core
Core Actions
Validation Errors
Middleware
Hooks
React Hooks
Optimistic Updates
Coordinating Mutations
Pending Changes
Integrations
Form Integration
React Hook Form
TanStack Query
Framework
Navigation & Framework
Offline Support
GitHub
Toggle theme
Toggle Sidebar
Core Actions
Basic action patterns: direct calls, async schemas, auth context, and output validation.
Direct Call
Basic action with inputSchema, invoked directly with useState.
View Code
Username
Password
Execute
Result:
-
Async Schema
inputSchema with an async factory function, schema is resolved at runtime.
View Code
Username
Password
Execute
Result:
-
Auth Context
authAction with chained .use() middleware, ctx.userId and ctx.sessionId available in the action.
View Code
Full Name
Age
Execute
Result:
-
No Arguments
Action without an input schema, just call it.
View Code
Execute
Result:
-
Empty Response
Action that returns void, useful for side-effect-only operations.
View Code
User ID (UUID)
Execute
Result:
-
Output Schema
Using .outputSchema() to validate and transform the return data from the action: the greeting is uppercased by an output transform.
View Code
Name
Execute
Result:
-
Expected Server Errors
Using returnServerError() to return a typed, expected server error that bypasses handleServerError. Try "out-of-stock" as the product ID.
View Code
Product ID
Buy product
Result:
-