How can I use translations outside of components?

[hqw567]

How to use translation outside of components? I have some special circumstances where I need to use translation outside of the component. Is there a compatible method to use translation outside of the component? Although it is troublesome and terrible, I still need to consider this situation.

[nishantbhavasar]

Hello @hqw567,
i have this same type of requirement have you found any solution to use translation outside of the component.

i am working with next.js or i have implement translation both side client side or server side component but i am calling Api's outside my components and need to handle error or other things in multi language
so if you find any solution of this please provide me

Thank you

[hqw567]

@amannn Can you help us out?

[amannn]

Please see https://next-intl-docs.vercel.app/blog/translations-outside-of-react-components

[hqw567]

If I must use it outside of a component? (I believe there are many others with the same need as me) Could you consider a compromise solution, rather than instructing users on how to avoid the issue?

[hqw567]

In my view, a well-designed library should aim to minimize the cognitive load on developers, enabling them to code more intuitively rather than having them spend a significant amount of time learning how to avoid potential pitfalls. The goal of a library should be to simplify common tasks and make them straightforward, not to force developers to memorize and navigate through a minefield of issues.

[amannn]

I agree. The blog post I've linked to tries to explain just that, how issues that might not be apparent upfront can be avoided automatically by restricting message consumption to components. It might feel limiting in certain cases but ultimately tries to push for robust code that avoids bugs in the first place.

[cini9]

Just to add to the discussion here. I've found a use case for using translations outside of components using yup (validation library for forms). I've been trying to create a schema like so :

export const getContactSchema = (t: any) =>
  object({
    firstName: string().label(t('firstName')).required(),
    lastName: string().label(t('lastName')).required(),
    birthDate: date().label(t('birthDate')).required(),
    gender: string<Gender>().label(t('gender')).required(),
  })

which uses the translated labels for error messages based on locale. Now this schema is used in multiple forms, and is concatenated with other schema as needed. So to keep my component code clean and DRY, I extract the individual schema into separate files which are not React components and then fetch them from the React components :

const contactSchema = useMemo(() => getContactSchema(t), [t])

As you can see, I need to pass the t function to the getContactSchema method in order to specify translated labels, as I am unable to use useTranslations nor getTranslations. Besides having to type the t function correctly (which I have been unable to do so far 😢 ), I don't think that this is scalable for larger applications.

Other libraries expose the i18n object so that we can call i18n.t function outside of components and use translations where needed.

@amannn I understand your approach, but I find that there are also use cases where translations outside of components are really useful. Is there any way you can reconsider allowing translations outside of components ?

[hqw567]

'use client'
import { useTranslations } from 'next-intl'
import React, { useEffect } from 'react'
import { create } from 'zustand'

type TranslationType = ReturnType<typeof useTranslations>

interface TranslationsStore {
  t?: TranslationType
  setT: (t: TranslationType) => void
}

export const useTranslationsStore = create<TranslationsStore>((set) => ({
  setT: (t) => {
    set({ t })
  },
}))

export const getTranslations = () => useTranslationsStore.getState().t

const TranslationsProvider = ({
  children,
}: Readonly<{
  children: React.ReactNode
}>) => {
  const t = useTranslations()
  useEffect(() => {
    useTranslationsStore.getState().setT(t)
  }, [t])

  return children
}

export default TranslationsProvider

Use TranslationsProvider to wrap root layout so it can be obtained anywhere, but it is not safe

const t = getTranslations()

[cini9]

@hqw567 Thanks a lot for this. I had thought about using a ReactContext (which I figured wouldn't work since I'm trying to obtain the t function outside of components) but I hadn't thought of storing the t function using zustand. I will definitely give it a try. What do you mean that it's not safe though ?

[cini9]

I've tried to set this up, but I've come across one major inconvenience, which I have yet to solve. Essentially, since the t function can be undefined (according to typescript), I have to do a if (t) check everywhere I plan to use the t function coming from getTranslations. Any ideas on how this can be fixed ?

[hqw567]

export const getTranslations = () => (useTranslationsStore.getState().t as TranslationType)

[cini9]

Thanks @hqw567 I will give it a try !