Next.js 32: Formularios con Server Actions
easy⏱ 5 mincoursenextjs
action={fn} en vez de onSubmit
En una app real de Next.js te saltas por completo onSubmit, event.preventDefault() y el fetch manual: <form action={addComment}> le dice a React que llame a addComment(formData) al enviar, donde formData es un FormData nativo construido a partir de cada input con name en el formulario. No hace falta que los inputs sean controlados — lee los valores con formData.get('nombreDelCampo').
// app/actions.ts
'use server';
export async function addComment(formData: FormData) {
const text = formData.get('comment');
await db.comment.create({ data: { text } });
}
// app/posts/[id]/page.tsx
import { addComment } from '../../actions';
export default function PostPage() {
return (
<form action={addComment}>
<input name="comment" placeholder="Write a comment…" />
<button type="submit">Post</button>
</form>
);
}
Mejora progresiva
Como action en un <form> es un atributo HTML real que Next.js conecta, el formulario funciona antes de que cargue JavaScript — una conexión lenta o un error de JS no rompen el envío, simplemente cae de vuelta a una navegación de página completa. Una vez que React hidrata, ese mismo envío ocurre sin recargar. Obtienes resiliencia gratis.
Este sandbox usa React 18
<form action={fn}> con una función necesita el react-dom de React 19; este sandbox solo trae el build UMD de React 18. Así que en el ejercicio imitamos la misma forma de datos — una función llamada con un FormData — usando un manejador onSubmit normal que construye el FormData él mismo.
Conecta una función con forma de action
Escribe commentAction(formData) — una función que reciba un FormData, no argumentos individuales — y lea el comentario con formData.get('comment'). En tu manejador de envío, construye new FormData(event.target) y pásalo directamente a commentAction. Mantén export default App.