CODEWITHSUNDEEP
node.jsnext.jsnext.js13i18next
VQH DEV
VQH DEV

Reputation: 83

Error when using Next.js 14 and next-i18next without locale path and saving locale in cookie

I am trying to implement internationalization in Next.js 14 by saving the locale in a cookie–without locale paths like /en and /fr. I have encountered an error on client-side pages when the locale differs from the default language: Error: Text content does not match server-rendered HTML.

I am using the next-i18next plugin, and the official sample repository fails with the same error. Here is the discussion that inspired the sample repository.

Thank you.

Upvotes: 0

Views: 384

Answers (1)

Saqif Haque
Saqif Haque

Reputation: 408

If you are using Server Components in Next.js, you must follow path-based internationalization (e.g., /en, /fr). This is because server-rendered content needs to match exactly with client-rendered content to avoid hydration errors.

However, if you want to avoid path-based internationalization and instead save the locale in a cookie, you need to make all your pages client-side rendered. This can be achieved by adding use client at the top of your component files.

It would be more easy to diagnose if you share your code.

Upvotes: 0

Related Questions