intermediate · web
Internationalization: react-i18next, ICU and shipping in 25 languages
Making a React app speak every reader's language: react-i18next from the first useTranslation call, plurals and ICU messages, right-to-left layout, lazy-loaded locales and hreflang for search.
·
By Amit Chakraborty — Kolkata, India · Remote worldwide
What you will be able to do
Take a hard-coded React app to 25 languages with correct plurals, RTL layout, lazy bundles and search engines that know which page is which.
Syllabus — 12 chapters
- 1. Getting started with react-i18next — Install i18next and react-i18next, initialise an instance and translate the first component with useTranslation.
- 2. Keys, namespaces and multiple translation files — Organise translations so a team and a translator can both work in them.
- 3. The Trans component for JSX with markup — Translate whole sentences that contain links and emphasis.
- 4. Interpolation, plurals and context — Handle counts and gender the way each language actually needs.
- 5. ICU message format — Use ICU when plural and select rules outgrow simple keys.
- 6. Language detection and persistence — Respect an explicit choice, the browser's preference and the URL, in that order.
- 7. Lazy-loading locales — Ship English in the bundle and load everything else on demand.
- 8. Right-to-left layout — Make Arabic, Hebrew, Persian and Urdu read correctly with logical CSS properties.
- 9. Intl for dates, numbers and lists — Format without a library and without hard-coded separators.
- 10. Extracting keys and finding hard-coded strings — Use i18next-cli to extract, lint and sync translations.
- 11. hreflang and localized SEO — Tell search engines which page serves which language.
- 12. Testing a translated UI — Catch missing keys and overflowing labels before readers do.
0 of 12 published. A new chapter every Monday night. Free to read.
Learn it free, elsewhere too
The documentation, videos, books and practice sites worth your time on this subject. All free. None of it is mine.