Recipe

Server Actions

Async functions that run on the server, callable directly from your React components. No API routes, no boilerplate.

The Pattern

'use server'

export async function createItem(formData: FormData) {
  const title = formData.get('title')
  // validate, mutate DB, revalidate
  revalidatePath('/items')
}

Form Integration

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

export function Form() {
  return (
    <form action={createItem}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  )
}

Non-Form Usage

'use client'
import { useTransition } from 'react'
import { deleteItem } from '@/app/actions'

export function DeleteButton({ id }: { id: string }) {
  const [isPending, startTransition] = useTransition()
  return (
    <button
      onClick={() => startTransition(() => deleteItem(id))}
      disabled={isPending}
    >
      {isPending ? 'Deleting...' : 'Delete'}
    </button>
  )
}

Key Rules

•Must be async and marked 'use server'
•Accept serializable arguments only — FormData, plain objects, primitives
•Call revalidatePath or revalidateTag after mutations
•Use useTransition for pending states in client components

← Browse all recipes