Kenapa Validasi Skema Itu Penting?

Bayangkan kamu lagi bikin API buat aplikasi e-commerce. Tiba-tiba user ngirim data dengan format yang salah—misalnya, harga produk diisi string "dua puluh ribu" alih-alih angka 20000. Kalau nggak divalidasi, bisa-bisa sistemmu error atau malah disusupi data berbahaya. Di sinilah Zod berperan.

Zod adalah library validasi skema berbasis TypeScript yang ringan, deklaratif, dan punya inferensi tipe otomatis. Dengan Zod, kamu bisa mendefinisikan skema data sekali, lalu menggunakannya untuk memvalidasi input dari mana saja—form frontend, request API, atau environment variable. Cocok banget buat kamu yang kerja full-stack dengan TypeScript.

Instalasi dan Setup Pertama

Pertama, install Zod lewat npm atau yarn:

npm install zod

Lalu, import di file TypeScript:

import { z } from 'zod';

Sekarang, kita coba bikin skema sederhana untuk validasi data produk:

const ProductSchema = z.object({
  name: z.string().min(3, 'Nama minimal 3 karakter'),
  price: z.number().positive('Harga harus positif'),
  category: z.enum(['elektronik', 'pakaian', 'makanan']),
  inStock: z.boolean().default(true),
  tags: z.array(z.string()).max(5).optional(),
});

Inferensi Tipe Otomatis

Salah satu fitur andalan Zod adalah kamu bisa mendapatkan tipe TypeScript langsung dari skema:

type Product = z.infer<typeof ProductSchema>;

Ini artinya tipe Product akan secara otomatis sesuai dengan skema yang kamu definisikan. Nggak perlu nulis interface manual lagi!

Validasi Data dengan Safe Parse

Gunakan .safeParse() untuk mengecek data tanpa lempar error:

const data = { name: 'Laptop', price: 15000000, category: 'elektronik' };
const result = ProductSchema.safeParse(data);

if (!result.success) {
  console.log(result.error.format());
  // Tampilkan error ke user
} else {
  const validData: Product = result.data;
  // Lanjutkan proses
}

Metode ini mengembalikan objek dengan properti success dan data atau error. Sangat aman untuk dipakai di production.

Validasi Data dari Request API (Backend)

Di backend Express atau Next.js API routes, kamu bisa langsung validasi body request:

import { z } from 'zod';

const CreateUserSchema = z.object({
  email: z.string().email('Email tidak valid'),
  password: z.string().min(8).regex(/[A-Z]/, 'Harus ada huruf besar'),
  age: z.number().int().positive().optional(),
});

// Di handler
export async function POST(req: Request) {
  const body = await req.json();
  const result = CreateUserSchema.safeParse(body);
  if (!result.success) {
    return Response.json({ errors: result.error.flatten().fieldErrors }, { status: 400 });
  }
  // Simpan user
}

Transformasi Data

Zod nggak cuma validasi, tapi juga bisa transformasi data. Misalnya, kamu mau trim string atau parse tanggal:

const UserSchema = z.object({
  name: z.string().trim().min(1),
  email: z.string().email().toLowerCase(),
  birthDate: z.string().transform((str) => new Date(str)),
});

Integrasi dengan Form Frontend (React + React Hook Form)

Zod juga populer dipasangkan dengan React Hook Form untuk validasi form:

npm install @hookform/resolvers zod

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  username: z.string().min(3),
  password: z.string().min(6),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });
  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('username')} />
      {errors.username && <p>{errors.username.message}</p>}
      <input type="password" {...register('password')} />
      {errors.password && <p>{errors.password.message}</p>}
      <button type="submit">Login</button>
    </form>
  );
}

Validasi Environment Variables

Sering banget kita lupa set environment variable, apalagi pas deploy. Zod bisa bantu validasi sejak awal:

const EnvSchema = z.object({
  DATABASE_URL: z.string().url(),
  SECRET_KEY: z.string().min(32),
  NODE_ENV: z.enum(['development', 'production', 'test']),
});

export const env = EnvSchema.parse(process.env);
// Kalau ada yang kurang, aplikasi langsung error saat startup

Kenapa Zod Lebih Baik dari Validator Lain?

• Tipe otomatis: Nggak perlu nulis ulang tipe di TypeScript.
• Ringan: Ukuran < 10KB setelah minifikasi.
• Dukungan ecosystem: Integrasi dengan React Hook Form, tRPC, Prisma, dan lainnya.
• Fitur lengkap: Union, intersection, nullable, record, promise, custom validation.

Kesimpulan

Zod adalah solusi modern untuk validasi skema yang aman dan efisien. Dengan tipe yang terinferensi otomatis, kamu bisa mengurangi bug dan mempercepat development. Baik untuk frontend, backend, atau bahkan config environment, Zod layak jadi toolkit utama developer TypeScript di Indonesia.

Mulai sekarang, biasakan validasi data dengan Zod—nggak cuma bikin kode lebih rapi, tapi juga melindungi aplikasi dari data sembarangan. Coba implementasikan di proyek pertamamu hari ini!