The lng value is being rendered infinitely from the server component to the client component.

[HakanSungur]

I followed all the details in the article at https://locize.com/blog/next-app-dir-i18n/. I did the same thing. I am using React 18 and Next.js 14. In the server component, I am passing the value obtained from params: { lng } to my client component as props. When I use const { t } = useTranslation(lng) in the client component, my client component renders infinitely. However, when I do not pass the lng value with const { t } = useTranslation(), I get an error saying that the UI components are not the same on the server side and client side. Additionally, when I use /stays instead of {lng}/stays, I want it to automatically convert to en/stays. I managed to achieve this before, but it broke again. I have configured i18n in CRA applications for years, but I am struggling for the first time. I want these issues to be resolved. You can use your own repository from the source mentioned above.

[adrai]

Please fork this repository (https://github.com/i18next/next-app-dir-i18next-example) and adapt it until you can reproduce your issue.

fyi: you always need to pass the lng value for the useTranslation function, since there is no way on server side to get it magically from somewhere else...