How to Use Next.js Server Actions
Next.js Server Actions let you run server-side code directly from a component — no separate API endpoint needed. Mark a function with 'use server', call it from a form, and Next.js handles the plumbing. They're genuinely useful for form mutations. But here's the nuance: for a shared, versioned API consumed by multiple clients, a dedicated API layer is still the right choice. Here's when to use each.
Quick Answer
Server Actions let you run server-side code directly from a component without writing a separate API endpoint. Mark a function with 'use server', call it from a form or an event handler, and Next.js runs it on the server and returns the result. They are great for mutations (form submits, simple writes) in the App Router; for a shared, versioned API consumed by multiple clients, a dedicated API layer is still the better choice.
What Server Actions are
A Server Action is an async function that always executes on the server. You can call it from a <form action={...}> or from client code, and Next handles the request/response plumbing for you — no manual fetch to an endpoint required.
A basic example
// app/todos/actions.ts (untested-here)
'use server';
import { revalidatePath } from 'next/cache';
export async function createTodo(formData: FormData) {
const title = String(formData.get('title') ?? '');
if (!title) return;
// persist via your data layer here
revalidatePath('/todos');
}// app/todos/page.tsx (untested-here)
import { createTodo } from './actions';
export default function Page() {
return (
<form action={createTodo}>
<input name="title" />
<button type="submit">Add</button>
</form>
);
}When to use them (and when not to)
Use Server Actions for form submissions and simple mutations co-located with a page.
Always validate and authorize inside the action — it is a server entry point, so treat input as untrusted and check the session.
Prefer a dedicated API when many clients (web, mobile, third parties) share the same endpoints, or when you want a stable, versioned contract.
How this maps to FastStaq
FastStaq uses a dedicated Express API (server/src) as its backend rather than routing all logic through Next.js, because a shared, versioned API serves its client and background workers consistently. Server Actions are a useful Next.js feature for page-local mutations in apps that want them; FastStaq's architecture favors the explicit API layer for its core domain. Either approach can call the same data layer — the difference is where the contract lives. See how to build API routes in Next.js.
Frequently asked questions
Do Server Actions replace API routes? Not entirely — they are great for page-local mutations, but a shared/versioned API is better when multiple clients consume it.
Are Server Actions secure by default? They are server entry points, so you must validate input and check authorization inside the action.
Do they work in the Pages Router? Server Actions are an App Router feature.
