How to translate yup errors with next18-next? - localization

Question

How can I translate yup errors with next18-next since it should be server-side rendered?
Is it possible to use placeholders in next18-next translations strings?

Answer 1

It was pretty simple to solve this.
validate.ts:
export const setValidationTranslations = (t: TFunction) => {
const required = t("required");
const minString = t("min_string");
const maxString = t("max_string");
const emailValid = t("email_valid");
const minNumber = t("min_number");
const maxNumber = t("max_number");
setLocale({
mixed: {
required: required,
},
string: {
min: minString,
max: maxString,
email: emailValid,
},
number: {
min: minNumber,
max: maxNumber,
},
});
};
export const schema = () => {
return object().shape({
email: string().email().required(),
password: string().required().min(6),
});
};
Page.tsx:
import {
setValidationTranslations,
schema,
} from "./validate";
function Page() {
const { t } = useTranslation("common");
setValidationTranslations(t);
...
}
common.json with default yup texts:
{
"required": "${path} is a required field",
"email_valid": "${path} must be a valid email",
"min_string": "${path} must be at least ${min} characters",
"max_string": "${path} must be at most ${max} characters",
"min_number": "${path} must be greater than or equal to ${min}",
"max_number": "${path} must be less than or equal to ${max}"
}