​
Installation

To install Next Safe Action, simply run the following command:
Terminal
pnpm add next-safe-action zod --filter app
By default, Next Safe Action uses Zod to validate inputs, but it also supports adapters for Valibot, Yup, and Typebox.

​
Basic Usage

Here is a basic example of how to use Next Safe Action to call your Server Actions: 
"use server"

import { createSafeActionClient } from "next-safe-action";
import { z } from "zod";

export const serverAction = createSafeActionClient()
  .schema(
    z.object({
      name: z.string(),
      id: z.string()
    })
  )
  .action(async ({ parsedInput: { name, id } }) => {
    // Fetch data in server
    const data = await fetchData(name, id);
    
    // Write server logic here ...
    
    // Return here the value to the client
    return data;
  });
In this example, we create an action with input validation on the server, and call it on the client to with type-safe inputs and convinient callback utilities to simplify state management and error handling.

​
Benefits

  • Simplified State Management: Next Safe Action simplifies server action state management by providing callbacks and status utilities.
  • Type-safe: By using Zod or other validation libraries, your inputs are type-safe and validated end-to-end.
  • Easy Integration: Next Safe Action is extremely easy to integrate, and you can incrementally use more of its feature like optimistic updates and middlewares.
For more information and detailed documentation, visit the Next Safe Action website.