使用 i18next 嵌套翻译 Next js 14 应用程序

Question

因此，我尝试使用 i18next lib 本地化我的下一个 js 14 应用程序，一切正常，但嵌套翻译不起作用：

{t("components.navbar.navbarlist.home")}

它按原样显示，它应该只是“Home”

这是我的 i18n.js:

i18next
  .use(initReactI18next)
  .use(HttpApi)
  .use(LanguageDetector)
  .init({
    resources,
    react: {
      useSuspense: false,
      wait: true,
    },
    supportedLngs: ["en", "ar"],
    fallbackLng: "en",
    detection: {
      order: ["path", "cookie", "htmlTag"],
      caches: ["localStorage", "cookie"],
    },
    debug: false,
    whitelist: languages,
    nsSeparator: false, // Corrected typo in your code
    keySeparator: false, // Corrected typo in your code
    backend: {
      loadPath: "./public/locales/{{lng}}/common.json", // Changed to a relative path
      crossDomain: true,
    },
    interpolation: {
      escapeValue: false,
    },
  });

我还应该提供什么？我该如何解决它？

Answer 1

我假设您正在使用

react-i18next

库。我建议您使用

next-i18next

库，因为您正在开发 NextJS 应用程序。

使用

next-i18next

，要返回对象，您必须指定要返回对象：

const { t } = useTranslation("common");

const translated = t("components.navbar.navbarlist.home", { returnObjects: true });

但是如果“home”键的值是一个字符串，这应该足够了：

const translated = t("components.navbar.navbarlist.home");

检查它是否正确嵌套在您的语言环境 .json 文件中。