i18n & Yerelleştirme

Uluslararasılaştırma (i18n) ve Yerelleştirme (L10n) en iyi uygulamaları.

1. Temel Kavramlar

2. i18n Ne Zaman Kullanılır

3. Uygulama Desenleri

React (react-i18next)

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.title')}</h1>;
}

Next.js (next-intl)

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h1>{t('title')}</h1>;
}

Python (gettext)

from gettext import gettext as _

print(_("Welcome to our app"))

4. Dosya Yapısı

locales/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
├── tr/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
└── ar/          # RTL
    └── ...

5. En İyi Uygulamalar

YAP ✅

• Ham metin değil, çeviri anahtarları kullan
• Çevirileri özelliğe göre ad alanlarına ayır (namespace)
• Çoğullaştırmayı destekle
• Tarih/sayı formatlarını yerel ayara göre işle
• RTL'yi baştan planla
• Karmaşık dizeler için ICU mesaj formatını kullan

YAPMA ❌

• Bileşenlerde dizeleri sabit kodla (hardcode)
• Çevrilmiş dizeleri birleştir (concatenate)
• Metin uzunluğunu varsay (Almanca %30 daha uzundur)
• RTL düzenini unut
• Aynı dosyada dilleri karıştır

6. Yaygın Sorunlar

7. RTL Desteği

/* CSS Mantıksal Özellikleri */
.container {
  margin-inline-start: 1rem;  /* margin-left değil */
  padding-inline-end: 1rem;   /* padding-right değil */
}

[dir="rtl"] .icon {
  transform: scaleX(-1);
}

8. Kontrol Listesi

Göndermeden önce:

• Tüm kullanıcıya dönük dizeler çeviri anahtarlarını kullanıyor
• Desteklenen tüm diller için yerel ayar dosyaları mevcut
• Tarih/sayı biçimlendirmesi Intl API kullanıyor
• RTL düzeni test edildi (varsa)
• Geri dönüş (fallback) dili yapılandırıldı
• Bileşenlerde sabit kodlanmış dize yok

Script