Internationalization

🌍 Internationalization (i18n) Skill

Setup

Next.js (next-intl)

npm install next-intl

// messages/en.json
{
  "home": {
    "title": "Welcome",
    "greeting": "Hello, {name}!"
  }
}

// messages/th.json
{
  "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 ❌

// Don't concatenate strings
const message = t('hello') + ' ' + name;  // ❌

// Do use interpolation
const message = t('greeting', { name }); // ✅

Number & Date Formatting

// Numbers
new Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB'
}).format(1234.56);
// "฿1,234.56"

// Dates
new Intl.DateTimeFormat('th-TH', {
  dateStyle: 'long'
}).format(new Date());
// "15 มกราคม 2569"

// Relative time
new Intl.RelativeTimeFormat('th', { numeric: 'auto' })
  .format(-1, 'day');
// "เมื่อวาน"

RTL Support

/* Use logical properties */
.container {
  /* Instead of margin-left/right */
  margin-inline-start: 1rem;
  margin-inline-end: 2rem;
  
  /* Instead of padding-left/right */
  padding-inline: 1rem;
  
  /* Instead of text-align: left */
  text-align: start;
}

/* RTL-specific styles */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

<html lang="ar" dir="rtl">

Locale Detection

// Browser detection
const locale = navigator.language; // "th-TH"

// Accept-Language header
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

• Set up i18n library
• Create translation files
• Handle pluralization
• Format dates/numbers
• Support RTL if needed
• Add language switcher
• Test all locales
• Handle missing keys