CODEWITHSUNDEEP
javascriptnext.jsreact-i18next
Penny M.
Penny M.

Reputation: 147

Nextjs hydration failed

I am using react-i18next dependency, and I am having problems with using it with next.js

In my _app.js I have:

if (!isServer) {
    init_i18n();
}

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

When I had _app.js without if statement:

if (!isServer) {
    init_i18n();
}

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

It was giving me other hydration error: Warning: Text content did not match. Server: "navbar.dashboard" Client: "Dashboard"

Help is greatly appreciated!

Upvotes: 0

Views: 2264

Answers (2)

Penny M.
Penny M.

Reputation: 147

Instead of using react-i18next I am now using next-i18next, and I don't have this issue with hydrating anymore. Hope this helps you!

Upvotes: 7

Ranu Vijay
Ranu Vijay

Reputation: 1249

Such hydration issues is because some part of code is trying to use window object which is not available on server. Move such code under componentDidMount Or equivalent in functional component.

Upvotes: 0

Related Questions