Skip to main content

What are Server Actions in Next.js?

Next.jsMiddle~2 min read
Suggest an edit

Server Actions in Next.js are a way to call server code directly from components or forms, without manually creating API routes and without a separate fetch request.

Simply put: you write a function, mark it as a server function, and Next.js takes care of making it run on the server, even when the call originates from the UI.

Why they are needed

Previously, a typical scenario looked like this:

  1. A form or button in the browser
  2. fetch → API Route (/api/...)
  3. The server processes the request
  4. It returns a response

Server Actions remove this "intermediary" layer. Now the scheme is simpler:

  1. The user clicked a button or submitted a form
  2. A server function is called
  3. The server does the needed work (DB, files, secrets)

Without a separate API route and without a manual HTTP request.

What exactly a Server Action is

It is a regular async function, but with the directive:

ts
'use server'

This line tells Next.js:

"This function must run only on the server."

Example of the idea (simplified, without details):

ts
'use server' export async function createUser(formData) { // work with the database }

Such a function can be:

  • passed directly into <form action={...}>
  • called from a client component

Where the code runs

This is the key point:

  • A Server Action never runs in the browser
  • The code does not end up in the client bundle
  • You can safely use:
    • tokens
    • API keys
    • DB access
    • the file system

The user sees only the result, not the implementation.

Main advantages

  1. Less code
  • No API routes needed for simple operations
  1. Security
  • Secrets stay on the server
  • Cannot be called directly via URL
  1. Simple form handling
  • A form can call a server function without JavaScript
  1. Deep integration with rendering
  • Data can be updated immediately
  • Works with caching and revalidation

When Server Actions are especially convenient

  • Form submissions (creating, updating, deleting data)
  • Simple CRUD operations
  • Actions that logically belong to the UI
  • When a public API is not needed

Short summary in one paragraph

Server Actions in Next.js are server functions that can be called directly from components and forms, without API routes or fetch requests. They run only on the server, are secure, reduce the amount of code, and simplify working with data.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit