แจ User inputแแฃ แฅแ แจ API responseแ แ
แญแ
แ แจแแแก (Validate แ แตแญแ)! แตแ
แฐแตแ แแตแแฝแ แซแ โ Production แแญ Bug แฅแแณแญแแ แญ!
Zod catches bad data before it breaks your app โ TypeScript-first schema validation.
Zod โ แ TypeScript-first แแญแ
แจแแฐแซ แจ schema แแจแแแซ (validation) library แแ! แจแแฃแ แณแณ แตแญแญแแ แ
แญแ
แ แแ แแญ? แแแแแฃ แ แแแฌแฝแ แฝแแญ แแตแฅ แจแแแฃแฑ แ แแต แแตแแ แแจแแแฅ แฅแแฝแแแ!
Define schema once โ validates data AND generates TypeScript types automatically.
npm install zod ยท import { z } from 'zod'
Form dataแฃ API responseแฃ env vars โ แ แ แแแญ แณแณแ แ Zod แแจแแแฅ (Validate แแตแจแ) แฅแแฝแแแ!
Works with React Hook Form, tRPC, Next.js, and any TypeScript project.
import { z } from 'zod'; // 1. แ แแแแชแซ Schema (แจแณแณแแ แ แญแ ) แแ แฉ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ const UserSchema = z.object({ name: z.string().min(2), email: z.string().email(), age: z.number().min(18).max(120), role: z.enum(['admin', 'user']), }); // 2. แจ TypeScript type แซแฑ (Auto) แญแแ แซแ! โโโโโโโโโโโโโ type User = z.infer<typeof UserSchema>; // 3. Validate โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ const result = UserSchema.safeParse(inputData); if (result.success) { console.log('โ Valid!', result.data); } else { console.log('โ Errors:', result.error.format()); }
// แแ แจแณแ แ แญแแถแฝ (Primitives) โโโโโโโโโโโโโโโโโโโโโโโโโโโ z.string() z.number() z.boolean() z.date() // แ String แจแฐแแแ แ แแแต (Rules) โโโโโโโโโโโโโโโโโโโโโโโโโโ z.string().min(2).max(50) // แจแแฐแ แญแแแต (Length) z.string().email() // แตแญแญแแ email แ แตแซแป (Valid email) z.string().url() // แจ website แ แตแซแป (URL) z.string().uuid() // UUID แแญแแต z.string().regex(/^\d{4}$/) // แ แฅแซแณแฝแ แแฐแญแ แฒแฐแซ // แ Number แจแฐแแแ แ แแแต โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ z.number().min(0).max(100) // แจ แฅแตแจ (Range) z.number().int() // แแ แ แแ (integers only) z.number().positive() // แจแแฎ แ แแญ (Positive numbers) // แแแฝ แจแณแณ แตแฅแตแฆแฝ (Collections) โโโโโโโโโโโโโโโโโโโโโโโ z.array(z.string()) // แ Array (string[]) z.enum(['a','b','c']) // แจแฐแแฐแ แแญแซแแฝ แฅแป แแแ แฒแแญแ แต z.optional(z.string()) // แขแแญแ แฃแญแแญแ (Optional) แฒแแ z.nullable(z.string()) // null แแแ แจแแฝแ แจแแ
แจ User registration แแญแ แฒแแ แจแแแฃแแ JSON Data แ
แญแ แตแญแญแ แแแแ แฅแแแญแแญ (Validate แฅแแตแญแ)แข
Edit the JSON and hit Validate โ see exactly what Zod catches.
แจแแญ แจแฐแแจแแฉแต แแณแแแฝ (Preset) แแจแก โ แแญแ แฐแแ แจแซแณแฝแแ แแแ โ Validate แ แแต!
Choose a preset schema and data, or write your own!
แฅแจแแแฝแ แฃแแ แต แ
แ
แ แต แจแแฐแซ (Real-time) validation โจ โ แแญแแ แแแณแฝแ แณแตแจแญแฑ แตแ
แฐแต แซแ แซแณแซแฝแแ!
Real-time validation โ each field validates as you type!
// โโ แแญแ แฒแแ + React Hook Form แฒแณแจแแ แต โโโโโโโโโโโโโโโโโโโโโ const LoginSchema = z.object({ email: z.string().email('แตแญแญแแ แขแแญแ แซแตแแแแ!'), password: z.string().min(8, 'แขแซแแต 8 แจแแฐแ แญแแแต (character) แซแตแแแแแ'), }); const { register } = useForm({ resolver: zodResolver(LoginSchema) }); // โโ แจ API Response แแจแแแฅ แฒแแแ โโโโโโโโโโโโโโโโโโโโโโ const ProductSchema = z.object({ id: z.number(), name: z.string(), price: z.number().positive(), tags: z.array(z.string()), }); const res = await axios.get('/api/product'); const product = ProductSchema.parse(res.data); // โ แแฃแฃแ แแปแ แณแญแทแ // โโ แจ Environment Variables แแจแแแฅ (Environment variables) โโ const EnvSchema = z.object({ DATABASE_URL: z.string().url(), NODE_ENV: z.enum(['development','production']), }); const env = EnvSchema.parse(process.env);
z.object() แ แแ แแ โ แณแณ แจแแแจแแ แจแ
แ
(Shape) แแตแแฝแ แ
แ แแ แฉ! แจแแซ แ แแตแ แแฅแแต แจแแ แจแฃแฝแแแ (Bugs) แแจแแจแซ แแแข Define schema once โ validate everywhere.
safeParse() = แ แแฅแณ แตแ
แฐแฑแ แซแตแแซแ แฅแแ แแฐแแ แชแซแแ แ แซแแแ (Error throw แ แซแฐแญแแ) ยท parse() = Zod error throw แฅแแฒแซแฐแญแ (แซแแญแ
แซแ แตแ
แฐแต แฅแแฒแแจแแญ) แซแฐแญแแแแข Use safeParse() for user input always.
z.infer<typeof Schema> โ TypeScript type แณแแ แแแ แณแซแตแแแ แซแฑแ แฝแ (auto-generated) แญแแ แซแ! One source of truth for both runtime and compile-time.
z.string().email().min(5).max(100) โ method-แแฝแ แ แแซแซแ (Chain แ แแตแจแ) แ แแแ Validation แ
แแแตแ แแตแแแฅ แญแปแแแข Chain validations fluently and readably.
แจแฐแแแฃ แจZod Schema แจ "zodResolver" แ แ แแแฃแฃแต (perfect integration) แแแแ แญ แแแข npm install @hookform/resolvers
safeParse() แฅแ parse() แแฉแแฑ แแแตแ แแ?