Nextjs 水化失敗

Question

我正在使用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 <></>;
    }
}

當我有沒有 if 語句的_app.js時：

if (!isServer) {
    init_i18n();
}

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

它給了我其他水合作用錯誤： Warning: Text content did not match. Server: "navbar.dashboard" Client: "Dashboard" Warning: Text content did not match. Server: "navbar.dashboard" Client: "Dashboard"

非常感謝您的幫助！

Answer 1

我現在使用next-i18next而不是使用react-i18next i18next ，而且我不再有補水的問題。 希望這對你有幫助！

Answer 2

此類水合作用問題是因為某些代碼正在嘗試使用服務器上不可用的 window object。 將此類代碼移至 componentDidMount 或功能組件中的等效代碼。