Zod Basics

import { z } from "zod";
 
// 1. Define a schema
const UserSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email"),
  age: z.number().int().min(18, "Must be 18+"),
});
 
// 2. Parse (throws on failure)
try {
  const user = UserSchema.parse({ name: "Ada", email: "ada@example.com", age: 30 });
  console.log(user); // typed as { name: string; email: string; age: number }
} catch (err) {
  if (err instanceof z.ZodError) {
    console.error(err.issues);
  }
}
 
// 3. safeParse (never throws)
const result = UserSchema.safeParse({ name: "", email: "bad", age: 15 });
if (!result.success) {
  console.error(result.error.flatten());
} else {
  console.log(result.data);
}

"use client";
 
import { useState } from "react";
import { z } from "zod";
 
const ContactSchema = z.object({
  name: z.string().min(1, "Name is required").max(100, "Name too long"),
  email: z.string().email("Please enter a valid email"),
  message: z
    .string()
    .min(10, "Message must be at least 10 characters")
    .max(1000, "Message too long"),
});
 
type ContactData = z.infer<typeof ContactSchema>;
 
export function ContactValidator() {
  const [errors, setErrors] = useState<Record<string, string[]>>({});
  const [success, setSuccess] = useState<ContactData | null>(null);
 
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const raw = {
      name: formData.get("name"),
      email: formData.get("email"),
      message: formData.get("message"),
    };
 
    const result = ContactSchema.safeParse(raw);
 
    if (!result.success) {
      const flat = result.error.flatten();
      setErrors(flat.fieldErrors as Record<string, string[]>);
      setSuccess(null);
    } else {
      setErrors({});
      setSuccess(result.data);
    }
  }
 
  return (
    <form onSubmit={handleSubmit} className="flex max-w-md flex-col gap-3">
      <div>
        <input name="name" placeholder="Name" className="w-full rounded border p-2" />
        {errors.name && <p className="text-sm text-red-600">{errors.name[0]}</p>}
      </div>
      <div>
        <input name="email" placeholder="Email" className="w-full rounded border p-2" />
        {errors.email && <p className="text-sm text-red-600">{errors.email[0]}</p>}
      </div>
      <div>
        <textarea name="message" placeholder="Message" className="w-full rounded border p-2" />
        {errors.message && <p className="text-sm text-red-600">{errors.message[0]}</p>}
      </div>
      <button type="submit" className="rounded bg-blue-600 px-4 py-2 text-white">
        Validate
      </button>
      {success && (
        <pre className="rounded bg-green-50 p-3 text-sm">{JSON.stringify(success, null, 2)}</pre>
      )}
    </form>
  );
}

const schema = z.string({
  required_error: "This field is required",
  invalid_type_error: "Expected a string",
}).min(1, { message: "Cannot be empty" });

z.setErrorMap((issue, ctx) => {
  if (issue.code === z.ZodIssueCode.too_small) {
    return { message: `Minimum length is ${issue.minimum}` };
  }
  return { message: ctx.defaultError };
});

const result = schema.safeParse(data);
if (!result.success) {
  // Flat — great for simple forms
  result.error.flatten();
  // { formErrors: string[], fieldErrors: { name?: string[], email?: string[] } }
 
  // Formatted — great for nested objects
  result.error.format();
  // { name: { _errors: string[] }, address: { city: { _errors: string[] } } }
}

// The inferred type matches the schema exactly
type User = z.infer<typeof UserSchema>;
// { name: string; email: string; age: number }
 
// ZodError is generic — you can type it
const result = UserSchema.safeParse(data);
if (!result.success) {
  const err: z.ZodError<User> = result.error;
}
 
// Use z.ZodType to accept any schema as a parameter
function validate<T>(schema: z.ZodType<T>, data: unknown): T {
  return schema.parse(data);
}

// Production example: Banner schema with defaults, nullable, and cross-field validation
// File: src/schemas/banner.ts
import { z } from 'zod';
 
export const BannerSchema = z.object({
  title: z.string().min(1, 'Title is required').max(100),
  subtitle: z.string().optional().default(''),
  imageUrl: z.string().url('Must be a valid URL').nullable(),
  linkUrl: z.string().url('Must be a valid URL').optional(),
  linkText: z.string().optional().default('Learn more'),
  isActive: z.boolean().default(true),
  startDate: z.coerce.date(),
  endDate: z.coerce.date().nullable(),
  priority: z.number().int().min(0).max(100).default(50),
}).refine(
  (data) => {
    if (data.endDate && data.startDate) {
      return data.endDate > data.startDate;
    }
    return true;
  },
  {
    message: 'End date must be after start date',
    path: ['endDate'],
  }
);
 
// Extract TypeScript type from the schema
export type Banner = z.infer<typeof BannerSchema>;
// {
//   title: string;
//   subtitle: string;       // defaults to ''
//   imageUrl: string | null; // nullable
//   linkUrl?: string;        // optional, no default
//   linkText: string;        // defaults to 'Learn more'
//   isActive: boolean;       // defaults to true
//   startDate: Date;
//   endDate: Date | null;
//   priority: number;        // defaults to 50
// }