Next.js 31: Fundamentos de Server Actions
easy⏱ 5 mincoursenextjs
La directiva "use server"
Agrega 'use server' al inicio de una función (o al inicio de un archivo) para marcar cada función exportada en él como una Server Action. Next.js convierte cada una automáticamente en un endpoint de red seguro — sin necesidad de escribir una ruta /api. Importas la acción en un Componente de Cliente y la llamas como una función normal; Next.js serializa la llamada, la ejecuta en el servidor y devuelve el resultado.
// app/actions.ts
'use server';
export async function addComment(formData: FormData) {
const text = formData.get('comment');
await db.comment.create({ data: { text } });
return { id: Date.now(), text };
}
Reglas para las Server Actions
Una Server Action debe ser async — así es como Next.js la reconoce. Sus argumentos y su valor de retorno deben ser serializables (objetos simples, strings, números, FormData — nada de funciones ni instancias de clases). El cuerpo de la función solo se ejecuta en el servidor, así que es seguro acceder directamente a una base de datos, secretos o el sistema de archivos dentro de ella.
Simula tu primera Server Action
Escribe una función addCommentAction que espere un retraso falso (setTimeout envuelto en una Promise) y devuelva un objeto de comentario nuevo — coméntala como simulación de una Server Action, ya que este sandbox no tiene un servidor real. Llámala desde el manejador de envío de un formulario, muestra un estado enviando… en el botón mientras se ejecuta, y agrega el resultado a una lista. Mantén export default App.