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

Question

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

\n

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

\n

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

\n

//i18n.js\nconst NextI18Next = require(\'next-i18next\').default;\n\nmodule.exports = new NextI18Next({\n  defaultLanguage: \'en\',\n  otherLanguages: [\'fr\', \'de\', \'nl\', \'it\', \'pt\', \'es\'],\n  localeSubpaths: {\n    en: \'en\',\n    fr: \'fr\',\n    de: \'de\',\n    nl: \'nl\',\n    it: \'it\',\n    es: \'es\',\n    pt: \'pt\',\n  },\n});\n

\n

//next.config.js\n\nconst isProd = process.env.NODE_ENV === \'production\';\n\nmodule.exports = {\n  exportPathMap: async function (defaultPathMap, { dev, dir, outDir, distDir, buildId }) {\n    return {\n      \'/\': { page: \'/\' },\n    };\n  },\n  env: {\n    GLOBAL_URL: isProd ? \'https://siteurl\' : \'http://localhost:3000\',\n  },\n  assetPrefix: isProd ? \'https://siteurl\' : \'\',\n};\n

\n

// languageDropdown.js\nclass LanguageDropdown extends Component {\n  render() {\n    const changeLanguage = (lng) => {\n      i18n.changeLanguage(lng);\n      console.log(lng);\n    };\n    return (\n      <MenuNetwork>\n        <ListMenu>\n          <ListItemMenu>\n            <CurrentLanguage>{i18n.language}</CurrentLanguage>\n            <HoverChevron>\n              <CustomizeChevronDown size="25" />\n            </HoverChevron>\n            <SubListMenu>\n              <SubListMenuItem onClick={() => changeLanguage(\'en\')}>\n                <button>English</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'fr\')}>\n                <button>Franc\xcc\xa7ais</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'de\')}>\n                <button>Deutsch</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'nl\')}>\n                <button>Nederlands</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'it\')}>\n                <button>Italiano</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'pt\')}>\n                <button>Portugue\xcc\x82s</button>\n              </SubListMenuItem>\n              <SubListMenuItem onClick={() => changeLanguage(\'es\')}>\n                <button>Espan\xcc\x83ol</button>\n              </SubListMenuItem>\n            </SubListMenu>\n          </ListItemMenu>\n        </ListMenu>\n      </MenuNetwork>\n    );\n  }\n}\n

\n

Answer 1

就我而言，当用户更改区域设置时，它会转到索引，因此我将此代码放在索引中，如果不是您的情况并且用户停留在同一页面，您可能可以找到一种方法将其稍微更改为为你工作。我发现避免这种情况的解决方法是：

   let temp = [];

   if( typeof window != 'undefined'){
     temp = window?.location?.href?.split("/");
   }
   if( typeof temp[4] != 'undefined'  && temp[4] != null && temp[4] != ""){
     window.location.href = temp[0] + "//" + temp[2] + "/" + temp[4];
   }

注意：我的语言环境堆叠在最后，如果你的语言环境位于中间，则应该更改此行：

window.location.href = temp[0] + "//" + temp[2] + "/" + temp[4];

到：

window.location.href = temp[0] + "//" + temp[2] + "/" + temp[3];