Incorrect information written in the docs regarding the import of useTranslation hook - https://github.com/i18next/next-i18next#usetranslation

[MishaBatsiashvili]

when we import the useTranslationhook from the react-i18next library and use it inside the next.js app it causes an error. in the documentation it is written that we can import from either next-i18next or react-i18next library, but actually we can only import it from the next-i18next, because importing it from react-i18next causes a hydration error

[adrai]

It's not written you can use both, but I will make it more clear....

[martinharyanto]

I am not sure why, but this really help me out with my problem.

I was having problem setting up new nextjs + next-i18next. When i add the next-i18next it keeps giving me hydration error. After searching for painful couple of hours (as the result of not knowing what was the problem, even using <Suspense> did not help) I come across this and when i checked it was because the default import from VS Code, prefer react-18next rather than next-i18next.

Just leaving this comment for whoever might stumble upon same problem 🙏

[aaimio]

While not super ideal, in our project, we've added an ESLint rule to disallow imports from react-i18next to ensure we don't import the wrong useTranslation:

"no-restricted-imports": [
  "error",
  {
    "paths": [
      {
        "name": "react-i18next",
        "importNames": ["useTranslation"],
        "message": "Import useTranslation from next-i18next instead."
      }
    ]
  }
]

Alternatively, you could look into autoImportFileExcludePatterns, although it'll be isolated to a single developer's machine.