i18next in client-components

Unanswered

Asian black bear posted this in #help-forum

Asian black bearOP

2024-09-24T18:47:33.501Z

I have just added i18next to my project and it works great so far with server components. I have a multi step form, which includes multiple form components which are all client components. Is there a best practice for injecting translations into client components? The documentation states that the most efficient way is to inject it as props, but I can't imagine this to be the solution, because there are so many form fields and so many translations to consider... How would you tackle this?

5 Replies

@Asian black bear I have just added i18next to my project and it works great so far with server components. I have a multi step form, which includes multiple form components which are all client components. Is there a best practice for injecting translations into client components? The documentation states that the most efficient way is to inject it as props, but I can't imagine this to be _the_ solution, because there are so many form fields and so many translations to consider... How would you tackle this?

gin

2024-09-24T21:54:06.482Z

uhm

u can await your translations object in your layout and pass it to a clientside context

then create a hook that returns your context

Pyramid ant

2024-09-27T14:56:31.745Z

One question: in your server component are you able to use <Trans> element? (I use it a lot in i18n projects)

Is super handy for complex html styling managin in one single translation