Stop 11 · Next.jsTopics · 13/16

Server Actions

In short

Server Actions let a form call a function that runs on the server. No separate API route, no fetch call, no JSON parsing. Just a function and a form.

Async functions marked `'use server'` that can be called directly from client components (e.g. on form submit) to run server-side logic without a separate API route.

The jaadu presses a service bell in a hotel room as a staff member arrives with a tea tray.

Think of it like this

The hotel room bell

You don't walk to the kitchen to order. You press the bell in your room, and staff come and handle it. A Server Action is that bell: your form presses it, and the server does the work and updates the page.

Watch it happen

Adding a to-do without an API route

Form

Next server

Database

POST action: addTodo

1/5Submitting the form sends a POST with the FormData. Next.js routes it to addTodo.

The big ideas

What you need to know

"use server"

Mark an async function with "use server" and it runs only on the server, even when called from a form.

Forms just work

Pass the action to <form action={...}>. It receives FormData with every field by name.

Refresh after saving

Call revalidatePath() so the page shows the new data, or redirect() to send the user elsewhere.

Treat it like an API

Anyone can call it with their own data. Check the user's login and validate every field inside.

See it in code

Walk through the code

tsx

1// app/todos/actions.ts2"use server";3import { revalidatePath } from "next/cache";4 5export async function addTodo(formData: FormData) {6  const title = String(formData.get("title") ?? "").trim();7  if (!title) return;8  await db.todo.create({ data: { title } });9  revalidatePath("/todos");10}11 12// app/todos/page.tsx13// <form action={addTodo}>14//   <input name="title" /> <button>Add</button>15// </form>

1/4"use server" at the top makes every export in this file a Server Action.

The input's name becomes the FormData key. After saving, revalidatePath makes /todos show the new item.

Save yourself the pain

Common mistakes

Oops

Skipping auth checks because 'only my form calls this'.

Do this instead

Server Actions are public endpoints. Check who the user is and validate input in every action.

Oops

Saving data and forgetting revalidatePath, then wondering why the list didn't update.

Do this instead

Revalidate the affected path or tag after every change.

Your mission

A to-do list with no API route

~30 min

Quick check

Why must you validate input inside a Server Action?

Go deeper

1Build a form that submits directly to a Server Action instead of a `fetch` call.
2Learn how Server Actions integrate with `useFormStatus`/`useActionState` for pending UI.
3Understand they're a newer alternative to hand-rolled API routes for many mutations.