| name | internationalization |
| description | i18n/l10n implementation for multi-language support. Use for translation setup, RTL support, and locale-aware formatting. |
🌍 Internationalization (i18n) Skill
Setup
Next.js (next-intl)
npm install next-intl
{
"home": {
"title": "Welcome",
"greeting": "Hello, {name}!"
}
}
{
"home": {
"title": "ยินดีต้อนรับ",
"greeting": "สวัสดี, {name}!"
}
}
React (react-i18next)
npm install react-i18next i18next
import { useTranslation } from 'react-i18next';
function Welcome() {
const { t } = useTranslation();
return <h1>{t('home.title')}</h1>;
}
Translation Best Practices
Do's ✅
{
"items_count": "{count, plural, one {# item} other {# items}}",
"greeting": "Hello, {name}!",
"date_format": "{date, date, medium}"
}
Don'ts ❌
const message = t('hello') + ' ' + name;
const message = t('greeting', { name });
Number & Date Formatting
new Intl.NumberFormat('th-TH', {
style: 'currency',
currency: 'THB'
}).format(1234.56);
new Intl.DateTimeFormat('th-TH', {
dateStyle: 'long'
}).format(new Date());
new Intl.RelativeTimeFormat('th', { numeric: 'auto' })
.format(-1, 'day');
RTL Support
.container {
margin-inline-start: 1rem;
margin-inline-end: 2rem;
padding-inline: 1rem;
text-align: start;
}
[dir="rtl"] .icon-arrow {
transform: scaleX(-1);
}
<html lang="ar" dir="rtl">
Locale Detection
const locale = navigator.language;
app.use((req, res, next) => {
const locale = req.acceptsLanguages('th', 'en') || 'en';
req.locale = locale;
next();
});
Translation Workflow
1. Extract strings → i18n keys
2. Create base locale (en.json)
3. Send to translators
4. Import translations
5. Test all locales
6. Handle missing translations
Checklist
