İçeriğe geç

Uluslararasılaştırma

Uygulamanıza çok dilli destek ekleyin. Editoryal yerelleştirme için Proyecta Content API kullanın ya da yapay zekadan doğrudan koda bir i18n framework bağlamasını isteyin.

Proyecta, oluşturduğunuz uygulamaları uluslararasılaştırmak için birbirini tamamlayan iki yaklaşımı destekler:

  1. Proyecta Content API aracılığıyla içerik yerelleştirme — birden fazla dile çevrilmesi gereken editoryal içerikler (blog yazıları, SSS’ler, pazarlama metinleri) için
  2. Bir çeviri framework’ü aracılığıyla kod düzeyinde i18n — UI metinleri, tarihler, para birimleri ve çalışma zamanında dil değiştirme için

Her ikisi de bugün kullanılabilir. Hangisine ihtiyaç duyduğunuz, neyi çevirdiğinize bağlıdır.

Proyecta’nın kendisi 24 dil ile geliyor, dolayısıyla ürün i18n konusunda oldukça olgun. Aynı kalıplar, içinde oluşturduğunuz uygulamalar için de geçerlidir.

Seçenek 1: İçerik yerelleştirme (Proyecta Content API)

Bölüm başlığı “Seçenek 1: İçerik yerelleştirme (Proyecta Content API)”

Blog, bilgi tabanı, pazarlama sayfaları veya ürün kataloğu gibi içerik ağırlıklı bir site oluşturuyorsanız yerleşik dil desteğini kullanın. AI’a hangi dilleri desteklediğinizi söyleyin ("Make the site available in English, Spanish and French"); dilleri sizin için, İngilizce varsayılan olacak şekilde kaydeder. Ardından içeriğinizi ziyaretçinin diline göre okuyun.

Frontend tarafında, şablonun tip güvenli içerik hook’ları yerelleştirilmiş alanları sizin için çözümler — ziyaretçinin aktif dilini geçirin ve her localized alan tek bir çevrilmiş değer olarak döner:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';
function Blog({ slug }: { slug: string }) {
const { i18n } = useTranslation();
// List a collection in the current locale
const { data: posts } = useCollection('posts', { locale: i18n.language });
// Or read one entry by slug in the current locale
const { data: post } = useEntry('posts', slug, { locale: i18n.language });
// ...render posts / post
}

Arka planda CMS, bir geri dönüş zinciri izler — istenen dil → yapılandırılmış geri dönüşleri → varsayılan dil — ve gerçekte hangi dili sunduğunu her kayıtta localeResolved olarak raporlar. Tek dilli sitelerde locale parametresini atlayın; alanlar ham değer olarak döner.

Bu yaklaşım şu durumlarda doğru tercihtir:

  • Kod yazmayan editörlerin içerikleri çevirmesi gerekiyorsa
  • Çevirilerin sürümlenebilir olmasını istiyorsanız
  • Dile özgü yayımlama ihtiyacınız varsa (zamanlanmış yayımlama yakında geliyor — kayıtlar şu an API üzerinden manuel yayım gerektiriyor)

Content API’nin tamamı için bkz. İçerik Yönetimi.

UI metinleri — etiketler, butonlar, hata mesajları, tarihler, para birimleri — için yapay zekadan projenize doğrudan bir i18n framework bağlamasını isteyin:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

Yapay zeka şunları yapacak:

  1. Bir framework seçer — yapay zeka, react-i18next ile birlikte i18next kullanır (Proyecta’nın standardı)
  2. src/locales/ altında katalog dosyaları oluşturur (dil başına bir JSON dosyası)
  3. Metinleri t() çağrılarıyla sarar (react-i18next’in useTranslation hook’undan)
  4. Bir dil değiştirici bileşeni ekler
  5. URL yönlendirmesini dil ön ekleriyle yapılandırır
  6. Arapça, İbranice vb. için RTL düzenlerini (dir="rtl") yönetir
  7. Sayıları, tarihleri ve para birimlerini dile göre biçimlendirir

Temel diliniz hazır olduğunda, yapay zeka diğer katalog dosyalarını üretmek için harika bir araçtır:

  • "src/locales/en.json içindeki tüm metinleri İspanyolca, Fransızca, Almanca ve Japonca'ya çevir. Doğal ve deyimsel bir ifade kullan — marka adlarını çevirme."
  • "Uygulamamın tamamı İngilizce olarak hazırlandı. Her şey için İspanyolca çeviriler ekle ve es/ rota ön eki oluştur."

Yüksek riskli içerikler (hukuki metinler, tıbbi, finans) için yapay zeka çıktısını yayına almadan önce bir insan çevirmene gözden geçirtin.

Gerçek uygulamaların büyük çoğunluğu her ikisini de kullanır: UI çerçevesi (butonlar, hatalar, navigasyon) için kod düzeyinde i18n, editoryal içerikler (makaleler, ürün açıklamaları) için Content API. İkisi yan yana sorunsuz çalışır — i18n framework’ünüz katalog dosyalarını build sırasında işlerken, Content API yerelleştirilmiş kayıtları çalışma zamanında sunar.

  1. Önce temel dilinizi belirleyin ve metinleri netleştirin. Sürekli değişen bir hedefi çevirmek can sıkıcıdır.
  2. Çevirileri toplu yapın. Geliştirirken anında çevirmeyin — bir özellik stabil hale gelene kadar bekleyin.
  3. Arapça veya İbranice destekliyorsanız RTL’i erken test edin. RTL hataları, gerçekten bakana kadar fark edilmez.
  4. <html> üzerinde lang ve dir kullanın. Tarayıcılar ve ekran okuyucular buna ihtiyaç duyar.
  5. Biçimlendirme için Intl kullanın. Tarih veya para birimi biçimlendirmesini elle yazmayın — Intl.DateTimeFormat ve Intl.NumberFormat kullanın.
  • Builder içinde dil yönetimi arayüzü — Proyecta’dan çıkmadan dilleri seçin, çeviri kapsamını görün, katalogları düzenleyin
  • Yeni metinler için kaydetme sırasında otomatik çeviri
  • i18n’e hazır proje şablonları ile framework önceden yapılandırılmış olarak