Next.js 35: Validar entradas y devolver errores
easy⏱ 5 mincoursenextjs
Nunca confíes en el cliente
Como una Server Action es solo un endpoint de red invocable, cualquiera puede llamarla directamente con cualquier payload, saltándose tu <form> por completo — las devtools del navegador, un script, un cliente malicioso. La validación solo cuenta si ocurre dentro de la acción, en el servidor. Mantén las verificaciones del cliente para feedback instantáneo, pero siempre vuelve a verificar en el servidor antes de tocar la base de datos.
Errores estructurados por campo
En vez de un único string de error, devuelve un objeto indexado por nombre de campo: { errors: { name: 'Requerido', comment: 'Muy corto' } }. El formulario puede entonces renderizar state.errors?.comment justo debajo del input de comentario y state.errors?.name debajo del de nombre, en vez de un banner genérico — mucho mejor UX para formularios con varios campos.
async function addComment(prevState, formData) {
const name = formData.get('name')?.toString().trim();
const text = formData.get('comment')?.toString().trim();
const errors: Record<string, string> = {};
if (!name) errors.name = 'Name is required';
if (!text) errors.comment = "Comment can't be empty";
if (Object.keys(errors).length) return { errors };
await db.comment.create({ data: { name, text } });
return { errors: null };
}
Valida name + comment
Extiende tu acción para leer name y comment desde FormData, construye un objeto errors con un mensaje por cada campo faltante, y devuelve { errors } de inmediato si hay alguno. En éxito, devuelve { errors: null } y limpia el formulario. Muestra el mensaje de error de cada campo justo debajo de su input. Mantén export default App.