Nextjs hydration error when I change language

Question

I have a nextjs project v12.2.4 and it provides internationalization using i18next. In particulare I handle 2 languages: Italian and English. When I use English language the app throws me the following errors, while in Italian everything seems to be all right.

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

Of course I checked it out on the already answered questions (like this or this), but I couldn't find anything for my case. I believe the reason for this error is i18next which server side it is in Italian while client side is in English so it says that it doesn't match.

This is my i18n.ts file:

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,
    },
  });

Do you have any suggestion on how to fix this error?

Why aren't you using next-i18next? – adrai Sep 14 '22 at 12:40 — adrai, Sep 14 '22 at 12:40
react-i18next. Yeah I use it! – Loudrous Sep 14 '22 at 12:42 — Loudrous, Sep 14 '22 at 12:42
I mean https://github.com/i18next/next-i18next – adrai Sep 14 '22 at 13:14 — adrai, Sep 14 '22 at 13:14
Uh all right GG. I haven't seen this before yet. – Loudrous Sep 14 '22 at 13:29 — Loudrous, Sep 14 '22 at 13:29

score 0 · Answer 1 · answered Sep 14 '22 at 20:10

0

I solved this issue by avoiding to return the app at the first render.

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>
    </>
  );
}

answered Sep 14 '22 at 20:10

Loudrous

1,039
10
29

4

While this may solve the hydration errors, it's not a good solution. This will prevent server-side rendering for the whole app, defeating the purpose of using Next.js in the first place. Look into integrating `next-i18next` into your Next.js app which handles translation properly with SSR/SSG. See the official examples: https://github.com/i18next/next-i18next/tree/master/examples/simple. – juliomalves Sep 16 '22 at 17:59
Thank you @juliomalves! I just replaced react-i18next with next-i18next and everything seems to be all right! – Loudrous Oct 08 '22 at 16:57

Nextjs hydration error when I change language

1 Answers1