使用繁體中文顯示 Zod 驗證的錯誤訊息 i18n

在使用 zod 驗證時，除非有特別傳入訊息，不然顯示的驗證訊息都是英文，要一一指定很麻煩，有沒有辦法一次「翻譯」全部？

其實已經有 Zod 的多語系(i18n)套件，使用起來非常方便，先安裝套件：

    
npm install zod-i18n-map i18next
    

建立一個 i18n-zod.ts 檔案(通常會放在 lib 資料夾內)，在裡面引用別人翻譯好的繁體中文(zh-TW)語系檔：

    
import i18next from "i18next";
import translation from "zod-i18n-map/locales/zh-TW/zod.json";
import * as z from "zod";
import {zodI18nMap} from "zod-i18n-map";

i18next.init({
    lng: "zh-TW",
    resources: {
        'zh-TW': { zod: translation },
    },
});
z.setErrorMap(zodI18nMap);

export * from "zod";
    

在其他地方要使用時非常簡單，不要使用 zod，而是使用剛剛建立的 i18n-zod：

    
// import * as z from 'zod'
import * as z from "@/lib/i18n-zod";


const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

// TODO: 驗證並輸出錯誤訊息
    

非常簡單！

參考資料：
GitHub - aiji42/zod-i18n