Building for a global audience requires more than translating strings. Dates, numbers, currencies, pluralization, and text direction all vary by locale. Proper internationalization (i18n) makes these differences feel natural to users everywhere.
Core Concepts#
i18n vs L10n#
Internationalization (i18n): Building software to support multiple locales Localization (L10n): Adapting content for specific locales
Locale Identifiers#
Format: language-REGION
Examples:
en-US (English, United States)
en-GB (English, United Kingdom)
es-ES (Spanish, Spain)
es-MX (Spanish, Mexico)
zh-CN (Chinese, Simplified)
zh-TW (Chinese, Traditional)
String Translation#
Using react-i18next#
Loading code block...
Translation Files#
Loading code block...
Usage in Components#
Loading code block...
Pluralization#
Complex Pluralization Rules#
Loading code block...
Using ICU Message Format#
Loading code block...
Date and Time#
Using Intl.DateTimeFormat#
Loading code block...
Relative Time#
Loading code block...
Numbers and Currency#
Number Formatting#
Loading code block...
Currency Formatting#
Loading code block...
Percentage and Units#
Loading code block...
RTL Support#
CSS Logical Properties#
Loading code block...
Document Direction#
Loading code block...
Bidirectional Text#
Loading code block...
Content Management#
Translation Workflow#
1. Extract strings from code
$ i18next-scanner
2. Send to translation service
- Lokalise, Phrase, Crowdin
3. Translators work on strings
4. Import translations back
5. Review in context
6. Deploy
String Extraction#
Loading code block...
Testing i18n#
Pseudo-Localization#
Loading code block...
Integration Tests#
Loading code block...
Best Practices#
String Guidelines#
Loading code block...
Key Naming#
Loading code block...
Conclusion#
Internationalization is an investment that pays off as your user base grows globally. Build i18n into your architecture from the start—retrofitting is painful and error-prone.
Use established libraries, follow locale-aware formatting standards, and test with pseudo-localization. Your global users will appreciate an app that speaks their language naturally.