Next.js — useTranslation use correct package
Published in
Jul 8, 2024
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 librarynext-i18next
instead ofreact-i18next
. This is because the response ofserverSideTranslations
is a custom object with_nextI18Next
property.
Solution
Everything works after I switch to next-i18next
package.