## Analogi Sederhana Bayangin kamu punya bouncer di club (aplikasi kamu). **Manual validation** kayak bouncer yang cuma ngecek ID card pake mata - bisa salah, bisa ketipu, dan harus tulis manual rules-nya. **Zod** kayak bouncer pake scanner canggih - define rules sekali, dia auto-check semua kriteria, reject yang ga valid, dan kasih report jelas kenapa ditolak. Plus, scanner-nya langsung sync sama database kamu (TypeScript types). ## Kenapa Zod Ada? Masalah dengan data validation di TypeScript: **Masalah 1: Gap Runtime vs Compile Time** ```typescript // TypeScript types only exist at compile time interface User { email: string age: number } // At runtime, this could be ANYTHING const user = await request.json() as User // No actual validation! Runtime data bisa apa aja ``` **Masalah 2: Manual Validation Ribet Banget** ```typescript function validateUser(data: any) { if (!data.email || typeof data.email !== 'string') { throw new Error('Invalid email') } if (!data.email.includes('@')) { throw new Error('Email must contain @') } if (!data.age || typeof data.age !== 'number') { throw new Error('Invalid age') } if (data.age < 13) { throw new Error('Must be at least 13') } // So much boilerplate... } ``` **Masalah 3: Types & Validation Bisa Out of Sync** ```typescript // Type definition interface User { email: string age: number } // Separate validation (can drift apart) function validateUser(data: any) { // Manual validation yang bisa out-of-sync sama type } ``` **Solusinya: Zod** ```typescript import { z } from 'zod' // Define schema - single source of truth const userSchema = z.object({ email: z.string().email(), age: z.number().min(13) }) // Infer TypeScript type from schema type User = z.infer // Runtime validation const user = userSchema.parse(data) // If valid, user is typed correctly // If invalid, throws with clear error messages ``` ## Zod vs Library Lain ### Zod vs Yup | Aspek | Zod | Yup | |-------|-----|-----| | TypeScript | First-class | Community types | | Type Inference | Auto | Manual | | Bundle Size | Kecil (8KB) | Lebih besar (15KB) | | Schema Composition | Excellent | Good | | Error Messages | Clear | Good | | Learning Curve | Rendah | Rendah | ### Zod vs Joi | Aspek | Zod | Joi | |-------|-----|-----| | TypeScript | Native | @types | | Type Safety | Full | | | ESM Support | | | | Bundle Size | 8KB | 146KB | | Server/Client | Keduanya | Server aja | **Kapan Pakai Zod?** - Project TypeScript (type inference-nya mantap banget) - Form validation di frontend - API input validation - Environment variables validation - Semua data dari external sources (API, user input, files) **Kapan JANGAN Pakai Zod?** - Project JavaScript murni (overhead-nya ga worth it) - Validation super simple (overkill) - Butuh fitur validation library yang sangat spesifik - Bundle size kritis dan validation-nya simple ## Setup Guide (2 Menit) ### Step 1: Install ```bash npm install zod ``` That's it! Zero config, zero dependencies. ### Step 2: Basic Usage ```typescript import { z } from 'zod' // Define schema const schema = z.string() // Validate with parse (throws on error) const result = schema.parse('hello') // 'hello' schema.parse(123) // Throws ZodError // Or use safeParse (returns result object) const result = schema.safeParse('hello') if (result.success) { console.log(result.data) // 'hello' } else { console.log(result.error) // ZodError } ``` ## Contoh Real-World: Form Checkout E-commerce Skenario: Bikin checkout form dengan validation rules yang kompleks. ### 1. Define Checkout Schema ```typescript // schemas/checkout.ts import { z } from 'zod' export const checkoutSchema = z.object({ // Personal info firstName: z.string() .min(2, 'First name must be at least 2 characters') .max(50, 'First name too long'), lastName: z.string() .min(2, 'Last name must be at least 2 characters') .max(50, 'Last name too long'), email: z.string() .email('Invalid email address') .toLowerCase(), phone: z.string() .regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number'), // Shipping address address: z.object({ street: z.string().min(5, 'Street address required'), city: z.string().min(2, 'City required'), state: z.string().length(2, 'Use 2-letter state code'), zipCode: z.string().regex(/^\d{5}(-\d{4})?$/, 'Invalid ZIP code'), country: z.string().default('US') }), // Payment paymentMethod: z.enum(['credit_card', 'paypal', 'bank_transfer']), // Conditional: credit card fields only if payment method is credit_card cardNumber: z.string().optional(), cardExpiry: z.string().optional(), cardCVV: z.string().optional(), // Optional notes: z.string().max(500, 'Notes too long').optional(), // Agreement termsAccepted: z.literal(true, { errorMap: () => ({ message: 'You must accept terms and conditions' }) }) }).refine((data) => { // Custom validation: if credit card, require card fields if (data.paymentMethod === 'credit_card') { return !!(data.cardNumber && data.cardExpiry && data.cardCVV) } return true }, { message: 'Credit card details required', path: ['cardNumber'] }) // Infer TypeScript type export type CheckoutData = z.infer ``` ### 2. React Form Component ```typescript // components/CheckoutForm.tsx 'use client' import { useState } from 'react' import { checkoutSchema, CheckoutData } from '@/schemas/checkout' export default function CheckoutForm() { const [formData, setFormData] = useState>({ paymentMethod: 'credit_card' }) const [errors, setErrors] = useState>({}) const [isSubmitting, setIsSubmitting] = useState(false) function handleSubmit(e: React.FormEvent) { e.preventDefault() setIsSubmitting(true) setErrors({}) // Validate with Zod const result = checkoutSchema.safeParse(formData) if (!result.success) { // Parse errors into field-specific messages const fieldErrors: Record = {} result.error.issues.forEach((issue) => { const path = issue.path.join('.') fieldErrors[path] = issue.message }) setErrors(fieldErrors) setIsSubmitting(false) return } // Data is valid and typed! submitOrder(result.data) } async function submitOrder(data: CheckoutData) { try { const response = await fetch('/api/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) if (response.ok) { alert('Order placed successfully!') } } catch (error) { alert('Failed to place order') } finally { setIsSubmitting(false) } } function updateField(field: string, value: any) { setFormData(prev => ({ ...prev, [field]: value })) } return (

{/* Personal Info */}

Personal Information

updateField('firstName', e.target.value)} /> {errors.firstName && {errors.firstName}}

updateField('lastName', e.target.value)} /> {errors.lastName && {errors.lastName}}

updateField('email', e.target.value)} /> {errors.email && {errors.email}}

{/* Payment Method */}

Payment Method

{formData.paymentMethod === 'credit_card' && ( <> updateField('cardNumber', e.target.value)} /> {errors.cardNumber && {errors.cardNumber}} )}

{/* Terms */}

updateField('termsAccepted', e.target.checked)} /> I accept the terms and conditions {errors.termsAccepted && {errors.termsAccepted}}

) } ``` ### 3. API Route Validation ```typescript // app/api/checkout/route.ts import { NextResponse } from 'next/server' import { checkoutSchema } from '@/schemas/checkout' export async function POST(request: Request) { const body = await request.json() // Validate incoming data const result = checkoutSchema.safeParse(body) if (!result.success) { return NextResponse.json( { error: 'Validation failed', issues: result.error.issues }, { status: 400 } ) } // Data is valid and fully typed! const order = result.data // Process order... await processPayment(order) await createOrder(order) await sendConfirmationEmail(order.email) return NextResponse.json({ success: true }) } ``` **Yang Kamu Dapat:** - Single schema definition (DRY) - TypeScript types auto-inferred - Runtime validation di API boundary - Frontend validation dengan schema yang sama - Error messages yang jelas per field - Conditional validation (contoh credit card) ## Pattern yang Sering Dipakai ### Transform Data ```typescript const emailSchema = z.string() .email() .transform(val => val.toLowerCase().trim()) emailSchema.parse(' USER@EXAMPLE.COM ') // 'user@example.com' ``` ### Optional with Default ```typescript const configSchema = z.object({ port: z.number().default(3000), host: z.string().default('localhost') }) configSchema.parse({}) // { port: 3000, host: 'localhost' } ``` ### Union Types ```typescript const idSchema = z.union([z.string(), z.number()]) idSchema.parse('abc-123') // OK idSchema.parse(123) // OK idSchema.parse(true) // Error ``` ### Array Validation ```typescript const tagsSchema = z.array(z.string()) .min(1, 'At least one tag required') .max(5, 'Maximum 5 tags') tagsSchema.parse(['typescript', 'zod']) // OK ``` ### Environment Variables ```typescript // lib/env.ts import { z } from 'zod' const envSchema = z.object({ DATABASE_URL: z.string().url(), NEXTAUTH_SECRET: z.string().min(32), NODE_ENV: z.enum(['development', 'production', 'test']) .default('development'), PORT: z.string() .transform(val => parseInt(val)) .pipe(z.number().min(1000).max(65535)) }) // Validate and export export const env = envSchema.parse(process.env) // Now fully typed! console.log(env.DATABASE_URL) console.log(env.PORT) // number, not string ``` ### Recursive Schema ```typescript // For nested comment threads interface Comment { text: string replies: Comment[] } const commentSchema: z.ZodType = z.lazy(() => z.object({ text: z.string(), replies: z.array(commentSchema) }) ) ``` ## Integrasi dengan tRPC Combo yang sempurna buat end-to-end type safety: ```typescript import { z } from 'zod' import { router, publicProcedure } from './trpc' export const userRouter = router({ create: publicProcedure .input(z.object({ name: z.string().min(2), email: z.string().email(), age: z.number().min(13) })) .mutation(async ({ input }) => { // input is validated AND typed! return await db.user.create({ data: input }) }) }) ``` ## Kesimpulan Zod mengatasi masalah fundamental: **menjembatani gap antara TypeScript's compile-time types dan runtime validation**. Keuntungannya: 1. **Type Inference** → Types otomatis derived dari schemas 2. **Single Source of Truth** → Schema = types = validation 3. **Runtime Safety** → Validasi external data sebelum dipakai 4. **Developer Experience Keren** → Autocomplete, error jelas, composable 5. **Framework Agnostic** → Bisa dipakai dimana aja (frontend, backend, edge) ### Checklist: Mulai Pakai Zod **Setup:** - [ ] Install Zod (`npm install zod`) - [ ] Import dan create first schema - [ ] Test dengan `.parse()` dan `.safeParse()` - [ ] Infer TypeScript type dengan `z.infer` **Form Validation:** - [ ] Define form schema dengan validation rules - [ ] Pakai `.safeParse()` on submit - [ ] Parse errors jadi field-specific messages - [ ] Tampilin errors di sebelah inputs - [ ] Infer form type buat type-safe state **API Validation:** - [ ] Validate request body di API routes - [ ] Return clear errors (400) kalau validation gagal - [ ] Pakai validated data (fully typed) - [ ] Share schemas antara frontend dan backend **Advanced:** - [ ] Pakai `.transform()` buat data transformation - [ ] Implement custom validation dengan `.refine()` - [ ] Bikin reusable schema components - [ ] Validate environment variables - [ ] Integrasi dengan tRPC buat full-stack type safety **Best Practices:** - [ ] Define schemas deket sama usage-nya - [ ] Pakai custom error messages buat better UX - [ ] Validate di boundaries (API, forms, external data) - [ ] Export inferred types buat reuse - [ ] Pakai `.strict()` buat reject unknown keys **Kapan Zod Cocok Banget:** Project TypeScript Form validation API input validation Config/env validation Data dari external sources **Pertimbangkan Alternatif Kalau:** Pure JavaScript (overhead-nya ga worth it) Bundle size kritis Validation super simple Udah pakai validation library lain yang established Langkah Selanjutnya: 1. Jelajahi [dokumentasi Zod](https://zod.dev) buat advanced patterns 2. Cek integrasi Zod + React Hook Form 3. Coba combo Zod + tRPC 4. Pakai Zod buat env validation **Insight Penting:** Superpower Zod ada di type inference-nya. Define schema sekali, langsung dapat validation DAN types. Ga perlu sync manual antara types dan validation logic. Ini hemat waktu banget dan hilangkan satu kategori bugs. Begitu kamu ngerasain single source of truth buat types dan validation, ga bakalan mau balik ke manual type guards dan separate validation logic lagi!