How to use next-intl in a component library?

[loki344]

I have built a Nextjs webclient with next-intl. Now i want to extract some of the components to a common library to reuse them in another project. How can i use next-intl or use-intl in this library so that it integrates smoothly in the parent webapp?

As an example: I have a hook in the library that calls useTranslations(). If I use this hook in the Nextjs application, i get an error message that the NextIntlClientProvider is not found.. But the provider is in the webapp, calling useTranslations() directly in the webapp (and not via library) works.

Does anyone has experience with building a library with next-intl/use-intl?

[amannn]

This is definitely supported.

I'd consider having messages files per locale (e.g. en.json) in your component library as necessary and then another one for your app-level code.

Now, you can merge both files before passing them as a single messages to next-intl.

If I use this hook in the Nextjs application, i get an error message that the NextIntlClientProvider is not found.

You might want to make sure that you're using a single copy of next-intl and React when your app is bundled.