微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我有一个使用子路径路由的具有 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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。