Next.js Uluslararasılaştırma: i18n Kılavuzunu next-intl ile tamamlayın

İnternet kullanıcılarının %75'inden fazlası kendi ana dillerinde gezinmeyi tercih ediyor ve yerelleştirme yapan işletmeler, İngilizce dışındaki pazarlarda %70 daha yüksek dönüşüm oranları görüyor. Next.js, next-intl ile birleştiğinde, herhangi bir sayıda yerel ayarda yönlendirme, çeviri, biçimlendirme ve SEO işlemlerini gerçekleştiren güçlü bir uluslararasılaştırma çerçevesi sağlar.

Önemli Çıkarımlar

• next-intl, Next.js Uygulama Yönlendiricisi ve sunucu bileşenleriyle sorunsuz bir şekilde bütünleşir
• Yerel ön ekli yönlendirme, diğer diller için önekler eklerken İngilizce URL'leri temiz tutar
• Sunucu bileşenleri, çevirileri istemci tarafı JavaScript paketi ek yükü olmadan yükler
• Uygun hreflang etiketleri ve çok dilli site haritaları uluslararası SEO için gereklidir

---

Proje Kurulumu

next-intl'yi yükleyin ve projenizi routing.ts, navigasyon.ts ve request.ts'yi içeren bir i18n dizini ile düzenleyin. Uygulamanızı Uygulama Yönlendiricisinde [yerel ayar] altına yerleştirin. Çeviri JSON dosyalarını proje kökündeki bir mesajlar dizininde saklayın.

Yönlendirme Yapılandırması

Yerel ayar dizinizi, varsayılan yerel ayarınızı ve yerel ayar önek stratejinizi belirterek defineRouting() ile yönlendirmeyi tanımlayın. "Gerektiğinde" stratejisi, diğerleri için /es/, /fr/, /ar/ öneklerini eklerken varsayılan yerel ayar (İngilizce) için öneki atlar.

Yerel ayara duyarlı Bağlantı, useRouter, usePathname ve yönlendirme işlevlerini elde etmek için createNavigation(routing) ile gezinme sarmalayıcıları oluşturun. Uygulamanızda Next.js yerel navigasyonu yerine bunları kullanın.

Ara Yazılım Kurulumu

Next.js 16'da bir proxy.ts dosyası oluşturun (eski middleware.ts modelinin yerine). createMiddleware(routing) tarafından oluşturulan bir proxy işlevini dışa aktarın. Eşleştiriciyi API rotalarını, statik dosyaları ve _next yollarını hariç tutacak şekilde yapılandırın.

---

Çeviri Dosyaları

JSON Yapısı (İç İçe, Düz Değil)

Ad alanına göre düzenlenen iç içe geçmiş anahtarları kullanın. Hiçbir zaman "home.title" gibi düz, noktayla ayrılmış anahtarlar kullanmayın; bunlar, sonraki uluslararası ad alanı çözümlemesini bozar. Yapı çevirileri şu şekilde:

• ortak: Paylaşılan terimler (düğmeler, etiketler, yükleme durumları)
• nav: Gezinme öğeleri
• ana sayfa: Ana sayfa içeriği
• hakkında: Sayfa içeriği hakkında
• admin.common: Paylaşılan yönetici şartları
• admin.products: Ürün yönetimi sayfası

Sunucu Bileşenleri

Eşzamansız sunucu bileşenlerinde getTranslations("namespace") kullanın. Bu, çevirileri sunucuya sıfır istemci paketi etkisi ile yükler. Dize çevirileri için t("anahtar"), zengin metin için t.rich("anahtar", { kalın: (parçalar) => ... }) çağrısını yapın.

İstemci Bileşenleri

"use client" ile işaretlenmiş istemci bileşenlerinde useTranslations("namespace") kancasını kullanın. Kanca aynı t() fonksiyonunu sağlar. İstemci paketine yalnızca etkin ad alanının çevirileri dahildir.

---

RTL (Sağdan Sola) Desteği

Arapça, İbranice, Urduca ve diğer RTL dilleri için geçerli yerel ayara göre HTML öğesinde dir=tr=rtl değerini ayarlayın. Yerel ayar düzeninde, yerel ayarın rtlLocales dizinizde olup olmadığını kontrol edin ve yönü buna göre ayarlayın.

RTL modunda otomatik olarak dönen düzenler için Tailwind CSS mantıksal özelliklerini (pl, pr, ml, mr yerine ps, pe, ms, me) kullanın. RTL komut dosyaları için uygun yazı tiplerini yükleyin (örneğin, Arapça ve Urduca için Noto Sans Arabic).

---

SEO: Meta Veriler ve Hreflang

Dinamik Meta Veri

Her sayfa, yerel ayarlara duyarlı başlıklar, açıklamalar ve hreflang alternatifleri için createdMetadata() işlevini kullanmalıdır (asla statik dışa aktarma const meta verileri kullanmayın). Her yerel ayarı kendi URL yoluna eşleyen bir alternatif. dil nesnesi ve ayrıca İngilizce sürümü işaret eden bir x-default girişi oluşturun.

Çok Dilli Site Haritası

Her yerel ayardaki her sayfa için site haritası girişleri oluşturun. Her giriş, tüm yerel ayar değişkenlerini eşleştiren alternatif dilleri içermelidir. Bu, arama motorlarının her pazarda doğru dil sürümünü sunmasını sağlar.

İçerik Dili Meta Etiketi

Arama motorlarının ve AI tarayıcılarının sayfa dilini tanımlamasına yardımcı olmak için yerel ayar düzeninizde içerik dili meta etiketini ayarlayın. Bu özellikle Bing ve yeni ortaya çıkan yapay zeka arama motorları için önemlidir.

---

Çeviri İş Akışı

1. Tüm çevrilebilir dizeler için tek doğru kaynak olarak en.json'u düzenleyin
2. Yeni anahtarları tüm yerel ayar dosyalarına yaymak için çeviri komut dosyasını çalıştırın (ilk taslaklar için Google Çeviri API'sini veya DeepL'i kullanarak)
3. Çevirileri kalite ve kültürel uygunluk açısından anadili İngilizce olan kişilerle inceleyin
4. RTL dillerini kapsamlı bir şekilde test edin; düzen çevirmeyi, metin hizalamasını ve form girişlerini kontrol edin
5. Hreflang doğrulama araçları ve Google Search Console uluslararası hedeflemeyle SEO'yu doğrulayın

Büyük Çeviri Dosyalarını İşleme

5.000'den fazla çeviri anahtarına sahip uygulamalar için, sürdürülebilirliği artırmak amacıyla JSON dosyalarını ad alanına göre düzenleyin. next-intl yalnızca geçerli sayfa için gereken ad alanlarını yükleyerek performansı en iyi durumda tutar.

---

Performansla İlgili Hususlar

• Sunucu oluşturma: Çeviriler sunucuya yüklenir. Bileşen bir istemci bileşeni olmadığı sürece istemciye çeviri JSON gönderilmez.
• Ad alanı bölme: Çeviri dosyasının tamamı değil, sayfa başına yalnızca etkin ad alanları yüklenir.
• Statik oluşturma: getTranslations() kullanan sayfalar, tüm yerel ayarlar için oluşturma sırasında statik olarak oluşturulabilir.
• Paket boyutu: İstemci bileşenleri yalnızca ad alanı çevirilerini içerir. useTranslations("home") kullanan bir sayfa yalnızca "home" ad alanını gönderir.

---

Yaygın Tuzaklar

1. Düz tuşlar: Yuvalanmış { "home": { "title": "..." } } yerine "home.title" anahtarını anahtar olarak kullanmak ad alanı çözümlemesini bozar
2. Eksik çeviriler: Her zaman geri dönüş davranışı sağlayın -- bir çeviri eksikse next-intl anahtar adını gösterir, ancak bu kullanıcılara hatalı görünüyor
3. Sabit kodlu dizeler: Çeviri sistemi dışındaki dizeler için kod tabanınızı denetleyin
4. Tarih/sayı biçimlendirmesi: Tutarlı davranış için toLocaleDateString() yerine next-intl biçimlendiricileri kullanın
5. Statik meta veriler: createdMetadata() yerine const meta verilerini dışa aktarmanın kullanılması, yerel ayarlara duyarlı başlıkların ve açıklamaların önlenmesini sağlar

---

Sıkça Sorulan Sorular

S: Next-intl kaç yerel ayarı yönetebilir?

Pratik bir sınır yoktur. 11'den fazla yerel ayara ve 7.000'den fazla çeviri anahtarına sahip uygulamalar performans sorunu olmadan çalışır. Sunucu tarafı oluşturma, çevirilerin istemci paketlerini şişirmediği anlamına gelir.

S: i18n sayfa yükleme performansını etkiler mi?

Sunucu bileşenleriyle çeviri yüklemesi sunucuda gerçekleşir. Performans etkisi ihmal edilebilir düzeydedir. İstemci bileşenleri yalnızca ad alanı çevirilerini içerir; genellikle birkaç KB boyutundadır.

S: Birden çok dilde dinamik veritabanı içeriğini nasıl ele alırız?

Statik kullanıcı arayüzü metni JSON dosyalarını kullanır. Veritabanı içeriği (blog gönderileri, ürün açıklamaları), çevirilerin özel sütunlarda veya tablolarda saklanmasını veya yerleşik çeviri iş akışına sahip bir CMS kullanılmasını gerektirir. Bazı ekipler bir hibrit kullanır: Kullanıcı arayüzü için JSON, içerik için veritabanı.

S: Sayı ve tarih biçimlendirmesi ne durumda?

next-intl, sayıların, para birimlerinin, tarihlerin ve göreceli saatlerin yerel ayarlara duyarlı biçimlendirilmesi için useFormatter() işlevini sağlar. Tüm biçimlendirmeler Intl standardını takip eder ve yerel ayar kurallarına otomatik olarak uyar.

---

Sırada Ne Var

Uluslararasılaşma, İngiltere dışındaki her pazarda temettü ödeyen bir yatırımdır. En yüksek değere sahip yerel ayarlarınızla başlayın ve oradan genişletin.

i18n uygulama yardımı için ECOSIRE ile iletişime geçin veya çok dilli ERP dağıtımı için Odoo uygulama hizmetlerimizi inceleyin.

---

ECOSIRE tarafından yayınlandı - işletmelerin kurumsal yazılım çözümleriyle ölçeklenmesine yardımcı oluyor.