Ultimate Next.js Server Actions With Mind Blowing Example Codes

When I first started using Next.js, handling forms meant creating API routes, writing fetch calls, managing loading states, and dealing with error handling. It worked, but it felt like a lot of boilerplate for something that should be simple. Then Server Actions came along, and everything clicked.

Server Actions let you write server-side functions that you can call directly from your components. They handle form submissions, data mutations, and any server-side logic you need. No API routes, no fetch calls, no manual state management. Just write a function, mark it with ‘use server’, and use it in your form’s action prop.

In this guide, I’ll walk you through everything you need to know about Server Actions. We’ll cover the basics, form validation with Zod, handling loading states, revalidating data, working with cookies, and progressive enhancement. All with real examples from a working application.

What Are Server Actions?

Server Actions are async functions that run on the server. They’re marked with the use server directive and can be called directly from client or server components. When used with forms, they provide progressive enhancement-your forms work even if JavaScript fails to load.

Here’s the simplest example-a Server Action that creates a post:

That’s it. No API route, no fetch call, no complex setup. Just a function that runs on the server. You can call it from anywhere in your app.

Basic Form with Server Action

The simplest way to use a Server Action is with a form. Here’s a complete example:

Notice the function signature: it takes prevState and formData. The prevState is useful when using useActionState (we’ll cover that next), and formData contains all the form fields.

Now, here’s how you use it in a form:

The useActionState hook gives you the current state, the form action, and a pending flag. You can disable inputs while the form is submitting, show error messages, and display success messages-all handled automatically.

Working with Cookies

Server Actions can read and write cookies. Here’s an example that stores the last created post title:

You can read cookies in server components and display them:

Updating and Deleting with Server Actions

Server Actions work great for updates and deletes too. Here’s how to handle both:

Notice how we use .bind() to pass the postId to the action. Here’s how you’d use these actions in a form:

The formAction prop lets you have multiple submit buttons in the same form, each calling a different action. Perfect for edit and delete operations.

Progressive Enhancement

One of the best things about Server Actions is progressive enhancement. Your forms work even if JavaScript is disabled. The form submits normally, the Server Action runs, and the page updates. If JavaScript is enabled, you get the enhanced experience with loading states and instant feedback.

This means you don’t need to worry about users with slow connections or disabled JavaScript. Your forms will always work.

Complete Example: Posts Management

Let’s put it all together with a complete example. Here’s the data store:

And here’s the complete Server Actions file with all operations:

Best Practices

• Always validate input on the server, even if you validate on the client
• Use Zod or similar libraries for type-safe validation
• Return clear error messages that help users fix issues
• Use revalidatePath or revalidateTag after mutations to keep data fresh
• Handle loading states with useFormStatus for better UX
• Use useActionState for form state management
• Keep Server Actions focused on a single responsibility
• Use TypeScript for type safety in Server Actions
• Test your forms with JavaScript disabled to ensure progressive enhancement

Conclusion

Server Actions have become my go-to solution for form handling in Next.js. They eliminate the need for API routes, simplify error handling, and provide progressive enhancement out of the box. Once you get used to them, going back to the old way feels unnecessarily complicated.

The examples in this guide cover everything you need to get started: basic forms, validation, loading states, updates, deletes, cookies, and redirects. Start with the simple examples and gradually add more complexity as you need it. Before you know it, you’ll be building forms faster than ever.

Originally published at https://practicaldev.online on January 21, 2026.