React Hook Form ile Zod

// src/features/auth/sign-up-schema.ts
import { z } from "zod";

export const signUpSchema = z
  .object({
    name: z.string().trim().min(2, "Ad en az 2 karakter olmalı."),
    email: z.email("E-posta adresini ad@ornek.com biçiminde girin."),
    password: z.string().min(8, "Şifre en az 8 karakter olmalı."),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    error: "Şifreler eşleşmiyor.",
    path: ["confirmPassword"],
  });

export type SignUpValues = z.infer<typeof signUpSchema>;

// src/features/auth/sign-up-form.tsx
import { useForm, type SubmitHandler } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { signUpSchema, type SignUpValues } from "./sign-up-schema";

export function SignUpForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(signUpSchema),
    defaultValues: { name: "", email: "", password: "", confirmPassword: "" },
    mode: "onTouched",
  });

  const onSubmit: SubmitHandler<SignUpValues> = (values) => createAccount(values);

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <label htmlFor="name">Ad</label>
      <input id="name" autoComplete="name" {...register("name")} />
      {errors.name && <p>{errors.name.message}</p>}

      <label htmlFor="email">E-posta</label>
      <input id="email" type="email" autoComplete="email" {...register("email")} />
      {errors.email && <p>{errors.email.message}</p>}

      <label htmlFor="password">Şifre</label>
      <input
        id="password"
        type="password"
        autoComplete="new-password"
        {...register("password", { deps: "confirmPassword" })}
      />
      {errors.password && <p>{errors.password.message}</p>}

      <label htmlFor="confirmPassword">Şifre tekrar</label>
      <input
        id="confirmPassword"
        type="password"
        autoComplete="new-password"
        {...register("confirmPassword")}
      />
      {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}

      <button>Hesap oluştur</button>
    </form>
  );
}

<input type="password" {...register("password", { deps: "confirmPassword" })} />

const productSchema = z.object({
  title: z.string().trim().min(1, "Ürün adı girin."),
  price: z
    .string()
    .regex(/^\d+(,\d{1,2})?$/, "Fiyatı 1250,50 biçiminde girin.")
    .transform((value) => Number(value.replace(",", "."))),
});

type ProductInput = z.input<typeof productSchema>; // { title: string; price: string }
type ProductOutput = z.output<typeof productSchema>; // { title: string; price: number }

export function ProductForm() {
  const { register, handleSubmit } = useForm<ProductInput, unknown, ProductOutput>({
    resolver: zodResolver(productSchema),
    defaultValues: { title: "", price: "" },
  });

  return (
    <form onSubmit={handleSubmit((product) => saveProduct(product))}>
      <input {...register("title")} />
      <input inputMode="decimal" {...register("price")} />
    </form>
  );
}

// app/sign-up/actions.ts
"use server";

import { signUpSchema } from "@/features/auth/sign-up-schema";

export async function createAccount(values: unknown) {
  const parsed = signUpSchema.safeParse(values);
  if (!parsed.success) {
    return { status: "error" as const };
  }
  // parsed.data güvenli
}