Como criar uma Server Action? §

---

Para criar Server Actions você precisa atribuir a diretiva "use server" no código, e para isso existem dois locais para colocá-lo.

As Server Actions podem ser definidas dentro de Server Components usando a diretiva "use server" no início do corpo de uma função assíncrona.

// app/page.tsx
 
// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}

Note

Você também pode colocar essa diretiva de nível de módulo (topo do arquivo) para indicar ao Next.js que todas as funções exportadas serão tratadas como server action.

Client Components podem importar Server Actions que foram definidas com a diretiva "use server" apenas de nível de módulo.

// app/actions.ts
 
'use server'
 
export async function create() {
  // ...
}

// app/ui/button.tsx
 
import { create } from '@/app/actions'
 
export function Button() {
  return (
    // ...
  )
}

Também é possível passar uma Server Action como props para um Client Component.

<ClientComponent updateItem={updateItem} />

// app/client-component.jsx
 
'use client'
 
export default function ClientComponent({ updateItem }) {
  return <form action={updateItem}>{/* ... */}</form>
}

Referências §

---

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations