Internationalization & Localization

Rationale

Internationalization (i18n) and localization (l10n) make your app accessible to a global audience, improve user experience, and support business growth.

Language Files

Use translation files (e.g., JSON, YAML) to support multiple languages. Store translation strings in a locale/ directory.

Example:

// locale/en.json
{
  "welcome": "Welcome",
  "logout": "Log out"
}
// locale/fr.json
{
  "welcome": "Bienvenue",
  "logout": "Déconnexion"
}

• Use one file per language, organized by feature/module if needed.

Usage in Templates

• Use functions or libraries to translate text in templates and UI components.
• Pass translated strings from logic to templates when needed.

Example (with i18next):

import i18next from 'i18next';
// Good: Use translation function
<h1>{i18next.t('welcome')}</h1>

// Bad: Hardcoded text
<h1>Welcome</h1>

• Pass translated strings from logic to UI components.
• Use fallback language if translation is missing.

Workflow for Adding New Languages

1. Create a new translation file in locale/ (e.g., es.json).
2. Add keys and translated values.
3. Update supported languages config.
4. Test UI in the new language.

Best Practices

• Organize translations by feature or module.
• Keep translation files up to date with code changes.
• Use translation libraries (i18next, react-intl) for dynamic language switching.
• Document supported languages and translation workflow for new team members.
• Test application in all supported languages.
• Review translations for accuracy and completeness.