zod 오류 메시지의 일본어화 및 사용자 정의

아이폰에 들어갔어요.
몰드 생성이 가능하고preprocess 이런 게 편해요.😎
Zod의 오류 정보를 맞춤형으로 만들 수 있는 일본어 글이 없어서 많이 찾아봤어요.
겸사겸사 말씀드리겠습니다.js의 i18n과 콜라보를 해봤어요.

창고.

https://github.com/hisho/nextjs-with-zod-i18n

데모

시위 행진은 chakra와 react-hook-form을 사용한다.
https://nextjs-with-zod-i18n-demo.vercel.app/

원본 오류 메시지

본격적으로 시작하다

// optional custom error message
z.string().nonempty({ message: "Can't be empty" });

대상의 키를 메시지로 만들고value를 좋아하는 값으로 만들면 됩니다🥰

기본 오류 메시지

Zod의 오류 정보는 모두 영어로 정의됩니다Required (필수) 등은 어디서 맞춤형으로 (일본어화) 할 수 있나요🤔
공식 읽기 오류 메시지 사용자 정의
https://github.com/colinhacks/zod/blob/master/ERROR_HANDLING.md#customizing-errors-with-zoderrormap
본격적으로 시작하다

import { z } from "zod";

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  if (issue.code === z.ZodIssueCode.invalid_type) {
    if (issue.expected === "string") {
      return { message: "bad type!" };
    }
  }
  if (issue.code === z.ZodIssueCode.custom) {
    return { message: `less-than-${(issue.params || {}).minimum}` };
  }
  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

세이프티
・・・
・・・
Required는 어디에서 바뀌었습니까?🥲
몰라서 github에서 찾았어요.
https://github.com/colinhacks/zod/blob/cbbfedd15ffbe7d880f52d6becb76dcaef54875f/src/ZodError.ts#L284
즉, 이 switch에 적힌 부분을 위의 오류 메시지로 변경하여 맞춤형으로 만들면 된다는 것이다😎

  switch (issue.code) {
  case ZodIssueCode.invalid_type:
    if (issue.received === "undefined") {
      message = "Required";
    } else {
      message = `Expected ${issue.expected}, received ${issue.received}`;
    }
    break;
  case ZodIssueCode.unrecognized_keys:
    message = `Unrecognized key(s) in object: ${issue.keys
      .map((k) => `'${k}'`)
      .join(", ")}`;
    break;
  case ZodIssueCode.invalid_union:
    message = `Invalid input`;
    break;
  case ZodIssueCode.invalid_union_discriminator:
    message = `Invalid discriminator value. Expected ${issue.options
      .map((val) => (typeof val === "string" ? `'${val}'` : val))
      .join(" | ")}`;
    break;
  case ZodIssueCode.invalid_enum_value:
    message = `Invalid enum value. Expected ${issue.options
      .map((val) => (typeof val === "string" ? `'${val}'` : val))
      .join(" | ")}`;
    break;
  case ZodIssueCode.invalid_arguments:
    message = `Invalid function arguments`;
    break;
  case ZodIssueCode.invalid_return_type:
    message = `Invalid function return type`;
    break;
  case ZodIssueCode.invalid_date:
    message = `Invalid date`;
    break;
  case ZodIssueCode.invalid_string:
    if (issue.validation !== "regex") message = `Invalid ${issue.validation}`;
    else message = "Invalid";
    break;
  case ZodIssueCode.too_small:
    if (issue.type === "array")
      message = `Array must contain ${
        issue.inclusive ? `at least` : `more than`
      } ${issue.minimum} element(s)`;
    else if (issue.type === "string")
      message = `String must contain ${
        issue.inclusive ? `at least` : `over`
      } ${issue.minimum} character(s)`;
    else if (issue.type === "number")
      message = `Number must be greater than ${
        issue.inclusive ? `or equal to ` : ``
      }${issue.minimum}`;
    else message = "Invalid input";
    break;
  case ZodIssueCode.too_big:
    if (issue.type === "array")
      message = `Array must contain ${
        issue.inclusive ? `at most` : `less than`
      } ${issue.maximum} element(s)`;
    else if (issue.type === "string")
      message = `String must contain ${
        issue.inclusive ? `at most` : `under`
      } ${issue.maximum} character(s)`;
    else if (issue.type === "number")
      message = `Number must be less than ${
        issue.inclusive ? `or equal to ` : ``
      }${issue.maximum}`;
    else message = "Invalid input";
    break;
  case ZodIssueCode.custom:
    message = `Invalid input`;
    break;
  case ZodIssueCode.invalid_intersection_types:
    message = `Intersection results could not be merged`;
    break;
  case ZodIssueCode.not_multiple_of:
    message = `Number must be a multiple of ${issue.multipleOf}`;
    break;
  default:
    message = _ctx.defaultError;
    util.assertNever(issue);
}

Required를 "XXXX" 형식으로 바꾸다

tsx

switch (issue.code) {
  case ZodIssueCode.invalid_type:
    if (issue.received === "undefined") {
-      message = "Required";
+      return {
+        message: '必須'
+       }
    } else {
-      message = `Expected ${issue.expected}, received ${issue.received}`;
+      return {
+        message: `Expected ${issue.expected}, received ${issue.received}`,
+      }
    }
-    break;
}

기본 오류를 반환하기 위해 XXX}를default로 수정

tsx

switch (issue.code) {
  default:
-    message = _ctx.defaultError;
-    util.assertNever(issue);
+    return { message: ctx.defaultError }
}

export const zodCustomErrorMap = (issue, ctx): z.ZodErrorMap => {
    switch (issue.code) {
      case z.ZodIssueCode.invalid_type:
        if (issue.received === 'undefined') {
          return {
            message: '必須'
          }
        } else {
          return {
            message: `Expected ${issue.expected}, received ${issue.received}`,
          }
        }
      case z.ZodIssueCode.unrecognized_keys:
        return {
          message: `Unrecognized key(s) in object: ${issue.keys
            .map((k) => `'${k}'`)
            .join(', ')}`,
        }
      case z.ZodIssueCode.invalid_union:
        return {
          message: `Invalid input`,
        }
      case z.ZodIssueCode.invalid_union_discriminator:
        return {
          message: `Invalid discriminator value. Expected ${issue.options
            .map((val) => (typeof val === 'string' ? `'${val}'` : val))
            .join(' | ')}`,
        }
      case z.ZodIssueCode.invalid_enum_value:
        return {
          message: `Invalid enum value. Expected ${issue.options
            .map((val) => (typeof val === 'string' ? `'${val}'` : val))
            .join(' | ')}`,
        }
      case z.ZodIssueCode.invalid_arguments:
        return {
          message: `Invalid function arguments`,
        }
      case z.ZodIssueCode.invalid_return_type:
        return {
          message: `Invalid function return type`,
        }
      case z.ZodIssueCode.invalid_date:
        return {
          message: `Invalid date`,
        }
      case z.ZodIssueCode.invalid_string:
        if (issue.validation !== 'regex') {
          return {
            message: isJapanese
              ? `${issue.validation}は無効な形式です`
              : ctx.defaultError,
          }
        } else {
          return {
            message: 'Invalid',
          }
        }
      case z.ZodIssueCode.too_small:
        if (issue.type === 'array') {
          return {
            message: `Array must contain ${
              issue.inclusive ? `at least` : `more than`
            } ${issue.minimum} element(s)`,
          }
        } else if (issue.type === 'string') {
          return {
            message: isJapanese
              ? issue.inclusive
                ? `文字列には少なくとも${issue.minimum}文字が含まれている必要があります`
                : `文字列には${issue.minimum}文字以上が含まれている必要があります`
              : ctx.defaultError,
          }
        } else if (issue.type === 'number') {
          return {
            message: `Number must be greater than ${
              issue.inclusive ? `or equal to ` : ``
            }${issue.minimum}`,
          }
        } else {
          return { message: 'Invalid input' }
        }
      case z.ZodIssueCode.too_big:
        if (issue.type === 'array') {
          return {
            message: `Array must contain ${
              issue.inclusive ? `at most` : `less than`
            } ${issue.maximum} element(s)`,
          }
        } else if (issue.type === 'string') {
          return {
            message: `String must contain ${
              issue.inclusive ? `at most` : `under`
            } ${issue.maximum} character(s)`,
          }
        } else if (issue.type === 'number') {
          return {
            message: `Number must be less than ${
              issue.inclusive ? `or equal to ` : ``
            }${issue.maximum}`,
          }
        } else {
          return {
            message: 'Invalid input',
          }
        }
      case z.ZodIssueCode.custom:
        return {
          message: `Invalid input`,
        }
      case z.ZodIssueCode.invalid_intersection_types:
        return {
          message: `Intersection results could not be merged`,
        }
      case z.ZodIssueCode.not_multiple_of:
        return {
          message: `Number must be a multiple of ${issue.multipleOf}`,
        }
      default:
        return { message: ctx.defaultError }
    }
  }

z.setErrorMap(zodCustomErrorMap())

나머지는 괜찮은 걸로 해주세요.😀

Next와 협력

ZodErrorMap.tsx

import { ReactElement } from 'react'
import { z } from 'zod'
import { zodCustomErrorMap } from '@src/libs/validation/zodCustomErrorMap'

type ZodErrorMapProps = Required<{
  children: ReactElement
}>

/**
 * @see https://github.com/colinhacks/zod/blob/master/ERROR_HANDLING.md#global-error-map
 * @see https://github.com/colinhacks/zod/blob/cbbfedd15ffbe7d880f52d6becb76dcaef54875f/src/ZodError.ts#L284
 */
export const ZodErrorMap = ({ children }: ZodErrorMapProps) => {
  z.setErrorMap(zodCustomErrorMap())

  return <>{children}</>
}

_app.tsx

import type { AppProps } from 'next/app'
import { ZodErrorMap } from '@src/libs/validation/ZodErrorMap'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ZodErrorMap>
      <Component {...pageProps} />
    </ZodErrorMap>
  )
}

export default MyApp

겸사겸사

next.js의 기본 i18n 설정

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  /**
   * @see https://nextjs.org/docs/advanced-features/i18n-routing
   * @see https://zenn.dev/steelydylan/articles/nextjs-with-i18n
   */
  i18n: {
    locales: ['en', 'ja'],
    defaultLocale: 'ja',
  },
}

module.exports = nextConfig

판정locale의 hooks 만들기

useLocale.ts

import { NextRouter, useRouter } from 'next/router'

const localeMap = (locale: NextRouter['locale']) => {
  switch (locale) {
    case 'ja':
      return 'ja'
    case 'en':
      return 'en'
    default:
      return 'ja'
  }
}

export const useLocale = (): {
  isEnglish: boolean
  isJapanese: boolean
  locale: ReturnType<typeof localeMap>
} => {
  const { locale: _locale } = useRouter()

  const locale = localeMap(_locale)
  const isJapanese = locale === 'ja'
  const isEnglish = locale === 'en'
  return {
    isEnglish,
    isJapanese,
    locale,
  }
}

export type UseLocaleResult = ReturnType<typeof useLocale>

zodCustom ErrorMap에 locale 수신 가능

zodCustomErrorMap.ts

import { z } from 'zod'
import type { UseLocaleResult } from '@src/hooks/useLocale'

export const zodCustomErrorMap =
  (locale: UseLocaleResult['locale']): z.ZodErrorMap =>
  (issue, ctx) => {
    const isJapanese = locale === 'ja'
    /**
     * enの場合はDefaultエラー内容を返す
     */
    if (locale === 'en') {
      return { message: ctx.defaultError }
    }
    switch (issue.code) {
      case z.ZodIssueCode.invalid_type:
        if (issue.received === 'undefined') {
          return {
            /**
              * なんとなくisJapaneseの分岐を書いている
              */
            message: isJapanese ? '必須' : ctx.defaultError,
          }
        } else {
          return {
            message: `Expected ${issue.expected}, received ${issue.received}`,
          }
        }
      case z.ZodIssueCode.unrecognized_keys:
        return {
          message: `Unrecognized key(s) in object: ${issue.keys
            .map((k) => `'${k}'`)
            .join(', ')}`,
        }
      case z.ZodIssueCode.invalid_union:
        return {
          message: `Invalid input`,
        }
      case z.ZodIssueCode.invalid_union_discriminator:
        return {
          message: `Invalid discriminator value. Expected ${issue.options
            .map((val) => (typeof val === 'string' ? `'${val}'` : val))
            .join(' | ')}`,
        }
      case z.ZodIssueCode.invalid_enum_value:
        return {
          message: `Invalid enum value. Expected ${issue.options
            .map((val) => (typeof val === 'string' ? `'${val}'` : val))
            .join(' | ')}`,
        }
      case z.ZodIssueCode.invalid_arguments:
        return {
          message: `Invalid function arguments`,
        }
      case z.ZodIssueCode.invalid_return_type:
        return {
          message: `Invalid function return type`,
        }
      case z.ZodIssueCode.invalid_date:
        return {
          message: `Invalid date`,
        }
      case z.ZodIssueCode.invalid_string:
        if (issue.validation !== 'regex') {
          return {
            message: isJapanese
              ? `${issue.validation}は無効な形式です`
              : ctx.defaultError,
          }
        } else {
          return {
            message: 'Invalid',
          }
        }
      case z.ZodIssueCode.too_small:
        if (issue.type === 'array') {
          return {
            message: `Array must contain ${
              issue.inclusive ? `at least` : `more than`
            } ${issue.minimum} element(s)`,
          }
        } else if (issue.type === 'string') {
          return {
            message: isJapanese
              ? issue.inclusive
                ? `文字列には少なくとも${issue.minimum}文字が含まれている必要があります`
                : `文字列には${issue.minimum}文字以上が含まれている必要があります`
              : ctx.defaultError,
          }
        } else if (issue.type === 'number') {
          return {
            message: `Number must be greater than ${
              issue.inclusive ? `or equal to ` : ``
            }${issue.minimum}`,
          }
        } else {
          return { message: 'Invalid input' }
        }
      case z.ZodIssueCode.too_big:
        if (issue.type === 'array') {
          return {
            message: `Array must contain ${
              issue.inclusive ? `at most` : `less than`
            } ${issue.maximum} element(s)`,
          }
        } else if (issue.type === 'string') {
          return {
            message: `String must contain ${
              issue.inclusive ? `at most` : `under`
            } ${issue.maximum} character(s)`,
          }
        } else if (issue.type === 'number') {
          return {
            message: `Number must be less than ${
              issue.inclusive ? `or equal to ` : ``
            }${issue.maximum}`,
          }
        } else {
          return {
            message: 'Invalid input',
          }
        }
      case z.ZodIssueCode.custom:
        return {
          message: `Invalid input`,
        }
      case z.ZodIssueCode.invalid_intersection_types:
        return {
          message: `Intersection results could not be merged`,
        }
      case z.ZodIssueCode.not_multiple_of:
        return {
          message: `Number must be a multiple of ${issue.multipleOf}`,
        }
      default:
        return { message: ctx.defaultError }
    }
  }

locale에서 Zod의 setErrorMap 값을 변경하는 provider 만들기

ZodErrorMap.tsx

import { ReactElement } from 'react'
import { useLocale } from '@src/hooks/useLocale'
import { z } from 'zod'
import { zodCustomErrorMap } from '@src/libs/validation/zodCustomErrorMap'

type ZodErrorMapProps = Required<{
  children: ReactElement
}>

/**
 * @see https://github.com/colinhacks/zod/blob/master/ERROR_HANDLING.md#global-error-map
 * @see https://github.com/colinhacks/zod/blob/cbbfedd15ffbe7d880f52d6becb76dcaef54875f/src/ZodError.ts#L284
 */
export const ZodErrorMap = ({ children }: ZodErrorMapProps) => {
  const { locale } = useLocale()
  z.setErrorMap(zodCustomErrorMap(locale))

  return <>{children}</>
}

_app.tsx 읽기

_app.tsx

import type { AppProps } from 'next/app'
import { ZodErrorMap } from '@src/libs/validation/ZodErrorMap'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ZodErrorMap>
      <Component {...pageProps} />
    </ZodErrorMap>
  )
}

export default MyApp

총결산

누구든지 통역 가방 만들어 주세요.😂
이번에 사용한 창고
https://github.com/hisho/nextjs-with-zod-i18n