Question

我有一个使用子路径路由的具有 4 个语言环境的应用程序。在开发过程中它运行良好，但在构建过程中使用了错误的语言环境集。这会导致页面加载错误翻译，然后转向更正导致闪烁的页面。这发生在本地和生产中（我使用 vercel）。而且它不依赖于活动的子路径（我在 example.com、example.com/fr 等上获得随机页面版本）。

我的next-i18next.config.js

const path = require("path");

module.exports = {
  // config for next's internationalized routing
  i18n: {
    defaultLocale: "en",
    locales: ["en", "de", "fr", "cn"],
    localeDetection: false,
  },

  // config for i18next
  localePath: path.resolve("./src/locales"),
  fallbackLng: "en",
  defaultNS: [],
};

我的 getStaticProps src/pages/index.tsx

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  console.log("getting static props for", locale);
  return {
    props: {
      ...(await serverSideTranslations(locale!, [
        "navigation",
        "fileTypes",
        "features",
        "footer",
      ])),
    },
  };
};

然后是我的 src/pages/index.tsx 本身

const IndexPage = () => {
  const { locale } = useRouter();
  console.log('rendering index page for', locale);

  return <div><Navbar /></div>
}

和src/components/Navbar

const Navbar = () => {
  const { locale } = useRouter();
  const { t } = useTranslation('navigation');

  console.log(`from nav: locale is ${locale} and translation is ${t('navigation:pricing')}`);

  return <nav>...</nav>
}

现在，当我进行下一次构建时，我会按以下顺序收到消息：

getting static props for en
getting static props for de
getting static props for fr
getting static props for cn
from nav: locale is en and translation is Tarifs
rendering index page for en
from nav: locale is de and translation is Tarifs
rendering index page for de
from nav: locale is fr and translation is Preise
rendering index page for fr
from nav: locale is cn and translation is Preise
rendering index page for cn

我已经为此问题苦苦挣扎了几天，但找不到任何可能导致此问题的原因。任何想法我做错了什么？

next-i18next 在构建期间使用了错误的资源设置

0 个答案: