Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced70 menitBahasa Indonesia

Zod Schema

Menulis schema Zod sebagai sumber aturan runtime untuk nilai form dan menurunkan TypeScript type dari schema yang sama.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan perbedaan TypeScript type dan schema runtime
Membuat object schema untuk profile sederhana
Menurunkan ProfileFormValues dengan z.infer
Menghindari aturan form yang ditulis berulang

ZodTypeScriptSchema ValidationForms

Isi lesson

7 blok

1.
Type membantu editor; schema memeriksa nilai yang benar-benar datangBelum selesaiWajib
2.
Pasang Zod setelah React Hook FormBelum selesaiWajib
3.
Schema profile serta type yang diturunkanBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Client validation membantu UX, bukan authorizationBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Type membantu editor; schema memeriksa nilai yang benar-benar datang

Wajib

TypeScript dapat memberi tahu editor bahwa displayName dan email adalah string, tetapi type tidak berjalan saat user mengirim form atau API menerima request. Schema Zod dapat memeriksa input saat runtime. Contohnya, nama ditrim lalu diberi batas panjang dan email diperiksa formatnya.

Simpan schema di file domain seperti lib/validation/profile-schema.ts. Dari schema tersebut, ambil type dengan z.infer. Form UI serta submit boundary dapat menggunakan definisi yang sama tanpa menyalin field name dan aturan. Ini tidak berarti semua schema harus global. Reuse hanya tepat ketika domain serta aturan datanya memang sama.

Bagian ini memengaruhi progres lesson.

Pasang Zod setelah React Hook Form

Wajib

bash

npm install zod

Zod menyediakan schema validation. Jalankan perintah ini di project lokal, lalu cek dependency di package.json. Schema tidak boleh menjadi tempat menyimpan credential, raw token, atau aturan authorization user-owned.

Bagian ini memengaruhi progres lesson.

Schema profile serta type yang diturunkan

Wajib

// lib/validation/profile-schema.ts
import { z } from "zod";

export const profileSchema = z.object({
  displayName: z
    .string()
    .trim()
    .min(2, { error: "Nama tampilan minimal 2 karakter." })
    .max(40, { error: "Nama tampilan maksimal 40 karakter." }),
  email: z.email({ error: "Masukkan email yang valid." }),
});

export type ProfileFormValues = z.infer<typeof profileSchema>;

profileSchema menyimpan aturan runtime, sedangkan z.infer menurunkan type dari output schema. Dengan begitu, form dan submit logic tidak perlu menulis shape profile yang kedua. Cocokkan syntax dengan versi Zod di project lokal dan gunakan dokumentasi resmi ketika menaikkan major version.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Create profile form schema

Lengkapi schema Zod untuk nama tampilan dan email, lalu turunkan type form dari schema itu.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

3 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa z.infer<typeof profileSchema> berguna?

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Client validation membantu UX, bukan authorization

Schema client membantu user memperbaiki input lebih awal. Request tetap dapat dimodifikasi atau datang dari luar UI. Server/data boundary masih harus memvalidasi input penting dan memeriksa identity serta authorization sebelum perubahan user-owned disimpan.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Zod schema memeriksa input saat runtime.
Object schema menyimpan field serta aturan sederhana seperti panjang dan email.
z.infer menurunkan type TypeScript dari schema yang sama.
Schema client tidak menggantikan validation atau authorization pada server.
Berikutnya, schema akan dihubungkan ke field error melalui resolver.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Type membantu editor; schema memeriksa nilai yang benar-benar datang.

Memuat progres Review module