Hydration error

[njarraud]

🐛 Bug Report

There is currently an hydration error on the first load of a page with a language other than the fallback language. I believe that this is due to the fact that the i18next client in app/i18n/client.js is initialised with the fallback language and later on changed in useTranslation using i18next.changeLanguage(lng) which is asynchronous. Therefore the first render is made using the translation of the fallback language which doesn't match the language pre-rendered by the server.

Warning: Text content did not match. Server: "Se connecter" Client: "Login"

[adrai]

may be... but just a warning Need to check if we can get the language for init... maybe with the language detector

[njarraud]

It is actually an error even if the text says warning.

Even if it would work, the page is still rendered with the fallback language first before being updated with the requested language. So it generates an ugly flicker on load.

I have been trying to initialise i18next inside a component in the root layout, but for some reason use(initReactI18next) creates an almost infinite loop if I use resourcesToBackend.

const I18nProvider = ({ locale, children }: ProviderProps) => {
  const { current: i18n } = useRef(
    createInstance()
      .use(initReactI18next)
      .use(
        resourcesToBackend(
          (language: string, namespace: string) => import(`shared/locales/${language}/${namespace}.json`),
        ),
      )
      .init(getOptions(locale)),
  );

  return <I18nContext.Provider value={{ locale }}>{children}</I18nContext.Provider>;
};

[adrai]

The language detector seems to help: https://github.com/i18next/next-13-app-dir-i18next-example/commit/cfe77fbdb25408f183dd2839a14a745fd1ede8f4

[njarraud]

Just tried your solution. The error is gone in the console.

However it flickers if you change the local manually in the url and reload. I guess it is because of the locale storage var with the key i18nextLng

[adrai]

I'm not able to see any flickering, but just in case: https://github.com/i18next/next-13-app-dir-i18next-example/commit/69ba28c74505ce0363cfaf7ae9c770c48bbda684

[guilhermeavanci]

Hi! Sorry for commenting on a closed issue, but I keep getting the same error here. Is there a fix nowadays or we're just accepting the situation?

Edit: NVM, THIS IS NOT RELATED TO THE ISSUE ABOVE.

[adrai]

Not able to reproduce your issue @guilhermeavanci

[SharifSitech]

@guilhermeavanci did u solve it i have the same issue

[guilhermeavanci]

@SharifSitech

Sorry guys, my trouble wasn't related to this issue.

My situation was related to not adding the correct lng to the useTranslation hook on the client side. Maybe your issue is the same, I suggest you have a closer look into your hook's parameters.

[joaopedrodcf]

I was having the same issue and wrapping the application that is an CSR only in a Suspense made the fix 💯