How do Server Actions differ from Route Handlers in Next.js?

Q: How do Server Actions differ from Route Handlers in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First A Server Action is the internal phone line between two departments of the same company: quick, no directory needed, and only useful for people inside. A Route Handler is the public switchboard number printed on the website: anyone can call it, it has a stable number, and it must answer in a format outsiders understand. ## 2. The Core Idea 📌 **Interview term: Route Handler** — a route.ts file in the app directory tha

The problem

Question presented to candidate: "When would you write a Route Handler instead of a Server Action? Give me concrete cases for each."

What a strong answer should cover:

Server Actions: functions you call from your own React UI; Next.js generates the endpoint, uses POST, handles serialization and revalidation in the same round trip.
Route Handlers: route.ts files exporting HTTP methods; you design the URL, method, status codes and payloads for any client.
Use actions for mutations triggered by your own forms and buttons.
Use Route Handlers for webhooks, public or mobile APIs, file downloads, GET endpoints that others call, and anything that needs custom headers or streaming responses.
Both run on the server and both need their own authentication.

Clarifying questions expected:

"Who calls this: our React UI or someone else?" — the main deciding question.
"Does the caller need a stable URL and method?" — only Route Handlers give that.

Code / implementation expected: Yes — the same mutation as an action and as a Route Handler.

nextjs
server-actions
route-handlers
api

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

A Server Action is the internal phone line between two departments of the same company: quick, no directory needed, and only useful for people inside. A Route Handler is the public switchboard number printed on the website: anyone can call it, it has a stable number, and it must answer in a format outsiders understand.

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

The same mutation both ways, sharing one function

// lib/comments.ts
import "server-only";
export async function addComment(userId: string, postId: string, text: string) {
  return db.comment.create({ data: { userId, postId, text } });
}

// app/posts/[id]/actions.ts  -> for our own React UI
"use server";
import { revalidatePath } from "next/cache";
export async function addCommentAction(postId: string, formData: FormData) {
  const user = await requireUser();
  await addComment(user.id, postId, String(formData.get("text")));
  revalidatePath(`/posts/${postId}`);
}

// app/api/posts/[id]/comments/route.ts  -> for the mobile app
export async function POST(req: Request, ctx: { params: Promise<{ id: string }> }) {
  const user = await requireApiUser(req);          // token auth for external clients
  const { id } = await ctx.params;
  const { text } = await req.json();
  return Response.json(await addComment(user.id, id, text), { status: 201 });
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.