harsh-harlequin
harsh-harlequin7mo ago

Hi Guys, I have implemented i18n on

Hi Guys, I have implemented i18n on Refine with next.js from the documentation, I used localized files to replace <AuthPage> component texts and it's working but the translation seems done on client side and then I got en Error message saying : "Text content does not match server-rendered HTML". Any know how I can make the translation done on the server side to prevent this Hydration problem ?
2 Replies
other-emerald
other-emerald7mo ago
Hey @quick691 you can check our nextjs example here: https://refine.dev/docs/examples/i18n/i18n-nextjs/
Next.js | Refine
Refine i18n Provider allows you to add multiple language choices to your web application. The default language of Refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.
magic-amber
magic-amber6mo ago
Hi @Batu, that's exacltly the example I followed and got the Error "Text content does not match server-rendered HTML" when refreshing a page with not the default language selected. Ex : you have a page translated in English and French, you switch language to French one and then you refresh the page, then the page displays english as default and client side is translating the page and then you have a difference between initia english generated on server and french displayed in client.