Next.js 与 i18n 错误：警告：文本内容不匹配服务器：“”客户端：“fr”

如何解决Next.js 与 i18n 错误：警告：文本内容不匹配服务器：“”客户端：“fr”

我们在加载时遇到此错误。

应用程序首先在 URL http://localhost:3000/ 加载，然后当我们切换到 ex: french 我们得到 http://localhost:3000/fr 但是当我们再次将语言切换到 ex: deutsch 我们得到 http://localhost:3000/de/fr 等等。新选择的语言路径插入在第一个选择的语言和根 URL 之间。

此外，如果我们直接转到 ex: http://localhost:3000/fr，我们会以正确的语言登陆正确的页面。

//i18n.js
const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'en',otherLanguages: ['fr','de','nl','it','pt','es'],localeSubpaths: {
    en: 'en',fr: 'fr',de: 'de',nl: 'nl',it: 'it',es: 'es',pt: 'pt',},});

//next.config.js

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  exportPathMap: async function (defaultPathMap,{ dev,dir,outDir,distDir,buildId }) {
    return {
      '/': { page: '/' },};
  },env: {
    GLOBAL_URL: isProd ? 'https://siteurl' : 'http://localhost:3000',assetPrefix: isProd ? 'https://siteurl' : '',};

// languageDropdown.js
class LanguageDropdown extends Component {
  render() {
    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
      console.log(lng);
    };
    return (
      <MenuNetwork>
        <ListMenu>
          <ListItemmenu>
            <CurrentLanguage>{i18n.language}</CurrentLanguage>
            <HoverChevron>
              <CustomizeChevronDown size="25" />
            </HoverChevron>
            <SubListMenu>
              <SubListMenuItem onClick={() => changeLanguage('en')}>
                <button>English</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('fr')}>
                <button>Français</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('de')}>
                <button>Deutsch</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('nl')}>
                <button>Nederlands</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('it')}>
                <button>Italiano</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('pt')}>
                <button>Português</button>
              </SubListMenuItem>
              <SubListMenuItem onClick={() => changeLanguage('es')}>
                <button>Español</button>
              </SubListMenuItem>
            </SubListMenu>
          </ListItemmenu>
        </ListMenu>
      </MenuNetwork>
    );
  }
}