zodを使わなくても input タグのtypeを email や urlにしたり、min / max の指定ができるが、inputタグのvalidationはクライアントサイドだけなので、セキュリティ面を考えるとサーバー側でもformDataの検証をする必要がある
zodによる過剰な保護が発生するケースもある。例えばHTMLタグや特殊文字が文章に含まれている場合、意図せずvalidationに引っかかる

zodのインストール

https://zod.dev/basics

npm i zod

基本的な使い方

1 . schemaを定義

const postSchema = z.object({
  title: z.string().min(1).max(30),
  url: z.string().url(),
});

2 . 検証したいオブジェクトを作成

  const rawData = {
    title: formData.get("title"),
    url: formData.get("url"),
  };

3 . parse

  const paredData = postSchema.safeParse(rawData);
  if (!paredData.success) {
    return { success: false, message: "error submit form" };
  }

parse結果のオブジェクトは { success: boolean, data?, error? } という形
parseに使うのは基本的にsafeParse で良い

用語：

オブジェクトの要素の schema は「文字列スキーマ」
オブジェクト自体の schema は「オブジェクトスキーマ」

エラーの処理：

.parse()：失敗時に例外を投げる（try/catchが必要）
.safeParse()：例外を投げず successで判定
- throw されないので後続処理も走る
- エラー内容を変数で扱える（ = UI に返せる）

似たようなschemaを何度も作成する場合

例えばemail , password までは共通だが、その他のフィールドは異なる場合の対処

変数として個別のschemaに分ける

import { z } from "zod";

const emailSchema = z.string().email();
const passwordSchema = z.string().min(8);

// フォーム A
const loginSchema = z.object({
  email: emailSchema,
  password: passwordSchema,

  memo: z.string().optional(),
});

// フォーム B
const signupSchema = z.object({
  email: emailSchema,        
  password: passwordSchema,   

  url: z.string().url("Invalid URL"),
});

ベースとなるオブジェクトスキーマを拡張

import { z } from "zod";

const emailSchema = z.string().email();
const passwordSchema = z.string().min(8);

// ベース
const baseSchema = z.object({
  email: emailSchema,
  password: passwordSchema,
  url: z.string().url("Invalid URL"),
});

// ベースを拡張
const extendedSchema = baseSchema.extend({
  memo: z.string().optional(),
});

Validationのエラーメッセージをクライアントに返す

schema：

export const notificationMemoSchema = z.object({
  content: z
    .string()
    .min(1, "Content is required")
    .max(10, "Content is too long"),
});

route.ts：

  const parsed = notificationMemoSchema.safeParse({ content });

  if (!parsed.success) {
    return NextResponse.json({ errors: parsed.error.errors }, { status: 400 });

Validationが成功したときは { success と data }、失敗した時は { success と error }を結果として持つ
parsed.error.errors は各エラーが配列に追加される
文字列schemaに書いた各エラーメッセージは parsed.error.errors.messageにある

error.errorsの中身：

[
  {
    code: 'too_big',
    maximum: 10,
    type: 'string',
    inclusive: true,
    exact: false,
    message: 'Content is too long',
    path: [ 'content' ]
  }
]

状態として使う

クライアント側：

  const [errors, setErrors] = useState<string[] | null>(null);

---

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const content = form.content.value;

    const res = await fetch(`/api/memos`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ content }),
    });

    const data = await res.json();

    if (!res.ok) {
      if (data.errors) {
        setErrors(data.errors);
      }
      return;
    }

    setErrors([]);
    setMemos(data.memos);

data.errors 配列をerrors という状態変数に入れる
Validationフィールドが１つだけなら errors[0].message

toastで使う

toastの場合：

    if (!res.ok) {
      if (data.errors) {
        toast.error(data.errors.map((e: { message: string }) => e.message).join(", "), {
          style: {
            background: "red",
            color: "white",
          },
        });
      }
      return;
    }

Zod：validation

Zod：validation