The Complete Guide to React Internationalization
From zero to multilingual: set up i18n in your React app, then automate translations with AI.
1
1. Set Up react-i18next
Install react-i18next and i18next, then configure the i18n instance.
Terminal
npm install react-i18next i18next2
2. Organize Your Translation Files
Create a JSON file per language with nested keys for your UI strings.
locales/en.json
// locales/en.json
{
"welcome": "Welcome to our app",
"greeting": "Hello, {{name}}!",
"items": {
"count_one": "{{count}} item",
"count_other": "{{count}} items"
}
}3
3. Use Translations in Components
Use the useTranslation hook to access translated strings in any component.
MyComponent.tsx
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return <h1>{t('welcome')}</h1>;
}4
4. Handle Plurals and Variables
i18next supports ICU message format for plurals, interpolation, and context.
CartSummary.tsx
import { useTranslation } from 'react-i18next';
function CartSummary({ itemCount }: { itemCount: number }) {
const { t } = useTranslation();
return (
<p>{t('items.count', { count: itemCount })}</p>
// itemCount = 1 → "1 item"
// itemCount = 5 → "5 items"
);
}5
5. Automate with i18n Agent
Now that your i18n setup is complete, automate the translation of your locale files. Just ask your AI assistant to translate them.
Terminal
# In your IDE, ask your AI assistant:
> Translate locales/en.json to German, Japanese, and Spanish
✓ 3 files translated in 2.1sTry i18n Agent Now
Drop your translation file here
JSON, YAML, PO, XML, CSV, Markdown, Properties
or click to browse
Target languages
No signup requiredInstant estimate