🛡️ บทที่ 8: Zod Validation

เรียนรู้การใช้ Zod สำหรับ schema validation และ type safety ใน Next.js 15 พร้อมตัวอย่างการใช้งานจริงที่ครอบคลุม
60 นาที
ปานกลาง-ขั้นสูง
สำคัญมาก
Type Safety
Production Ready
วัตถุประสงค์การเรียนรู้

เข้าใจหลักการและความสำคัญของ runtime validation

สร้าง schemas สำหรับ validation ทุกประเภทข้อมูล

ใช้ Zod กับ forms, API routes และ environment variables

จัดการ error handling และสร้าง custom validation

🤔 Zod คืออะไร และทำไมถึงสำคัญ?

Zod เป็น TypeScript-first schema validation library ที่ช่วยให้เราสามารถกำหนด schema และตรวจสอบข้อมูลได้อย่างปลอดภัยทั้งตอน compile time และ runtime พร้อมทั้งสร้าง TypeScript types อัตโนมัติ

🌟 ฟีเจอร์เด่นของ Zod:
Type Safety

TypeScript-first schema validation พร้อม auto-completion และ type inference

Runtime Validation

ตรวจสอบข้อมูลตอน runtime เพื่อป้องกัน invalid data จาก API หรือ user input

Error Messages

Error messages ที่ชัดเจน customizable และ i18n ready

Performance

Lightweight (2.8kb gzipped) และรวดเร็ว เหมาะกับ production

📦 การติดตั้ง Zod:

$ npm install zod

📝 Form Validation with Interactive Demos

เรียนรู้การใช้ Zod กับ React forms พร้อมตัวอย่างที่ทำงานได้จริง

🎯 Basic Registration Form
🔧 Advanced Form with Conditional Validation
🔗 API Route Validation

API Route (app/api/users/route.ts):

import { z } from 'zod';
import { NextRequest, NextResponse } from 'next/server';

const createUserSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email format"),
  age: z.number().min(18, "Must be at least 18 years old")
});

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    
    // Validate request body
    const validatedData = createUserSchema.parse(body);
    
    // Process validated data
    const user = await createUser(validatedData);
    
    return NextResponse.json({ success: true, user });
    
  } catch (error) {
    if (error instanceof z.ZodError) {
      return NextResponse.json(
        { success: false, errors: error.errors },
        { status: 400 }
      );
    }
    
    return NextResponse.json(
      { success: false, message: "Internal server error" },
      { status: 500 }
    );
  }
}

Environment Variables Validation:

// lib/env.ts
import { z } from 'zod';

const envSchema = z.object({
  DATABASE_URL: z.string().url("Invalid database URL"),
  NEXTAUTH_SECRET: z.string().min(32, "Secret must be at least 32 characters"),
  NODE_ENV: z.enum(['development', 'production', 'test']).default('development')
});

export const env = envSchema.parse(process.env);
💡 Best Practices สำหรับ Zod

แยก schemas ออกเป็นไฟล์แยก

จัดเก็บ schemas ในโฟลเดอร์ schemas/ เพื่อความเป็นระเบียบ

ใช้ descriptive error messages

เขียน error messages ที่เข้าใจง่ายและเป็นภาษาท้องถิ่น

Validate ข้อมูลทุกจุดที่รับจากภายนอก

API routes, form inputs, environment variables

ใช้ safeParse สำหรับ non-critical validations

หลีกเลี่ยงการ throw errors โดยไม่จำเป็น

🎯 ยินดีด้วย! คุณเรียนจบบทที่ 8 แล้ว

ตอนนี้คุณสามารถใช้ Zod เพื่อสร้างแอปพลิเคชันที่ปลอดภัยและเชื่อถือได้แล้ว พร้อมสำหรับการเรียนรู้ Tailwind CSS ในบทถัดไป