当我改变语言时，Nextjs水化错误
当我改变语言时，Nextjs水化错误
提问于 2022-09-14 09:16:17
我有一个nextjs项目v12.2.4，它使用i18next提供国际化。特别是，我处理两种语言:意大利语和英语。当我使用英语时，应用程序会向我抛出以下错误--，而在意大利语中，一切似乎都很好。
Error: Text content does not match server-rendered HTML.
at checkForUnmatchedText (react-dom.development.js?ac89:9647:1)
at diffHydratedProperties (react-dom.development.js?ac89:10310:1)
at hydrateInstance (react-dom.development.js?ac89:11306:1)
at prepareToHydrateHostInstance (react-dom.development.js?ac89:12564:1)
at completeWork (react-dom.development.js?ac89:22181:1)
at completeUnitOfWork (react-dom.development.js?ac89:26596:1)
at performUnitOfWork (react-dom.development.js?ac89:26568:1)
at workLoopSync (react-dom.development.js?ac89:26466:1)
at renderRootSync (react-dom.development.js?ac89:26434:1)
at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
at workLoop (scheduler.development.js?bcd2:266:1)
at flushWork (scheduler.development.js?bcd2:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
checkForUnmatchedText @ react-dom.development.js?ac89:9647
diffHydratedProperties @ react-dom.development.js?ac89:10310
hydrateInstance @ react-dom.development.js?ac89:11306
prepareToHydrateHostInstance @ react-dom.development.js?ac89:12564
completeWork @ react-dom.development.js?ac89:22181
completeUnitOfWork @ react-dom.development.js?ac89:26596
performUnitOfWork @ react-dom.development.js?ac89:26568
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
3react-dom.development.js?ac89:12507
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js?ac89:12507:1)
at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:12520:1)
at updateHostComponent (react-dom.development.js?ac89:19902:1)
at beginWork (react-dom.development.js?ac89:21618:1)
at beginWork$1 (react-dom.development.js?ac89:27426:1)
at performUnitOfWork (react-dom.development.js?ac89:26557:1)
at workLoopSync (react-dom.development.js?ac89:26466:1)
at renderRootSync (react-dom.development.js?ac89:26434:1)
at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
at workLoop (scheduler.development.js?bcd2:266:1)
at flushWork (scheduler.development.js?bcd2:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
throwOnHydrationMismatch @ react-dom.development.js?ac89:12507
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:12520
updateHostComponent @ react-dom.development.js?ac89:19902
beginWork @ react-dom.development.js?ac89:21618
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25738
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:19849
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js?ac89:19849:1)
at beginWork (react-dom.development.js?ac89:21615:1)
at beginWork$1 (react-dom.development.js?ac89:27426:1)
at performUnitOfWork (react-dom.development.js?ac89:26557:1)
at workLoopSync (react-dom.development.js?ac89:26466:1)
at renderRootSync (react-dom.development.js?ac89:26434:1)
at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
at workLoop (scheduler.development.js?bcd2:266:1)
at flushWork (scheduler.development.js?bcd2:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
updateHostRoot @ react-dom.development.js?ac89:19849
beginWork @ react-dom.development.js?ac89:21615
beginWork$1 @ react-dom.development.js?ac89:27426
performUnitOfWork @ react-dom.development.js?ac89:26557
workLoopSync @ react-dom.development.js?ac89:26466
renderRootSync @ react-dom.development.js?ac89:26434
recoverFromConcurrentError @ react-dom.development.js?ac89:25850
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25750
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533当然，我已经回答了一些问题(比如this或this)，但是我找不到适合我的情况。我相信造成这个错误的原因是i18next是意大利语服务器端，而客户端是英语服务器端，所以它说它不匹配。
这是我的i18n.ts文件：
import i18n, { StringMap, TOptions } from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next, useTranslation as i18nextUseTranslation } from 'react-i18next';
import postProcessor from 'i18next-sprintf-postprocessor';
import en from '../public/locales/en/translation.json';
import it from '../public/locales/it/translation.json';
export const resources: Resources = {
en: {
translation: en,
},
it: {
translation: it,
},
};
i18n
.use(initReactI18next)
.use(LanguageDetector)
.use(postProcessor)
.init({
fallbackLng: ['it', 'en'],
debug: false,
interpolation: {
escapeValue: false,
},
defaultNS,
resources,
react: {
useSuspense: false,
},
});你对如何修正这个错误有什么建议吗？
Stack Overflow用户
发布于 2022-09-14 20:10:12
我通过避免在第一次渲染时返回应用程序来解决这个问题。
app.tsx
function MyApp({ Component, pageProps }: AppProps) {
//at the first render initialRenderComplete is false
const [initialRenderComplete, setInitialRenderComplete] = useState<boolean>(false);
useEffect(() => {
setInitialRenderComplete(true);
}, []);
if (!initialRenderComplete) return <></>;
return (
<>
<GlobalContext.Provider value={global?.attributes}>
<Component {...pageProps} />
</GlobalContext.Provider>
</>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73714388
复制相关文章
相似问题
腾讯云开发者
