How to prop drill multiple translations from sever component to client component ?

[gsdev01]

Hi,

I'm working with next.js 14 with app/

What is the best way to prop drill multiple translations to a client component ?

I've seen this thread : Allow getTranslations to return objects, not only single translation keys #194

But there is no "official" examples or guide in the doc for this.

I've seen something like :

const t = await import(`/messages/${currentLocale}.json`));

Then I can prop drill the whole translated object to my client component ?
No other way to do it using functions from the lib ?

or I should recreate a full object to prop drill like so :

const t = await getTranslations();
const _t = {
    title: t('title'),
    titleB: t('titleB'),
    // ...
}

How does this affect performances / caching ?

Thanks in advance !

[amannn]

The "How can I implement a form?" expandable section in the Passing translations to Client Components docs shows an approach that avoids "drilling" translated labels into nested components by composing React components instead—allowing you to assign translated labels right where they are needed.

Depending on your app, maybe this could be an option too for you!

If not, you can either pass a few processed labels or alternatively explore the options further down on that page.

Hope this helps!

[gsdev01]

What would be your choice if you need to pass many translations from server component to client component with no options to split the component like in the form example ? How does the other options affect caching/performances ?

I mean I don't understand the main purpose of next-intl (used server side) if we can simply do :

const t = await import(`/messages/${currentLocale}.json`));

Thanks for your help !

[amannn]

If composition doesn't work well in your case, I'd consider using useTranslations in Client Components and providing the relevant messages in a wrapping parent.

The performance implication is that next-intl is loaded on the client side—caching is not affected.

I mean I don't understand the main purpose of next-intl (used server side)

Have a look through the docs to learn about the use cases that the library serves!

[gsdev01]

If composition doesn't work well in your case, I'd consider using useTranslations in Client Components and providing the relevant messages in a wrapping parent.

So using a context provider client side... but as far as I can understand there is a trade off about final build size and performance, really want to avoid this..

Have a look through the docs to learn about the use cases that the library serves!

I've read the docs, and I understand the power/benefits of using the lib server side over client side, but still don't understand what the lib provides over a simple json file ? (don't want to be rude here, just trying to fully understand the benefits of next-intl). Didn't find my answer in the doc..