zod-i18n

When validating objects (e.g., z.object), you can include the object key in the error message using the {{path}} placeholder.

To enable this:

1. Use a translation key suffixed with _with_path (e.g., invalid_type_with_path).
2. If you want to map technical keys (like userName) to human-readable labels (like User's name), use the handlePath.keyPrefix option in makeZodI18nMap to point to a specific section in your translation files.

i18next.init({
  lng: "en",
  resources: {
    en: {
      zod: {
        errors: {
          invalid_type: "Expected {{expected}}, received {{received}}",
          invalid_type_with_path: "{{path}} is expected {{expected}}, received {{received}}",
        },
      },
      form: {
        paths: {
          userName: "User's name",
        },
      },
    },
  },
});

z.setErrorMap(
  makeZodI18nMap({
    ns: ["zod", "form"],
    handlePath: {
      keyPrefix: "paths",
    },
  })
);

const schema = z.object({ userName: z.string() });
schema.parse({ userName: 1 }); // => User's name is expected string, received number

Namespaces allow you to switch between different translation files. This is useful if you want different error messages for different contexts (e.g., user-facing form validation vs. developer-facing API validation). By default, the library looks in the zod namespace. You can provide an array of namespaces to makeZodI18nMap to search across multiple files.

import i18next from "i18next";
import { z } from "zod";
import { makeZodI18nMap } from "zod-i18n-map";

i18next.init({
  lng: "en",
  resources: {
    en: {
      zod: {
        invalid_type: "Error: expected {{expected}}, received {{received}}",
      },
      formValidation: {
        invalid_type: "it is expected to provide {{expected}} but you provided {{received}}",
      },
    },
  },
});

// use default namespace
z.setErrorMap(makeZodI18nMap());
z.string().parse(1); // => Error: expected string, received number

// select custom namespace
z.setErrorMap(makeZodI18nMap({ ns: "formValidation" }));
z.string().parse(1); // => it is expected to provide string but you provided number

To use zod-i18n-map within a Next.js project using next-i18next, follow these steps:

1. Install the package:

   yarn add zod-i18n-map

2. **Add Translation Files**:
   Copy the Zod translation files from the `zod-i18n` repository and place them in your locale directories under the name `zod.json`.
   Example structure:
   ```text
   . 
   └── public 
       └── locales 
           ├── en 
           │   ├── common.json 
           │   └── zod.json  <-- Copy from zod-i18n/packages/core/locales/en/zod.json
           └── ja 
               ├── common.json 
               └── zod.json  <-- Copy from zod-i18n/packages/core/locales/ja/zod.json

3. Configure next-i18next: Ensure your next-i18next.config.js points to your locale path:

   const path = require("path");
   module.exports = {
     i18n: {
       defaultLocale: "en",
       locales: ["en", "ja"],
     },
     localePath: path.resolve("./public/locales"),
   };

4. Initialize the Error Map in your Page: Inside your React component, use the t function from useTranslation() to initialize makeZodI18nMap and pass it to z.setErrorMap().

This setup ensures that Zod validation errors are automatically translated using your next-i18next configuration.

import { useTranslation } from "next-i18next";
import z from "zod";
import { makeZodI18nMap } from "zod-i18n-map";

function Page() {
  const { t } = useTranslation();
  z.setErrorMap(makeZodI18nMap({ t }));
  // ... rest of component
}

To enable translated Zod errors in a Next.js page, you must:

1. Fetch translations on the server using serverSideTranslations in getServerSideProps.
2. Access the t function via useTranslation() inside the component.
3. Apply the error map using z.setErrorMap(makeZodI18nMap({ t })).

This pattern is compatible with form libraries like react-hook-form using the @hookform/resolvers/zod resolver.

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";
import { makeZodI18nMap } from "zod-i18n-map";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from "next-i18next";

export const getServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale!)),
    },
  };
};

const schema = z.object({
  nickname: z.string().min(5),
});

export default function Page() {
  const { t } = useTranslation();
  z.setErrorMap(makeZodI18nMap({ t }));
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });
  
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <label htmlFor="nickname">Nickname</label>
      <input id="nickname" {...register("nickname")} />
      {errors.nickname?.message && <p>{errors.nickname.message}</p>}
      <button type="submit">submit</button>
    </form>
  )
}