Best practices for translations when we have a large use of client components

[piusidev]

I am working on a project with Next 14 that has a lot of user interactions and reactivity and i have some doubts about how implement nex-intl in the best way.

How i have a lot of client components and all of this need a lot of translated texts, is better to create a NextIntlClientProvider for each component and pass only the messages that will be used or due to the high use of the client components in many locations is better encapsule the entire application in a NextIntlClientProvider and provide all mesages once?

I created a HOC to provide the messages for specifc components but i dont know if in terms of performance this is the best solution.

import { NextIntlClientProvider, useMessages } from 'next-intl'
import type { ComponentType } from 'react'

import pick from 'lodash.pick'

export function withLocale<T extends object, K extends keyof Messages>(
  Component: ComponentType<T>,
  namespaces: K[],
) {
  return function ComponentWithLocale(props: T) {
    const messages = useMessages()

    return (
      <NextIntlClientProvider messages={pick(messages, namespaces)}>
        <Component {...props} />
      </NextIntlClientProvider>
    )
  }
}

and a example of use:

import { useTranslations } from 'next-intl'

import { withLocale } from '@/hocs/with-locale'

import { DataTable } from './data-table'
import { Dropdown} from './dropdown'

const LocalizedDataTable = withLocale(DataTable, ['common', 'tables'])
const LocalizedDropdown = withLocale(Dropdown, ['common', 'assistance'])

export default function Page() {
  const t = useTranslations('common')

  return (
    <main>
      <h1 className="mb-4 text-4xl capitalize">{t('title')}</h1>

      <LocalizedDataTable />
      <LocalizedDropdown />
    </main>
  )
}

[vitalijalbu]

Hi, I'm also looking for that reply... basically you must
const t = useTranslations() in every component? Or there's a way to do it globally as props.