如何解决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 举报,一经查实,本站将立刻删除。