Server Actions — Calling Server Code From Client Components

Before server actions, every data mutation in a Next.js app followed the same pattern: create an API route, write a fetch call in the client, handle loading/error states, manually revalidate cached data. For a simple "update user name" feature, you'd write code in three different files.

Server actions collapse that into one: a function marked with "use server" that runs on the server but can be called directly from client components. No API route. No fetch. No manual serialization.

The Basics

A server action is an async function with the "use server" directive:

// app/actions.ts
"use server";
 
export async function updateUsername(formData: FormData) {
  const username = formData.get("username") as string;
 
  await db.user.update({
    where: { id: getCurrentUserId() },