Bu yazıda, React.js, TypeScript ve .NET kullanarak dinamik dil desteği eklemek için nasıl bir çok dilli giriş sayfası oluşturduğumuzu adım adım açıklayacağız. Kullanıcıların dil tercihlerine göre sayfanın içeriğini güncelleyen bir yapı ile i18n (internationalization) nasıl entegre edilir, bunu öğrenebilirsiniz.
Bu örnekte, React.js ve TypeScript ile ön yüzü geliştirirken, .NET backend tarafında dil verilerini sağlayacağız. Veri tabanından gelen dil bilgileriyle dinamik olarak dil yönetimi yapacağız.
Backend: .NET ile Dil Verisi Sağlama
Backend tarafında, kullanıcının dil tercihini ve dil kaynaklarını içeren bir Veritabanı Tablosu oluşturuyoruz. Bu tablonun iki ana kolonu bulunur: STRING_CODE (içerik kodu) ve LANG (dil bilgisi). API, bu verileri frontend’e sunarak dinamik dil desteğini sağlar.
Frontend Tarafı: React.js ve TypeScript ile i18n Konfigürasyonu
Frontend tarafında React-i18next kütüphanesini kullanarak dil yönetimi gerçekleştiriyoruz. React bileşeninde, dil bilgisi backend API’sinden alındıktan sonra i18n kütüphanesini kullanarak sayfa dilini değiştiriyoruz. Dil seçimi yapıldığında, sayfa anında doğru dildeki içerikle güncellenir.
Veritabanı ile Entegrasyon: Dil Seçiminin Dinamik Olarak Yüklenmesi
Veri tabanından alınan dil bilgisi, i18n yapılandırmasına aktarılır. Kullanıcı sayfayı yüklediğinde veya dilini değiştirdiğinde, uygulama o dile uygun içeriği gösterir. Bu işlem, backend API ile etkileşim kurarak yapılır ve kullanıcının dil tercihini saklar. Bu özellik kullanıcının dil tercihini uygulama boyunca değiştirmesine olanak tanır. Uygulamanın herhangi bir kısmında dil değiştirilmesi gerektiğinde, sayfanın tüm metinleri anında güncellenir. Bu, kullanıcının tercih ettiği dilde daha kişiselleştirilmiş bir deneyim sağlar ve erişilebilirliği artırır.
