Magdy Atef Zahran

إزاي تعمل تحقق من بيانات فورم التسجيل بـ Zod في next.js

أكيد قابلت قبل كده فورم تسجيل مزعج يرفض البيانات لأي سبب بدون توضيح عشان كده النهارده هنتعلم إزاي نعمل Validation احترافي باستخدام Zod في Next.js 15، بأسلوب بسيط وسهل ان شاء الله..

طيب إيه هو Zod أصلاً؟

Zod مكتبة تقدر تعمل بيها Validation بسهولة وتنظيم من غير ما تكتب كود زيادة مالوش لازمة. وميزتها إنها متوافقة مع TypeScript فهتضمن تجربة Strict & Safe وانت شغال.

يلا نبدأ خطوة بخطوة سوا

أول حاجة هنسطب Zod:

npm install zod

ولو بتستخدم react-hook-form:

npm install @hookform/resolvers

بعد كدا هنعمل Schema للفورم باستخدام Zod:

هننشئ schema بسيط للتحقق من البيانات اللي المستخدم بيدخلها:

import { z } from "zod"; const registerSchema = z.object({ name: z.string().min(3, "الاسم لازم يكون على الأقل 3 حروف"), email: z.string().email("الإيميل مش صحيح"), password: z.string().min(6, "الباسورد لازم يكون على الأقل 6 حروف"), });

هنا بنحدد إن:

✅ الاسم لازم يكون 3 حروف على الأقل

✅ الإيميل لازم يكون بصيغة صحيحة

✅ الباسورد لازم يكون 6 حروف على الأقل

بعدين هنربط الـ Schema مع react-hook-form:

لو بتستخدم react-hook-form:

import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; export default function RegisterForm() { const { register, handleSubmit, formState: { errors }, } = useForm({ resolver: zodResolver(registerSchema), }); const onSubmit = (data) => { console.log("Form Submitted:", data); }; return ( <form onSubmit={handleSubmit(onSubmit)} className="form"> <input type="text" placeholder="الاسم" {...register("name")} /> {errors.name && {errors.name.message}} <input type="email" placeholder="الإيميل" {...register("email")} /> {errors.email && {errors.email.message}} <input type="password" placeholder="الباسورد" {...register("password")} /> {errors.password && {errors.password.message}} <button type="submit">تسجيل</button> </form> ); }