reactjs 带有next-i18 next的NextJS产生错误文本内容不匹配

ajsxfq5m  于 2023-02-03  发布在  React
关注(0)|答案(3)|浏览(196)

我想我已经完全按照他们的文档指定设置了next-i18 next,但是我收到了错误“文本内容不匹配。服务器:“测试ZH HANT”客户:“Testing EN”-前端只显示英语文本。我一定错过了什么,但我的生活我看不到什么。
以下是这些文件:
next-18next.config.js:

module.exports = {
    i18n: {
        locales: ['en-US', 'zh-hant', 'zh-hans'],
        defaultLocale: 'en-US',
        localeDetection: false
    },
};

next.config.js:

const { i18n } = require('./next-i18next.config');

module.exports = {
    images: {
        domains: ['mydomain.com'],
    },
    i18n,
    target: 'serverless'
}

_应用程序.js:

import '../styles/globals.scss'
import Head from "next/head";
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps, mainMenu, footerMenu }) {
  return(
      <Component {...pageProps} />
  )
}

export default appWithTranslation(MyApp);

Article.js:

import { useTranslation } from 'next-i18next';

export default function Article(props){

    const node = props.node;
    const { t } = useTranslation(['common']);
return(
        <div>{t('Testing')}</div>
)}

export async function getStaticProps(context) {
    const { alias } = context.params;
    const lang = context.locale;
    const node = await restGet(`/endpoint?_format=json&slug=${alias.join('/')}&lang=${lang}`);
    const globals = await getGlobals(lang);
    const props = {
        ...{node: node},
        ...globals,
        ...(await serverSideTranslations(lang, ['common']))
    };

    return {
        props,
        revalidate: 5
    }
}

公共/区域设置/zh-hant/通用.json:

{
  "Testing": "Testing ZH HANS"
}
zengzsys

zengzsys1#

您是否尝试过在i18next配置文件中指定localePath

const path = require('path')

module.exports = {
  ...
  localePath: path.resolve('./public/locales')
}
m1m5dgzv

m1m5dgzv2#

事实证明,zh-Hant实际上应该是zh-Hant --总是细节:)

0s0u357o

0s0u357o3#

当我使用几个语言文件时,我遇到了这个错误。在客户端上,我正在阅读一个文件about.json

const { t } = useTranslation(["about"])

但是我忘了在getStaticProps中加载这个翻译文件,所以我不得不在这里也添加它:

props: {
    ...(await serverSideTranslations(locale, ["common", "about"])),
},

相关问题