auto-i18n-react VS React Intl

React i18n: Documentation: https://formatjs.io/docs/react-intl/ Source Code: https://github.com/formatjs/formatjs

As we mentioned earlier, the Next.js works well with existing i18n libraries (react-intl, lingui, next-intl, and similar). In this tutorial, we will use the react-intl.

The second format is the ICU Message Format. There are multiple JavaScript modules implementing the ICU message syntax. One of the most used is intl-messageformat by Format.js. It is used behind the scenes also in react-intl.

FormatJS and GlobalizeJS, which are collections of javascript libraries for i18n formatting and other tools. However, unlike i18next, developers using FormatJS will need to write their own code to detect language.

react-intl (now called format.js)

Tik-Tok seem to have brewed this i18n solution themselves, but if you're looking to do this kind of thing, I'd start with a library for it. i18next and format.js are both solid choices.

3️⃣ React Intl React Intl is a library that helps to internationalize React applications. It provides components and API to format text, numbers, and dates. With the internationalization context provided by React Intl, we can use translation and formatting in any React component throughout the application. 📌Homepage 📡GitHub

I'm currently setting up i18n for a boilerplate that I am creating and deciding on which package to use. I've used react-intl in the past (when Next.js did not yet have internationalised routing) and it was a fine experience. However, since I now have the opportunity to reevaluate which package to use, I thought I might as well ask others for their opinion.

The react-intl is a part of Format.JS, a set of JavaScript libraries for internationalization and formatting. It is a well-documented and maintained library. It works well in all major browsers. For older browsers, there are polyfills. Plenty of formatting options and support for the ICU Message syntax makes it very handy.

I had to build this for a project I was involved in. It uses the format.js API to do the internationalization. I was a bit aggressive in the algorithm so it's possible that there were some false positives but those are pretty easy to find once you have the translation file (which gets produced by the format js tooling). Using this tool, however, I was able to convert a good 80-90% of the app in my particular use case (a medium size react app). The remaining code was done manually (things like pluralization are not handled by the tool).