{"library":"next-safe-action","title":"Type-Safe Next.js Server Actions","description":"next-safe-action is a library designed for Next.js projects to create type-safe and validated Server Actions. It leverages modern Next.js, React, and TypeScript features to ensure end-to-end type safety from client-side component calls to server-side action execution. The current stable version is 8.5.2, with minor and patch releases occurring frequently to refine types, add features, and improve developer experience. Key differentiators include robust input/output validation, a flexible middleware system for authorization or logging, advanced server error handling, and support for optimistic updates, making it a powerful tool for building reliable and predictable data mutations in Next.js applications.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install next-safe-action"],"cli":null},"imports":["import { createSafeActionClient } from 'next-safe-action';","import { useAction } from 'next-safe-action/hook';","const action = client.action(schema, async (input) => { /* ... */ });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createSafeActionClient } from 'next-safe-action';\nimport { z } from 'zod';\nimport { useAction } from 'next-safe-action/hook';\n\n// server/actions.ts\nexport const actionClient = createSafeActionClient();\n\nexport const addTodo = actionClient\n  .schema(z.object({ text: z.string().min(1) }))\n  .action(async ({ text }) => {\n    // Simulate database operation\n    await new Promise(resolve => setTimeout(resolve, 500));\n    console.log(`Adding todo: ${text}`);\n    return { success: true, newTodo: { id: Date.now(), text } };\n  });\n\n// app/page.tsx (or any client component)\n'use client';\n\nimport { useState } from 'react';\nimport { addTodo } from '@/server/actions'; // Adjust path as needed\n\nexport default function TodoForm() {\n  const [todoText, setTodoText] = useState('');\n  const { execute, result, status } = useAction(addTodo, {\n    onSuccess: (data) => {\n      console.log('Todo added successfully:', data?.newTodo);\n      setTodoText('');\n    },\n    onError: (error) => {\n      console.error('Failed to add todo:', error);\n    }\n  });\n\n  const isLoading = status === 'executing';\n\n  return (\n    <form onSubmit={(e) => {\n      e.preventDefault();\n      execute({ text: todoText });\n    }}>\n      <input\n        type=\"text\"\n        value={todoText}\n        onChange={(e) => setTodoText(e.target.value)}\n        placeholder=\"New todo item\"\n        disabled={isLoading}\n      />\n      <button type=\"submit\" disabled={isLoading}>\n        {isLoading ? 'Adding...' : 'Add Todo'}\n      </button>\n      {result.validationErrors?.text && (\n        <p style={{ color: 'red' }}>{result.validationErrors.text[0]}</p>\n      )}\n      {result.serverError && (\n        <p style={{ color: 'red' }}>{result.serverError}</p>\n      )}\n    </form>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to define a type-safe server action with input validation using Zod and then execute it from a client component using the `useAction` hook, handling loading states and displaying errors.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}