Nextjs 补水失败答案

【问题标题】：Nextjs hydration failedNextjs 补水失败
【发布时间】：2022-10-06 00:02:58
【问题描述】：

我正在使用 react-i18next 依赖项，但在将它与 next.js 一起使用时遇到问题

在我的_app.js 我有：

if (!isServer) {
    init_i18n();
}

function MyApp({ Component, pageProps }) {
    // this if statement is causing a problem!
    if (i18n.isInitialized) {
        return <Component {...pageProps} />;
    } else {
        return <></>;
    }
}

当我有 _app.js 没有 if 语句时：

if (!isServer) {
    init_i18n();
}

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

它给了我其他补水错误：Warning: Text content did not match. Server: \"navbar.dashboard\" Client: \"Dashboard\"

非常感谢您的帮助！

当您提到 if 语句时，确切的错误信息是什么？您可以分享错误堆栈跟踪以进行更好的调试吗？
@LakshyaThakur 我收到 2 个错误：Error: Hydration failed because the initial UI does not match what was rendered on the server.； Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
有一个 nextJs 特定的 i18n 库，它将为您减轻繁重的工作：github.com/i18next/next-i18next - 惊喜：它基于 react-i18next。

标签： javascript next.js react-i18next

【解决方案1】：

我现在使用的是next-i18next，而不是使用react-i18next，而且我不再遇到补水问题了。希望这对你有帮助！

【讨论】：

【解决方案2】：

这种水合问题是因为某些部分代码试图使用服务器上不可用的窗口对象。将此类代码移至 componentDidMount 下或功能组件中的等效项。

【讨论】：