Hydratation error

[Alarid]

🐛 Bug Report

When using last versions for next-i18next, react-18next and i18next, the setup instructions don't work. On the server, translations are not loaded, resulting in a hydratation error: Error: Text content does not match server-rendered HTML..

This (very simple) home page and the basic configuration mentioned in the setup instructions causes the error :

import { useTranslation } from "react-i18next"
import { serverSideTranslations } from "next-i18next/serverSideTranslations"
import { GetStaticProps } from "next"

export default function Home() {
  const { t, ready } = useTranslation()

  console.log(ready, t("home.title"))

  return (
    <div>
      <h1>{t("home.title", "Static page")}</h1>
    </div>
  )
}

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale || "en", ["common"])),
    },
  }
}

On the server, the console.log prints "false home.title". In the browser I can see the translated text ("Static page"), with the hydratation error.

To Reproduce

A reproduction repo can be found here : https://github.com/Alarid/i18next-repro I created the project using npx create-next-app@latest --typescript --eslint i18next-repro, then I added the dependencies using yarn add next-i18next react-i18next i18next.

Expected behavior

Translations should be loaded on the server, when building static and server-side pages.

Your Environment

• Mac M1 (macOS Monterey 12.5)
• Node v16.13.2

Relevant packages versions:

    "i18next": "^22.4.6",
    "next": "13.0.7",
    "next-i18next": "^13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^12.1.1",

Side note

This wasn't the error I was trying to showcase when I created the reproduction repo. In fact, I have another project with exactly the same packages versions where translations are being successfully loaded on the server, and everything work as expected when pages use getStaticProps.

However, when switching the page to getServerSideProps, they seem to only be ready in the page file. All the components used in the page (and written in other files, located in src/components don't have access to the translations (ready = false), causing the same hydratation error. This was the error I was trying to get help on, but I spent two hours trying to reproduce it, and I couldn't. No idea what's going on here.

[adrai]