Çok dilli (i18n) bir frontend uygulamasını nasıl tasarlarsınız?

i18n sadece metin çevirisi değildir: çoğul kuralları, tarih/sayı/para biçimleri, yazı yönü (RTL), URL yapısı ve çeviri dosyalarının yüklenmesi birlikte tasarlanmalıdır.

Temel ilkeler

• Metinleri kodda sabit yazmayın; anahtarlarla (checkout.total) ve ICU MessageFormat ile yönetin (react-intl, i18next, next-intl).
• String birleştirmeyin. Dillerde kelime sırası farklıdır; değişkenli mesaj kullanın.

{count, plural, =0 {Sepetiniz boş} one {# ürün} other {# ürün}}

• Biçimlendirme için Intl API'leri:

new Intl.NumberFormat("tr-TR", { style: "currency", currency: "TRY" }).format(1234.5);
// "₺1.234,50"
new Intl.DateTimeFormat("tr-TR", { dateStyle: "long" }).format(new Date());
"istanbul".toLocaleUpperCase("tr-TR"); // "İSTANBUL" (locale vermezseniz "ISTANBUL")

Mimari kararlar

• Locale tespiti: URL (/tr/..., SEO için en iyisi) > kullanıcı tercihi (cookie) > Accept-Language.
• Çeviri dosyalarını dil ve sayfa bazında lazy load edin; tüm dilleri bundle'a koymayın.
• SEO: <html lang="tr">, hreflang alternatif linkleri.
• RTL: dir="rtl" ve CSS logical properties (margin-inline-start, padding-block) kullanın; ikonların yönü gerekirse çevrilir.
• Tasarım: Almanca gibi dillerde metin %30-40 uzayabilir; sabit genişlikli butonlardan kaçının.
• Çeviri süreci: eksik anahtar tespiti, fallback dil, çevirmenler için bağlam açıklamaları (TMS entegrasyonu).