Validacion de formularios con React hook form, Zod, Typescript y Nextjs

Crear formularios, manejar sus estados y validar los datos de estos estados pueden ser tareas que conlleven mucho tiempo, a menos que se tengan las herramientas adecuadas, así que en este tutorial aprenderás a crear formularios en Nextjs y manejar el estado con react-hook-form, y unirlo a Zod para validar los datos, además de integrarlos con los tipos de datos y el tipado estático de Typescript. Esta es una de las formas más solidas y practicas de crear y validar formularios en el Frontend actualmente.

Código del ejemplo:

Curso Recomendados

🛒 Fazt Web

⭐ Cursos Recomendados

🗣 Redes Sociales

🎒 Servicios Recomendados

Puedes encontrar la lista de tutoriales de React en:

#nextjs #typescript #reactjs

[Pulguetafx]

Excelente video, una recomendación es que para el type de useForm se puede utilizar el z.infer<typeof userSchema> y asi trae todos los datos del schema

[andrair]

Excelente, Muchas Gracias por meter todo en TS, ya que actualmente es el estándar en la industria

[yvysunu]

Siempre cosas útiles y siempre al grano, gracias por tanto ❤

[alexnoleaz]

Excelente video Fazt!
Has pensado en hacer contenido relacionado a Arquitectura limpia y código limpio? Estaría genial!

[miltonrogrigoaguilarmachac]

Eres el mejor la verdad tuve problemas con la librería y ahora veo porque

[registro_pedagogico]

¡Hola, Gracias Fazt! Eres el mejor.
¿Tienes planificado publicar tutoriales de Sveltkit?

[gonzalo]

Muchas gracias por aportar este valioso contenido!

[daustinnmusic]

Genial fazt, pero react-hook-form tambien puede hacer validacion en su atrubuto RULES, en cada registro. 😊

[Deus-lo-Vuilt]

Gracias Fazt, justo lo que necesitaba 🚀🚀

[cristiannerylozada]

Primer comentario, gracias por tus videos! Más material pls de nestjs con aws

[Love-idgu]

Great video! ❤
Please make an example of authorization in control panel (Nextjs 14, typescript, server actions, nextauth 5, prisma, shadcn ui, react-hook-form, zod, sonner). User authorization, user registration, user roles.😘

Thank you very much!!! 😇

[christiannemenza]

Fazt, una consulta, no es muy tedioso estar escribiendo los mensajes cada rato? Hay forma de crear sobrescribir los mensajes de forma global para la aplicación?

[gerogsg]

Fazt como harias de que si queres colocar en el enum un array con los datos que hay en una base de datos por ejemplo categorias?? que harias una peticion con axios y llenarias el array con la respuesta?? todo esto en el archivo schema o esto lo harias en un page.tsx?

[ronaldos]

Hola, gracias por el conocimiento. Como hago para que el eslint me señale los errores del min 7:00 ? a mi no me salen

[cegarcia]

Hola buen tutorial.
Estoy realizando un edit ya tengo todos los campos pero la parte de la fecha no me trae el dato en el campo. alguna sugerencia?

[MarioFlores]

Duda, porque usar zod con react-hook-form, si este ultimo ya valida formularios?

[marcosecheverria]

Hola fazt qué herramienta de auto completado en terminal usas?

[HackeRandomClips]

Esos datos ya validados puedo enviarlos al backend sin problema verdad ?

[jhonnymosquera]

se puede usar zod con los server actions?

para valorar la info antes de que llegue al servidor

[gabrielariasromero]

me gustaria que hicieras un curso de como usar vim