// the find
i18next/react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem.
react-i18next is the standard React binding for the i18next ecosystem — handles translations, pluralization, interpolation, and React-specific concerns like the Trans component for JSX with embedded markup. It's for any React or React Native app that needs real i18n, not just string swapping. The hook-based API (useTranslation) is clean and the library is genuinely battle-tested at scale.
The Trans component handles the hard case well: translating strings that contain React elements (links, bold text) without forcing translators to write JSX. The TypeScript support is solid — you can type your translation keys and get autocomplete if you set up the declaration merging. SSR is a first-class citizen, not an afterthought; the Suspense integration works correctly for async translation loading. The plugin ecosystem (backend loaders, language detectors, caching) is extensive enough that you rarely need to write your own.
The initial setup is genuinely tedious — configuring i18next, wiring the provider, deciding on namespace strategy, and picking a backend plugin all happen before you translate a single string. The Trans component's interpolation syntax for variables inside JSX is confusing until it clicks, and it's easy to write it wrong in ways that silently produce the wrong output. The README is thin on the actual API; you're sent to an external gitbook site, which means documentation can lag the package. The Locize SaaS is pushed hard throughout the docs, which makes it harder to find guidance for teams managing their own translation files.