Next.js — useTranslation use correct package

I implemented the Internationalization (i18n) with useTranslation in my Next.js project. I had everything setup properly and got this error when I loaded the page.

It looked like the server side not matching with the client side translation text. After I researched a while, here is the reason.

Make sure you import your useTranslation from the i18n Next.js library next-i18next instead of react-i18next. This is because the response of serverSideTranslations is a custom object with _nextI18Next property.

Solution

Everything works after I switch to next-i18next package.

Reference

NextJS+NextI18Next hydration error when trying to map through array: "Text content does not match…