React Server Actions: Replace Your REST API with Server Functions

What Are Server Actions?

Server Actions are async functions that run on the server but can be called from React client components as if they were regular JavaScript functions. Annotate a function with 'use server' and it becomes a Server Action. Under the hood, Next.js creates a secure POST endpoint and handles the serialization/deserialization automatically. This eliminates boilerplate API routes for most form submissions and mutations.

Creating Your First Server Action

Define Server Actions in a file with 'use server' at the top, or inline in a server component with 'use server' inside the async function body. Pass the action to a form's action prop or call it directly from an event handler in a client component. The action receives FormData when used as a form action, or regular arguments when called programmatically.

Form Handling with Server Actions

Pass a Server Action to the HTML form's action attribute for progressive enhancement — the form works even without JavaScript. Use the useActionState hook (formerly useFormState in Next.js 14) to get the action's return value and pending state. useFormStatus gives child components access to the parent form's pending state — use it to disable the submit button while the action is running.

Validation and Error Handling

Validate input inside your Server Action using Zod. Return a structured result object: { success: true, data: ... } or { success: false, errors: { field: message } }. On the client, check the result and display field-level errors using the form state. This pattern keeps validation logic on the server (where it is safe) while giving users immediate, specific feedback about what to correct.

Revalidating Data After Mutations

After a mutation in a Server Action, call revalidatePath() or revalidateTag() to invalidate cached page data and trigger a refetch. Next.js will re-render the affected server components with fresh data. This replaces the manual cache invalidation you would do with TanStack Query's queryClient.invalidateQueries() in a traditional REST API setup.

Security Considerations

Server Actions are not a magic security solution — they are still HTTP endpoints. Validate all input, check authentication in every action (do not rely on UI to hide actions from unauthorized users), and never expose sensitive business logic based solely on client-side conditions. Next.js adds CSRF protection automatically for Server Actions called from the same origin, but actions called from external clients require additional authentication.