use server

use server is a React directive supported by Next.js that keeps covered functions on the server. Put it at the top of a module to mark all exported functions, or at the top of an asynchronous function to mark only that function. Server Functions can be imported into Client Components from a dedicated server module and invoked through supported interactions.

'use server'

// app/actions.ts
'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name')
  if (typeof name !== 'string' || !name.trim()) {
    throw new Error('Name is required')
  }
  // Persist the validated value on the server.
  return {name}
}

// app/page.tsx
import { createUser } from './actions'

export default function Page() {
  return (
    <form action={createUser}>
      <input name="name" />
      <button type="submit">Create user</button>
    </form>
  )
}

A file-level directive marks the exported asynchronous function as a Server Function. The form can invoke the imported function while its implementation remains on the server.