The "use server" Directive

'use server' looks like a sibling of 'use client', but it solves a different problem and points in the opposite direction. It doesn't describe where a component renders — it marks a function as a Server Action: a function guaranteed to execute on the server, that a Client Component can nonetheless call as if it were a normal local function.

Inline, inside a Client Component

Placed at the top of an async function body, it marks just that one function as a Server Action:

components/LikeButton.tsx

TSX

'use client'

import { useState } from 'react'

export default function LikeButton({ postId }: { postId: string }) {
  const [likes, setLikes] = useState(0)

  async function likePost() {
    'use server'
    // This block runs on the server, even though the button that
    // calls it lives in a Client Component.
    await db.post.update({
      where: { id: postId },
      data: { likes: { increment: 1 } },
    })
  }

  return (
    <button onClick={() => { likePost(); setLikes((n) => n + 1) }}>
      ♥ {likes}
    </button>
  )
}

At the top of a whole file

More commonly, 'use server' is placed as the first line of a dedicated file. That marks every function exported from that file as a Server Action, which keeps server-only mutation logic cleanly separated from your UI components:

app/actions.ts

TSX

'use server'

import { db } from '@/lib/db'

export async function createTodo(formData: FormData) {
  const title = formData.get('title') as string
  await db.todo.create({ data: { title } })
}

export async function deleteTodo(id: string) {
  await db.todo.delete({ where: { id } })
}

components/TodoForm.tsx — calling it from a Client Component

TSX

'use client'

import { createTodo } from '@/app/actions'

export default function TodoForm() {
  return (
    <form action={createTodo}>
      <input name="title" placeholder="New todo" />
      <button type="submit">Add</button>
    </form>
  )
}

Note

This directive is conceptually the mirror image of 'use client'. 'use client' is about where a component is allowed to render (and therefore what bundle it ends up in). 'use server' is about exposing a server-only function so it can be called from the client — the function itself never ships to the browser as executable code; Next.js instead generates a secure reference the client can invoke, and the actual logic always runs on the server.

This page only covers the directive itself — what it does and where it goes. Server Actions have a lot more surface area worth its own deep dive: pending states, form validation, revalidating cached data after a mutation, optimistic UI, and more. Head to the dedicated Server Actions page for all of that.

'use server' marks a function (inline, or every export in a file) as a Server Action.
Server Actions are callable from Client Components but always execute on the server.
It is the "opposite direction" from 'use client' — it exposes a server function to the client, rather than describing where a component renders.
For the full picture on using Server Actions for mutations, see the Server Actions page.