Suggest an edit

Improve this article

Refine the answer for “What are Server Actions in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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
2. **Security**
  - Secrets stay on the server
  - Cannot be called directly via URL
3. **Simple form handling**
  - A form can call a server function without JavaScript
4. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts418 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.