如何使用 next18-next 翻译 yup 错误？

问题描述

如何使用 next18-next 翻译 yup 错误，因为它应该在服务器端呈现？

是否可以在 next18-next 翻译字符串中使用占位符？

解决方法

解决这个问题非常简单。

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 带有默认 yup 文本：

{
  "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}"
}