Question

我想我已经按照他们的文档指定的方式设置了 next-i18next，但我收到错误“文本内容不匹配。服务器：“测试 ZH HANT”客户端：“测试 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'
}

_app.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);

文章.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
    }
}

public/locales/zh-hant/common.json:

{
  "Testing": "Testing ZH HANS"
}

Answer 1

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

const path = require('path')

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

Answer 2

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

NextJS 与 next-i18next 产生错误文本内容不匹配

2 个答案: