🛡️ บทที่ 8: Zod Validation
เรียนรู้การใช้ Zod สำหรับ schema validation และ type safety ใน Next.js 15 พร้อมตัวอย่างการใช้งานจริงที่ครอบคลุม
วัตถุประสงค์การเรียนรู้
เข้าใจหลักการและความสำคัญของ 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 ในบทถัดไป