Playground

The playground is a live Next.js application demonstrating next-safe-action features. Use it to experiment with the library or as a reference for your own implementation.

Live demo

Try the deployed playground:

Open Playground

Live Next.js app showcasing actions, hooks, validation, and middleware.

Run locally

You can run the playground locally from the monorepo:

Clone and install

git clone https://github.com/TheEdoRan/next-safe-action.git
cd next-safe-action
pnpm install

Build the library and start the playground

pnpm run build:lib && pnpm run pg

This builds the next-safe-action package first, then starts the playground Next.js dev server.

Source code

Browse the playground source to see how actions are defined and used:

Playground source

Full source code on GitHub, including actions, components, and middleware examples.

What's covered

The playground demonstrates:

Defining actions with input and output validation
Using useAction and useOptimisticAction hooks
Middleware chains with authentication
Form actions with progressive enhancement
Error handling patterns
Bind arguments

Want to contribute improvements to the playground? See Contributing for how to get started.