i18n example

[quick691fr]

Hi,

I downloaded the i18n-next example from the examples folder. I ran yarn and yarn dev to start the project, it's displaying the blog-posts list page. If I switch language to German and hit refresh button, I got this error :

It seems translations are done on the client side and cause a Hydration problem ?

[BatuhanW]

Hey @quick691fr can you try to pass a value 'en', instead of undefined here and let me know if it fixes the issue?

refine/examples/i18n-nextjs/src/providers/i18n/index.ts

Line 18 in 74fe3d0

lng: undefined, // let detect the language on client side

[quick691fr]

Hi @BatuhanW,

If I do that, I don't have error anymore but language is forced as english if I refresh page instead of using cookie value.

[quick691fr]

@BatuhanW any news ?

[alicanerdurmaz]

Hello @quick691fr, I'm sorry you're having this issue.

The problem is that i18next can’t find the current language from the cookie on the server side in Next.js. I’ll check it out, but I need a bit of time.

Here’s a link with more details: https://locize.com/blog/next-app-dir-i18n/

[alicanerdurmaz]

Hello @quick691fr, we used https://github.com/amannn/next-intl package to support client and server translations, and hydration errors are gone. I'm closing the discussion now, feel free to open it again if you encounter any other problem 🙌

[quick691fr]

Thanks @alicanerdurmaz

[alicanerdurmaz]

I forgot to add the example link. Here it is: https://github.com/refinedev/refine/tree/main/examples/i18n-nextjs