Error: async/await is not yet supported in Client Components, only Server Components when translating parent client component and child server component in Next.js. about react-i18next HOT 6 CLOSED

You need to create something similar to this Footer component: https://github.com/i18next/next-app-dir-i18next-example/tree/main/app/%5Blng%5D/components/Footer

from react-i18next.

basically, pass the t function down to the Server and or the Client component so you don't need to call useTranslation in those components

from react-i18next.

Awesome. Thanks Adriano. So, just to clarify, it doesn't matter that I'm passing t created from a client component into a server component and vice versa? It seems to work alright.

And also, when do we use useTranslation in a child component and when do we pass t to the child as a prop. In the Footer example, app/[lng]/client-page/page.js does not pass t to the child component Footer; instead, Footer calls useTranslation.

Thanks again.

from react-i18next.

the t function can be passed to any component... that should never be a problem...
The Footer example is a little bit different than your example... it has a FooterBase component (receiving the t function via prop), used by the Footer component of the client or used by the Footer component of the server. => so the useTranslation call is always specific to the environment (client or server), and the t function can be passed to whatever component you like

from react-i18next.

I see. Thanks so much for the help!

from react-i18next.

Currently passing lng and calling useTranslation in the child when the parent is a server component and the child is a client component because of error: 'Functions cannot be passed to Client components'. For everything else, I pass the t function down. I would like to believe React will work on making this possible in the future.

from react-i18next.