We're looking into next-intl and have read this article (https://next-intl-docs.vercel.app/blog/translations-outside-of-react-components) on why you shouldn't use translations outside of the render context. I understand the examples and I follow the rationale. The thing is that we're now in the stage of defining lots of reusable validations (and using ant design) and don't want to define all of the translation boilerplate on each page. Is there a way to handle this more efficiently?
For example:
We have an isRequired() function that checks if a field has been filled in, and when it's not it renders an error message. We have 10 pages of forms where we need to do the following each time:
const t = useTranslations('validations');
return <Input validations={[isRequired(t('isRequired'))]} />;
What I want to achieve:
return <Input validations={[isRequired()]} />;