React i18n: 2024'te React Uluslararasılaştırması için Kapsamlı Rehber

React i18n: 2024'te React Uluslararasılaştırması için Kapsamlı Rehber

Dünyanın dört bir yanındaki kullanıcılar için çalışan bir React uygulaması oluşturmak artık bir lüks değil — rekabet açısından bir zorunluluktur. Avrupa, Latin Amerika veya Asya'da yeni pazarlara giriyorsanız, React uluslararasılaştırması (yaygın kısaltmasıyla React i18n) bunu mümkün kılan temel unsurdur.

Bu rehber her şeyi kapsar: React i18n'in gerçekte ne anlama geldiğinden geleneksel kurulum yöntemine, en popüler React yerelleştirme kütüphanelerinin karşılaştırmasından, better-i18n gibi modern platformların geliştirici darboğazını tamamen nasıl ortadan kaldırdığına kadar.

İçindekiler

1. React i18n Nedir?
2. React Yerelleştirmesi Neden Önemlidir?
3. Temel Kavramlar: i18n, l10n ve g11n
4. React i18n'i Geleneksel Yöntemle Kurma
5. Popüler React i18n Kütüphanelerinin Karşılaştırması
6. react-i18next: Derinlemesine İnceleme
7. react-intl: Derinlemesine İnceleme
8. Geleneksel React Yerelleştirmesinin Gizli Maliyetleri
9. better-i18n React Uluslararasılaştırmasını Nasıl Kolaylaştırır?
10. Kod Örnekleri: Geleneksel vs. better-i18n
11. React i18n En İyi Uygulamaları
12. Sıkça Sorulan Sorular

React i18n Nedir? {#what-is-react-i18n}

React i18n, React uygulamalarını birden fazla dili ve bölgesel ayarı destekleyecek şekilde tasarlama ve geliştirme sürecini ifade eder. "i18n" kısaltması "internationalization" (uluslararasılaştırma) kelimesinden gelir — "i" ile "n" harfleri arasında 18 harf bulunmaktadır.

Uluslararasılaştırma yalnızca çeviri değildir. Şunları kapsar:

• Metin çevirisi — kullanıcı arayüzü metinlerini kullanıcının dilinde gösterme
• Tarih ve saat biçimlendirme — farklı bölgeler tarihleri farklı biçimlerde gösterir (AA/GG/YYYY veya GG/AA/YYYY)
• Sayı ve para birimi biçimlendirme — ondalık ayırıcı olarak nokta veya virgül, para birimi sembolleri
• Çoğul kuralları — Rusça veya Arapça gibi dillerde karmaşık çoğul biçimleri mevcuttur
• Sağdan sola (RTL) desteği — Arapça, İbranice ve diğer diller sağdan sola okunur
• Yerel ayara duyarlı sıralama — alfabetik sıra, yerel ayarlara göre farklılık gösterir

React ekosisteminde i18n; react-i18next ve react-intl gibi özel kütüphaneler, özel uygulamalar ya da tüm iş akışını kodunuza dokunmadan yöneten better-i18n gibi içerik platformları aracılığıyla gerçekleştirilir.

React Yerelleştirmesi Neden Önemlidir? {#why-react-localization-matters}

React yerelleştirmesinin iş gerekçesi oldukça açıktır:

• Tüketicilerin %72,4'ü zamanlarının büyük bölümünü veya tamamını kendi dilindeki web sitelerinde geçirir (CSA Research)
• Tüketicilerin %56,2'si, bilgiyi kendi dilinde edinme imkânının fiyattan daha önemli olduğunu söyler
• 5 veya daha fazla dile yerelleştirilmiş uygulamalar, yalnızca İngilizce olan uygulamalara kıyasla 3 kata kadar daha fazla gelir elde eder
• Google ve diğer arama motorları, yerelleştirilmiş içerikleri İngilizce olmayan sorgularda daha üst sıralarda gösterir — bu da React JS yerelleştirmesinin SEO'yu doğrudan etkilediği anlamına gelir

React üzerine kurulu SaaS ürünleri, e-ticaret mağazaları ve içerik platformları için yerelleştirmeyi atlamak, önemli bir gelir kaybı anlamına gelir. React JS yerelleştirmesi, zamanla büyüyen bir yatırımdır.

Temel Kavramlar: i18n, l10n ve g11n {#core-concepts}

Uygulama detaylarına geçmeden önce birbiriyle ilişkili üç terimi anlamak faydalı olacaktır:

React geliştirmesinde:

• i18n, kodda yapılan işlemdir — altyapının kurulması
• l10n, çevirmenlerin yaptığı işlemdir — gerçek çevrilmiş içeriğin yazılması
• Amaç, bu iki sorumluluğu mümkün olduğunca birbirinden ayrı tutmaktır

React i18n sorunlarının büyük bölümü bu sorumluluklarin birbiriyle karışmasından kaynaklanır: geliştiriciler çeviri dosyalarını yönetmek, çevirmenlerle JSON dosyaları üzerinden koordinasyon sağlamak ve kullanıcı arayüzü her değiştiğinde yeni anahtarları manuel olarak çıkarmak zorunda kalır. better-i18n gibi modern platformlar, bu sürtüşmeyi tamamen ortadan kaldırmak için geliştirilmiştir.

React i18n'i Geleneksel Yöntemle Kurma {#traditional-setup}

Daha iyi yaklaşımların neden var olduğunu anlamak için geleneksel React JS i18n kurulumunu adım adım incelemek faydalı olacaktır. Geleneksel yaklaşımların büyük çoğunluğu aynı örüntüyü izler:

Adım 1: Kütüphaneyi yükleyin

npm install react-i18next i18next i18next-browser-languagedetector

Adım 2: Çeviri JSON dosyalarını oluşturun

Aşağıdaki gibi bir klasör yapısı oluşturursunuz:

src/
  locales/
    en/
      translation.json
    fr/
      translation.json
    de/
      translation.json

Her JSON dosyası anahtar-değer çiftleri içerir:

// src/locales/en/translation.json
{
  "welcome": "Welcome to our app",
  "nav": {
    "home": "Home",
    "about": "About",
    "pricing": "Pricing"
  },
  "cta": {
    "signup": "Sign up for free",
    "login": "Log in"
  }
}

// src/locales/fr/translation.json
{
  "welcome": "Bienvenue dans notre application",
  "nav": {
    "home": "Accueil",
    "about": "À propos",
    "pricing": "Tarifs"
  },
  "cta": {
    "signup": "S'inscrire gratuitement",
    "login": "Se connecter"
  }
}

Adım 3: i18next'i yapılandırın

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import enTranslation from './locales/en/translation.json';
import frTranslation from './locales/fr/translation.json';
import deTranslation from './locales/de/translation.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslation },
      fr: { translation: frTranslation },
      de: { translation: deTranslation },
    },
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Adım 4: Uygulamanızı sarın

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './i18n';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Adım 5: Bileşenlerde çevirileri kullanın

// src/components/HeroSection.jsx
import { useTranslation } from 'react-i18next';

function HeroSection() {
  const { t } = useTranslation();

  return (
    <section>
      <h1>{t('welcome')}</h1>
      <a href="/signup">{t('cta.signup')}</a>
    </section>
  );
}

export default HeroSection;

Bu kurulum işe yarar — ancak uygulamanız büyüdükçe önemli süregelen maliyetler doğurur.

Popüler React i18n Kütüphanelerinin Karşılaştırması {#libraries-compared}

React yerelleştirmesi için birkaç olgun kütüphane mevcuttur. İşte en yaygın kullanılan seçeneklerin özeti.

react-i18next

GitHub Yıldızı: 9.000+ | Haftalık İndirme: 4 Milyon+

En popüler React i18n kütüphanesi. i18next üzerine inşa edilmiş olup hook'lar (useTranslation), higher-order component'lar ve karmaşık çeviriler için Trans bileşeni sunar.

Artıları:

• Geniş ekosistem ve topluluk
• Esnek backend eklentileri (dosyalardan, API'lardan, CDN'lerden çeviri yükleme)
• Çevirileri özelliğe göre ayırmak için namespace desteği
• İyi TypeScript desteği
• Çeviri namespace'lerinin lazy loading ile yüklenmesi

Eksileri:

• Ayrıntılı başlangıç yapılandırması
• JSON çeviri dosyalarının manuel yönetimi gerektirir
• Anahtar çıkarımı ayrıca yapılmalıdır (i18next-parser gibi araçlarla)
• Çevirmenler JSON dosyalarıyla çalışmak zorundadır; bu çevirmenler için uygun değildir
• Yerleşik bir çeviri yönetim arayüzü yoktur

react-intl (FormatJS)

GitHub Yıldızı: 14.000+ | Haftalık İndirme: 2,5 Milyon+

FormatJS paketinin bir parçası olan react-intl, Yahoo/Formatjs tarafından geliştirilir ve ICU mesaj biçimi standardını izler.

Artıları:

• Sektör standardı ICU mesaj biçimi
• Mükemmel çoğul ve cinsiyet işleme
• Yerleşik tarih, saat ve sayı biçimlendirme
• Büyük kurumsal uygulamalar için uygundur
• Güçlü TypeScript tipleri

Eksileri:

• react-i18next'e kıyasla daha dik öğrenme eğrisi
• Daha ayrıntılı API (her şeyi <FormattedMessage> içine sarma)
• ICU sözdizimi çevirmenler için karmaşık olabilir
• Çeviri dosyalarının manuel olarak yönetimi hâlâ gereklidir
• Yerleşik çeviri yönetimi yoktur

Lingui

GitHub Yıldızı: 4.000+ | Haftalık İndirme: 300 Bin+

Mesajları otomatik olarak çıkarmak için macro'lar kullanan, geliştirici deneyimine odaklanan daha yeni bir kütüphane.

Artıları:

• Macro'lar aracılığıyla otomatik mesaj çıkarımı
• Daha temiz bileşen sözdizimi
• ICU mesaj biçimi desteği
• TypeScript öncelikli

Eksileri:

• Daha küçük topluluk
• Babel veya SWC macro'ları gerektirir
• Harici çeviri yönetimi hâlâ gereklidir

next-intl

GitHub Yıldızı: 8.000+ | Haftalık İndirme: 1,2 Milyon+

App Router desteği, server component'lar ve yerleşik tip güvenliği ile Next.js için özel olarak geliştirilmiştir.

Artıları:

• Birinci sınıf Next.js App Router desteği
• Sunucu tarafı renderlama uyumlu
• Harika TypeScript deneyimi
• Tip güvenli çeviri anahtarları

Eksileri:

• Next.js'e bağımlı
• JSON çeviri dosyaları hâlâ gereklidir
• Çevirmenler hâlâ geliştirici katılımına ihtiyaç duyar

Karşılaştırma Tablosu

react-i18next: Derinlemesine İnceleme {#react-i18next}

react-i18next, React JS i18n için baskın kütüphane olduğundan gerçek dünya kullanımına daha yakından bakmak gerekir.

Namespace'ler

Daha büyük uygulamalarda, çevirileri namespace'lere bölmek dosyaları yönetilebilir kılar:

// Namespace ile kullanım
const { t } = useTranslation('checkout');

// Çeviri dosyasında: locales/en/checkout.json
{
  "summary": "Order Summary",
  "total": "Total: {{amount}}",
  "confirm": "Confirm Order"
}

Enterpolasyon

Çevrilen metinlere dinamik değer ekleme:

// Çeviri anahtarı: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' });
// Çıktı: "Hello, Alice!"

Çoğul biçimler

// Çeviri anahtarları:
// "item_one": "{{count}} item"
// "item_other": "{{count}} items"
t('item', { count: 5 });
// Çıktı: "5 items"

Trans bileşeni

React element'leri (bağlantılar, kalın metin) içeren metinler için:

import { Trans } from 'react-i18next';

// Çeviri anahtarı: "termsText": "I agree to the <1>Terms of Service</1>"
<Trans i18nKey="termsText">
  I agree to the <a href="/terms">Terms of Service</a>
</Trans>

Anahtar çıkarımı sorunu

Bir geliştirici her yeni arayüz metni eklediğinde şunları yapması gerekir:

1. Kaynak JSON dosyasına anahtar ekle
2. Anahtar çıkarıcıyı çalıştır: npx i18next-parser
3. Güncellenen JSON'u çevirmenlere gönder
4. Çevirilerin tamamlanmasını bekle
5. Çevirileri JSON dosyalarına geri aktar
6. Commit ve deploy et

Bu iş akışı, her içerik güncellemesini yavaşlatan ve geliştiricileri ürün yöneticileri ile çevirmenler arasında aracı konumuna sokan bir geliştirici darboğazı yaratır.

react-intl: Derinlemesine İnceleme {#react-intl}

React-intl farklı bir felsefi yaklaşım benimser: mesajlar ayrı JSON dosyalarında değil, bileşenin içinde satır içi olarak tanımlanır. defineMessages yardımcısı, çıkarılabilecek mesajları bildirmek için kullanılır.

import { useIntl, defineMessages } from 'react-intl';

const messages = defineMessages({
  greeting: {
    id: 'app.greeting',
    defaultMessage: 'Hello, {name}!',
    description: 'Greeting shown on the home page',
  },
});

function Greeting({ name }) {
  const intl = useIntl();
  return <p>{intl.formatMessage(messages.greeting, { name })}</p>;
}

ICU Mesaj Biçimi

React-intl, karmaşık çoğullama ve cinsiyet işleme için ICU mesaj biçimini kullanır:

// ICU ile karmaşık çoğullama
const message = `{count, plural,
  =0 {No items in cart}
  one {# item in cart}
  other {# items in cart}
}`;

Bu güçlü bir yapıdır; ancak çevirmenlerin genellikle zorlandığı bir karmaşıklık ekler — doğru çeviri yapabilmek için ICU sözdizimini anlamaları gerekir.

Provider kurulumu

import { IntlProvider } from 'react-intl';
import enMessages from './locales/en.json';
import frMessages from './locales/fr.json';

function App() {
  const locale = navigator.language.split('-')[0];
  const messages = locale === 'fr' ? frMessages : enMessages;

  return (
    <IntlProvider locale={locale} messages={messages}>
      <MainApp />
    </IntlProvider>
  );
}

Geleneksel React Yerelleştirmesinin Gizli Maliyetleri {#hidden-costs}

Geleneksel React i18n kütüphaneleri iyi mühendislenmiş olmakla birlikte, beraberinde getirdikleri operasyonel yük çoğunlukla küçümsenir.

1. Geliştirici darboğazı

Her içerik değişikliği bir geliştirici gerektirir. "Ücretsiz deneyin" ifadesini "Hemen deneyin" olarak güncellemek isteyen bir pazarlamacı bilet açmak, bir geliştiricinin JSON anahtarını güncellemesini beklemek, PR açılmasını ve deploy edilmesini beklemek zorundadır. Bu darboğaz tüm organizasyonun hızını düşürür.

2. Ölçekte JSON dosyası yönetimi

Olgunlaşmış bir React uygulaması, düzinelerce namespace'e yayılmış binlerce çeviri anahtarına sahip olabilir. 5 dili yönetmek, 5 kat daha fazla dosya anlamına gelir. JSON çeviri dosyalarındaki merge conflict'leri zahmetli ve hatalara açıktır.

3. Anahtar kayması ve sahipsiz anahtarlar

Zamanla anahtarlar eklenir, yeniden adlandırılır ve silinir. Katı araçlar olmadan, artık kullanılmayan JSON anahtarları (sahipsiz anahtarlar) ve hiç JSON'a eklenmeyen arayüz metinleri (eksik anahtarlar) birikerek sorun yaratır. i18next-parser gibi araçlar yardımcı olsa da CI/CD'ye entegre edilmeleri gerekir.

4. Çevirmen sürtüşmesi

Çevirmenler profesyonel dilbilimcilerdir, geliştirici değil. JSON dosyalarıyla çalışmalarını istemek, onlara yanlış aracı kullandırmak demektir. Profesyonel çevirmenlerin büyük çoğunluğu Phrase, Lokalise veya Crowdin gibi CAT (Bilgisayar Destekli Çeviri) araçlarını kullanır; bu da kodunuz ile çevirmenleriniz arasında ek bir entegrasyon katmanı gerektirdiği anlamına gelir.

5. Bağlamdan yoksun çeviri

Çevirmenler yalnızca bir JSON anahtarı ve metin gördüklerinde, bu metnin arayüzde nerede göründüğüne dair hiçbir bağlamları yoktur. "İptal" ifadesi, abonelik iptal sayfasında dosya yükleme iletişim kutusundan farklı bir anlam taşır. Bağlamdan yoksun çeviri, daha düşük kaliteye yol açar.

6. Deploy'a bağımlılık

Geleneksel kurulumda çeviriler uygulamayla birlikte paketlenir. Her çeviri güncellemesi yeni bir deploy gerektirir. Bu yavaş ve risklidir — Fransızca bir çevirideki yazım hatasının düzeltilmesi bile tam bir sürüm döngüsü gerektirir.

better-i18n React Uluslararasılaştırmasını Nasıl Kolaylaştırır? {#better-i18n-section}

better-i18n, yukarıda açıklanan sorunların her birini çözmek için tasarlanmıştır. React ve Next.js uygulamaları için özel olarak geliştirilmiş, AI destekli bir içerik yerelleştirme platformudur.

Temel fikir: Hizmet olarak içerik

Çeviri dizelerini kod tabanınızda yönetmek yerine, better-i18n içeriğinizi yönetilen bir hizmet olarak ele alır. React uygulamanız better-i18n CMS'e bağlanır ve çeviriler dinamik olarak sunulur — deponuzda JSON dosyası yok, anahtar çıkarımı yok, içerik güncellemek için deploy yok.

Nasıl çalışır?

1. React uygulamanızı tek bir SDK entegrasyonuyla better-i18n CMS'e bağlayın
2. better-i18n arayüzünde içerik oluşturun ve yönetin — JSON yok, içerik güncellemeleri için geliştirici gerekmiyor
3. Yeni içerik yayımladığınızda veya mevcut içeriği değiştirdiğinizde AI otomatik olarak çevirir
4. React uygulamanız çevirileri gerçek zamanlı alır — yeniden derleme yok, yeniden deploy yok

Geliştirici darboğazı yok

better-i18n ile bir pazarlama yöneticisi Cuma günü saat 15:00'te bir başlığı güncelleyebilir ve bu değişiklik dakikalar içinde desteklenen 12 dilde yayında olur — bilet açmadan, geliştirici olmadan, deploy olmadan.

Bağlama duyarlı AI çeviri

better-i18n içeriği tam bağlamıyla (sayfa, bölüm, içerik türü, çevirmen notları) sakladığından, AI çeviri motoru yalnızca izole metinleri gören araçlara kıyasla daha yüksek kaliteli çeviriler üretir. Ayrıca platform üzerinden doğrudan çeviri notları ve gözden geçirme iş akışları ekleyebilirsiniz.

CMS tabanlı iş akışı

better-i18n CMS, geliştiriciler, pazarlamacılar, metin yazarları ve çevirmenler dahil tüm ekibinize ortak bir çalışma alanı sunar. Çevirmenler JSON dosyaları yerine bu amaç için tasarlanmış bir çeviri arayüzü kullanır. Pazarlamacılar yayımlamadan önce çevrilen içeriği önizleyebilir. Geliştiriciler kodda kalır.

Mevcut React stack'inizle birlikte çalışır

better-i18n, React framework'ünüzün yerini alan bir araç değildir — yanında entegre olur. Create React App, Next.js, Remix veya Vite kullanıyor olun, better-i18n bileşen mimarinizi değiştirmeden çalışır.

Kod Örnekleri: Geleneksel vs. better-i18n {#code-examples}

Somut bir örneğe bakalım: hero bölümü, özellik listesi ve fiyatlandırma CTA'sı olan bir ürün açılış sayfası.

Geleneksel react-i18next yaklaşımı

Kodda yönetmeniz gerekenler:

// public/locales/en/landing.json (ve her dil için bir tane)
{
  "hero": {
    "headline": "Ship your product to the world",
    "subheadline": "The fastest way to go global without slowing down your team",
    "cta_primary": "Start for free",
    "cta_secondary": "See how it works"
  },
  "features": {
    "title": "Everything you need to go global",
    "item1_title": "Instant AI Translation",
    "item1_desc": "Translate your entire product in minutes, not weeks",
    "item2_title": "No developer bottleneck",
    "item2_desc": "Marketers update content directly — no tickets, no PRs",
    "item3_title": "Real-time updates",
    "item3_desc": "Content updates go live instantly, no redeployment needed"
  }
}

Bileşen:

// src/components/LandingHero.jsx
import { useTranslation } from 'react-i18next';

function LandingHero() {
  const { t } = useTranslation('landing');

  return (
    <section className="hero">
      <h1>{t('hero.headline')}</h1>
      <p>{t('hero.subheadline')}</p>
      <div className="cta-group">
        <a href="/signup" className="btn-primary">
          {t('hero.cta_primary')}
        </a>
        <a href="/demo" className="btn-secondary">
          {t('hero.cta_secondary')}
        </a>
      </div>
    </section>
  );
}

Yeni bir dil eklemek için şunları yapmanız gerekir:

1. Yeni bir JSON dosyası oluşturun (fr/landing.json)
2. Tüm çevirileri manuel ekleyin veya bir TMS üzerinden dışa/içe aktarın
3. i18next resources yapılandırmasına fr ekleyin
4. Uygulamayı yeniden derleyin ve deploy edin

better-i18n yaklaşımı

Bileşen (herhangi bir dil için değişmez):

// src/components/LandingHero.jsx
// Bu bileşen i18n için hiç değişmez
// İçerik CMS'den gelir; better-i18n yerel ayar yönlendirmesini yönetir

function LandingHero({ content }) {
  return (
    <section className="hero">
      <h1>{content.headline}</h1>
      <p>{content.subheadline}</p>
      <div className="cta-group">
        <a href="/signup" className="btn-primary">
          {content.ctaPrimary}
        </a>
        <a href="/demo" className="btn-secondary">
          {content.ctaSecondary}
        </a>
      </div>
    </section>
  );
}

Yeni bir dil eklemek için:

1. better-i18n panosunda "Dil ekle"ye tıklayın
2. AI mevcut tüm içeriği otomatik çevirir
3. Bitti — yeni dil hemen yayında

JSON dosyası yok. Anahtar çıkarımı yok. Yeniden derleme yok. Yeniden deploy yok.

Dinamik içeriği yönetme

Kullanıcı tarafından oluşturulan veya veritabanından beslenen içerikler için geleneksel yaklaşım, genellikle her metni t() içine sarmayı ve her dinamik metin için anahtar tutmayı gerektirir — bu da çoğunlukla imkânsızdır. better-i18n ile CMS'de yönetilen içerik, statik arayüz metni veya blog yazıları ve ürün açıklamaları gibi uzun biçimli içerik olmasından bağımsız olarak, yapılandırılan tüm dillerde otomatik olarak sunulur.

React i18n En İyi Uygulamaları {#best-practices}

Geleneksel bir kütüphane veya better-i18n kullanıyor olun, bu ilkeler tüm React yerelleştirme çalışmaları için geçerlidir.

1. Tüm metinleri baştan dışsallaştırın

Kullanıcıya yönelik metinleri doğrudan JSX içine hiçbir zaman sabit kodlamayın. Yalnızca tek bir dille başlıyor olsanız bile, metinleri baştan dışsallaştırmak gelecekteki i18n çalışmasını önemli ölçüde kolaylaştırır.

2. Metin genişlemesi için tasarlayın

Almanca metinler genellikle İngilizce eşdeğerlerinden %30-40 daha uzundur. Rusça %50 daha uzun olabilir. Kullanıcı arayüzünüzü, düzenleri bozmadan metin genişlemesini kaldırabilecek esneklikte tasarlayın. Sabit genişlikler yerine overflow: hidden, text-overflow: ellipsis veya esnek container'lar gibi CSS özelliklerini kullanın.

3. Metin birleştirmekten kaçının

Çevirilen metinleri asla birleştirme yoluyla oluşturmayın:

// YANLIŞ — farklı kelime sırasına sahip dillerde bozulur
const message = t('hello') + ', ' + userName + '!';

// DOĞRU — enterpolasyon kullanın
const message = t('hello_user', { name: userName });
// Çeviri: "hello_user": "Hello, {{name}}!"

4. Çoğul biçimleri doğru yönetin

İngilizcede iki çoğul biçim (tekil/çoğul) vardır. Birçok dilde daha fazlası bulunur. Arapçada altı çoğul biçim mevcuttur. Her zaman kütüphanenizin çoğul işleme özelliğini kullanın — kendiniz yazmayın:

// YANLIŞ
const label = count === 1 ? t('item_singular') : t('item_plural');

// DOĞRU
const label = t('item', { count });
// Uygun çoğul anahtarlarıyla: item_one, item_other, item_few vb.

5. Yerel ayar tercihini kaydedin

Kullanıcının dil seçimini kalıcı hale getirin:

// Dil değiştirildiğinde
localStorage.setItem('preferred-locale', newLocale);

// Uygulama başlatıldığında
const savedLocale = localStorage.getItem('preferred-locale');
const browserLocale = navigator.language.split('-')[0];
const locale = savedLocale || browserLocale || 'en';

6. Yerel ayara duyarlı biçimlendirme kullanın

Tarih, sayı ve para birimleri için her zaman Intl API'larını veya i18n kütüphanenizin biçimlendirme özelliklerini kullanın:

// YANLIŞ
const formatted = '$' + price.toFixed(2);

// DOĞRU
const formatted = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD',
}).format(price);
// Almanya yerel ayarı için: "1.234,56 $"
// ABD yerel ayarı için: "$1,234.56"

7. RTL için önceden planlayın

Arapça, İbranice, Farsça veya Urduca desteği planladıysanız, RTL'i baştan göz önünde bulundurun. Fiziksel yerine CSS mantıksal özelliklerini kullanın:

/* Fiziksel (RTL'de bozulur) */
.container { margin-left: 16px; padding-right: 24px; }

/* Mantıksal (hem LTR hem RTL'de çalışır) */
.container { margin-inline-start: 16px; padding-inline-end: 24px; }

8. Sahte yerelleştirmeyle test edin

Metinleri gerçek çevirmenlere göndermeden önce, arayüzünüzün metin genişlemesini ve özel karakterleri kaldırıp kaldıramadığını doğrulamak için sahte yerelleştirme kullanın:

// Sahte yerel ayar, "Hello, World!" ifadesini "[Ĥéĺĺô, Ŵôŕĺď!]" biçimine dönüştürür
// Bu, gerçek çeviriler gelmeden önce düzen hatalarını yakalar

9. CI'da anahtar çıkarımını otomatize edin

Anahtar çıkarımı gerektiren bir kütüphane kullanıyorsanız, bunu CI pipeline'ınızın bir parçası haline getirin. Üretimde eksik bir anahtar, kullanıcılara boş metin gösterir; bu, İngilizce metin göstermekten daha kötüdür.

10. Çeviri güncellemelerini kod deploy'larından ayırın

En iyi mimariler, içerik güncellemelerini kod sürümlerinden ayırır. İşte bu yüzden better-i18n gibi CMS tabanlı yaklaşımlar giderek daha fazla tercih edilmektedir — çeviriler, uygulama deploy'larından bağımsız olarak güncellenip yayımlanabilir.

Sıkça Sorulan Sorular {#faq}

React i18n ile React yerelleştirmesi arasındaki fark nedir?

React i18n (uluslararasılaştırma), uygulamanızı birden fazla dili destekleyebilir hale getirme mühendislik çalışmasını ifade eder — altyapının kurulması, kütüphane seçimi ve kodun yerel ayara duyarlı biçimde yapılandırılması. React yerelleştirme (l10n) ise uygulamanızın belirli bir yerel ayara uyarlanmasını ifade eder — belirli bir dil ve bölge için çevrilen metinler, tarih biçimleri ve kültürel gelenekler. i18n önkoşuldur; l10n ise devam eden çalışmadır.

Hangi React i18n kütüphanesini kullanmalıyım?

Yeni projelerin büyük çoğunluğu için, ekosistem büyüklüğü ve esnekliği nedeniyle react-i18next en güvenli seçimdir. Next.js projeleri için özellikle next-intl, mükemmel App Router entegrasyonu ve tip güvenliği sunar. JSON dosyası yönetimini tamamen ortadan kaldırmak ve içerik ekibinize özerklik vermek istiyorsanız, better-i18n geleneksel kütüphane katmanını kaldırarak CMS tabanlı bir iş akışı sunar.

Mevcut bir React uygulamasına i18n nasıl eklenir?

Mevcut bir React uygulamasına i18n eklemek üç aşamayı kapsar: (1) bileşenlerinizdeki tüm sabit kodlanmış metinlerin denetlenmesi, (2) bir i18n kütüphanesi seçilip yapılandırılması ve (3) metinlerin çeviri dosyalarına aktarılarak sabit kodlanmış metnin çeviri fonksiyonu çağrılarıyla değiştirilmesi. better-i18n ile süreç daha basittir — SDK'yı bağlar ve bileşen mantığınızı değiştirmeden içeriği CMS'e taşırsınız.

React i18n performansı etkiler mi?

Geleneksel kütüphanelerde çeviri JSON dosyaları genellikle uygulamayla birlikte paketlenir veya yerel ayara göre lazy loading ile yüklenir. Büyük çeviri paketleri başlangıç yükleme süresini etkileyebilir. Namespace bölme ve lazy loading (react-i18next tarafından desteklenir) bu sorunu hafifletir. better-i18n ise içeriği bir edge CDN üzerinden sunar ve kullanıcının konumundan bağımsız olarak çevirilerin minimum gecikmeyle iletilmesini sağlar.

React i18n'de dinamik içerik (kullanıcı tarafından oluşturulan içerik) nasıl yönetilir?

Kullanıcı adları, gönderi başlıkları veya ürün açıklamaları gibi dinamik içerikler statik olarak çevrilemez. Seçenekler şunlardır: (1) çalışma zamanında bir API aracılığıyla makine çevirisi, (2) önceden çevrilmiş sürümlerin veritabanında saklanması veya (3) hem statik arayüz metinlerini hem de uzun biçimli dinamik içeriği tek bir iş akışında yöneten better-i18n gibi bir içerik platformu kullanımı.

react-i18next'i Next.js ile kullanabilir miyim?

Evet. React-i18next hem Next.js Pages Router hem de App Router ile çalışır; ancak App Router entegrasyonu, sunucu bileşenleri için dikkatli bir yönetim gerektirir. Next.js projeleri için next-intl çoğunlukla daha iyi bir seçimdir; yerel sunucu bileşeni desteğiyle Next.js için özel olarak tasarlanmıştır.

React uygulamam kaç dili desteklemeli?

Hedef pazarlarınızın konuştuğu dillerle başlayın. ABD odaklı bir SaaS ürünü için İspanyolca, Fransızca, Portekizce ve Almanca eklemek, ulaşmaya çalıştığınız İngilizce dışı pazarların büyük bölümünü kapsar. Dillere öncelik vermeden önce, mevcut kullanıcılarınızın nereden geldiğini belirlemek için analizleri inceleyin.

React uygulamamı uluslararasılaştırmamamın maliyeti nedir?

Maliyet, pazar dışında kalmaktır. Dünya internet kullanıcılarının %75'i ana dili İngilizce olmayanlardır. Yerelleştirme içermeyen uygulamalar, İngilizce dışı sorgular için Google'da sıralama yapamaz, İngilizce dışı ziyaretçileri etkili biçimde dönüştüremez ve uluslararası kullanıcılara ürünün onlar için tasarlanmadığını işaret eder. Çoğu yazılım ürünü için ilk yılda 3-5 dil eklemedeki yatırım getirisi olumludur.

better-i18n çeviri kalitesini nasıl yönetir?

better-i18n, bağlama duyarlı AI çeviri kullanır — AI yalnızca çevrilecek metni değil, içerik türünü, sayfa konumunu ve eklediğiniz çevirmen notlarını da görür. Platform ayrıca insan gözden geçirme iş akışlarını destekler; profesyonel çevirmenler AI tarafından oluşturulan çevirileri yayına girmeden önce gözden geçirip onaylayabilir. Bu sayede hem AI'ın hızını hem de insan denetiminin kalite güvencesini elde edersiniz.

better-i18n büyük React uygulamaları için uygun mudur?

Evet. better-i18n, tek bir ürüne sahip girişimlerden onlarca dilde içerik yöneten büyük kurumsal şirketlere kadar ölçeklenecek şekilde tasarlanmıştır. CMS, rol tabanlı erişim kontrolü, onay iş akışları ve zamanla AI kalitesini artıran çeviri belleğiyle ekip iş birliği için tasarlanmıştır.

Sonuç

React i18n önemli ölçüde evrildi. Geleneksel yaklaşım — react-i18next yüklemek, her dil için JSON dosyaları oluşturmak ve çeviri anahtarlarını manuel yönetmek — hâlâ işe yarar; ancak ürün büyüdükçe ekipleri yavaşlatan süregelen bir operasyonel yük yaratır.

better-i18n gibi modern alternatifler temelden farklı bir felsefeyi temsil eder: hizmet olarak içerik, koddan ayrıştırılmış, en yakın kişiler (pazarlamacılar, yazarlar, çevirmenler) tarafından yönetilen ve AI destekli — böylece yeni bir dil eklemek bir ürün kararı haline gelir, geliştirme projesi değil.

İster yeni bir React uygulaması başlatıyor ister mevcut birine i18n ekliyor olun, amaç aynıdır: ürününüzü kullanıcıların kendi dilinde, kendi kültürel bağlamında erişilebilir kılmak; yerelleştirmeyi kalıcı bir geliştirici angaryas haline getirmeden.

React i18n'i karmaşıklık olmadan uygulamanıza eklemek ister misiniz? better-i18n ile başlayın — React uygulamanızı dakikalar içinde bağlayın ve gerisini içerik ekibinize bırakın.

Son güncelleme: Mart 2024. Anahtar kelimeler: react internationalization, react i18n, react localization, react js i18n, react js localization, reactjs localization.