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

Question

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

应用程序首先在 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>
    );
  }
}