> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Next Safe Action

> A powerful library for managing and securing your Next.js Server Actions.

### Installation

To install Next Safe Action, simply run the following command:

```sh Terminal theme={"system"}
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:

<CodeGroup>
  ```ts action.ts theme={"system"}
  "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;
    });
  ```

  ```tsx my-component.tsx theme={"system"}
  "use client"

  import { serverAction } from "./action"
  import { useAction } from "next-safe-action/hooks";
  import { toast } from "@repo/design-system/components/ui/sonner";

  function MyComponent() {
    const { execute, isPending } = useAction(serverAction, {
      onSuccess() {
        // Display success message to client
        toast.success("Action Success");
      },
      onError({ error }) {
        // Display error message to client
        toast.error("Action Failed");
      },
    });

    const onClick = () => {
      execute({ name: "zopio", id: "example" });
    };

    return (
      <div>
        <Button disabled={isPending} onClick={onClick}>
          Click to call action
        </Button>
      </div>
    );
  }
  ```
</CodeGroup>

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

* <Icon icon="check" iconType="solid" /> **Simplified State Management**: Next Safe Action simplifies server action state management by providing callbacks and status utilities.
* <Icon icon="check" iconType="solid" /> **Type-safe**: By using Zod or other validation libraries, your inputs are type-safe and validated end-to-end.
* <Icon icon="check" iconType="solid" /> **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](https://next-safe-action.dev).