Next.js Server Actions explained with a real form

A Server Action is a function that runs on the server but can be called directly from a form or a button in your component.

The old way

You wrote an API route, called it with fetch, handled loading and errors, then refetched the list. That is a lot of code for adding one row.

With a Server Action

// app/todos/page.tsx
import { revalidatePath } from "next/cache";

async function addTodo(formData) {
  "use server";
  const title = formData.get("title");
  await db.todo.create({ data: { title } });
  revalidatePath("/todos");
}

export default function Page() {
  return (
    <form action={addTodo}>
      <input name="title" required />
      <button>Add</button>
    </form>
  );
}

The form works even before JavaScript loads, and revalidatePath refreshes the list for you.

Always validate input inside the action. Anything that reaches the server can be sent by anyone, not just your form.