How to use next-translate in helper files

[hspotted]

Until now i have an application that uses react-hook-forms, nextjs and yup. My yup schema files are separated of main component to code organization.
However, by a requirement of the customer we needed to implement multilanguage support. Was very easy to implement in components, but, in helper methods and for example this yup.schema files was impossible because i cannot use useTranslate on them.

In this cases, how can i perform translation?

[kyawzintun]

Any update on this issue?

[aralroca]

With useTranslation hook is possible because have access to the context: locale, page namespaces... In the helpers no.

The logic of the translations is part of the rendering and we recommend that it is done in the components. In the helpers, you can return the key and the namespace so that later the component renders it.

If you still want to do it, you can do it with the asynchronous function getT, if the namespace does not exist it will download it.

async function getErrorMessage(e, locale) {
  const namespace =  'error-message'
  const t = await getT(locale, namespace)
  
  return t(e.message)
}

getErrorMessage({ message: 'example-of-error-code'  }, 'en').then(errorMessage => alert(errorMessage))