hardFrontend

What are Server Actions in Next.js and how do they work?

Q: What are Server Actions in Next.js and how do they work?

**TL;DR.** **Server Actions** are async functions marked 'use server' that **run on the server** and can be called directly from components/forms — Next.js creates an **RPC endpoint** under the hood. They handle **mutations** (DB writes, revalidation) without you writing an API route. form / button calls action RPC 'use server' fn <text class='d-sub' x='287' y='88' text-anchor='middl

842 views

Understand the problem

Server-side functions callable from the client without an API route.

nextjsserver-actionsmutationsrsc

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A Server Action mutating + revalidating

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function addTodo(formData: FormData) {
  const title = String(formData.get('title'));
  await db.todo.create({ data: { title } });   // runs on the server
  revalidatePath('/todos');                     // refresh the list
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you do optimistic updates in Next.js (useOptimistic, useActionState)?

What is Partial Prerendering (PPR) in Next.js?