Allow importable utility functions outside of react components

[priyajeet]

Is your feature request related to a problem? Please describe.

Since the locale can be read from the cookie or other means, and messages can be imported it would be nice to re-use next-intl utility functions in non-react components. This prevent people from being forced to pollute react code which otherwise could have been extracted out as plain JS function and unit tested on its own.

Describe the solution you'd like

Essentially similar to https://formatjs.github.io/docs/react-intl/api/#createintl or similar to how the next/server counterpart APIs work, but for the client.

Describe alternatives you've considered

Passing functions like format.number or format.dateTime around. Or using Intl.XXX directly.

[amannn]

next-intl already provides low-level APIs like the one mentioned from Format.JS. However, this is in pretty much every case not what you want to use—it was designed for usage in API Routes with the Pages Router.

For any translations that are rendered as part of a React app, next-intl specifically avoids any API that allows using translations outside of React components (or hooks).

Translations are part of your rendering output, therefore they should be used in combination with a component. If you have a utility function that for example generates errors, you can still return an error code and run unit tests on that. For anything that is inbetween, you could still consider using a hook that calls useTranslations internally (e.g. useErrorCodes()).

I'll move this to a discussion …