NextJs Projelerinize Çoklu Dil Desteği Eklemenin Kolay Yolu : next-i18next
Günümüzde çoklu dil desteği çok önemli hale geldi ve gittikçe de kullanımı artmaya başladı. Projelerinize çoklu dil desteği eklemenin bir çok yolu var ancak projenin başlarında eklemeniz çok önemli duruma gelebilir çünkü hali hazırda çalışan ve karmaşık bir sitedeki her string için çeviri eklemek biraz zorlayıcı olabilir.
Bugün sizlere next-i18next isimli bir paket aracılığıyla hali hazırda çalışan veya yeni oluşturacağınız NextJs projelerinize nasıl çoklu dil desteğini ekleyeceğinizi anlatacağım.
next-i18next nedir?
NextJs bize hali hazırda çoklu dil desteği sağlasa da çeviri içeriğine veya çeviri fonksiyonunun kendisi üzerinde herhangi bir yönetim sağlamıyor. NextJs’in yaptığı şey yerel dosyalarınız ile URL’ler arasında senkronizasyon sağlamak.
next-i18next ise bu eksiği gidermek için geri kalan fonksiyonelliği yönetmemize olanak sağlar.
Neden next-i18next?
Kurulumu ve kullanımı kolaydır: Hızlıca konfigüre edebilir ve bir kaç adımda hızlıca uygulamanıza entegre olabilir.
Başka bir gerekliliğe gerek kalmaz: NextJs ve i18next arasında köprü görevi görerek ihtiyacınız olan tüm fonksiyonelliği sağlar.
Production’a hazırdır: next-i18next çevirilerinizi ve konfigürasyon ayarlarınızı sayfalara SSG/SSR desteğiyle propslar aracılığıyla yollar.
Nasıl çalışır?
Birazdan kurulum aşamasında yapacaklarımızın özeti ve next-i18next’in çalışma mantığını bu başlık altında toplamanın faydalı olabileceğine inanıyorum.
next-i18next.config.js dosyası NextJs, i18next ve next-i18next arasında bir köprü görevi görür. Çoklu dil ile alakalı konfigürasyonu bu dosya aracılığı ile yaparız. konfigürasyonu yaptıktan sonra, i18n nesnesini next.config.js dosyası içinden geçiririz.
Bu işlemden sonra, _app.js isimli NextJs dosyamızı appWithTranslation isimli bir HOC ile sarmalarız. appWithTranslation i18next’ten gelen t fonksiyonu ve 118n nesnesini componentlerimize propslar aracılığıyla göndermemizi sağlar.
Bu işlemi de tamamladıktan sonra, serverSideTranslation isimli bir diğer HOC ile page-level componentlerimize çevirilerimizi ve konfigürasyon ayarlarımızı göndereceğiz.
serverSideTranslation isimli fonksiyonu ihtiyacımıza göre NextJs’den gelen getStaticProps veya getServerSideProps içinde çağıracağız.
Böylelikle i18n nesnesini ve useTranslation hook’unu client-side olarak çalıştırabilecek ve NextJs projemize çoklu dil desteğini eklemiş olacağız.
Kurulum
Projeye ekleme
yarn add next-i18next
komutunu projemizin dizininde terminalden çalıştırarak paketi ekliyoruz.
Çeviri nesnesini oluşturma
Varsayılan olarak next-i18next çevirilerinizi aşağıdaki şekilde olduğu gibi organize etmenizi bekler. Public klasörümüzün içine locales adında bir klasör içinde kullanacağımız diller için klasör açıyor, ardından içine her page-level componentte çağıracağımız çeviri dosyasını JSON verisine çeviriyoruz.
Örnek JSON dosyası
Aynı isimde JSON dosyasını diğer dillerde de eklediğimiz ve componentlerimizde t fonksiyonu ile head.title çevirimize ulaşabiliriz. Böylelikle kullanıcı hangi route’u kullanıyorsa o çeviriyi görmüş olacak.
Konfigürasyon
Öncelikle next-i18next.config.js dosyasını projenin root dizinine ekliyoruz.
next-18next.config.js
Şimdi, next.config.js dosyasını oluşturuyoruz.
Eğer next.config.js dosyası içinde ileri seviye export etmeniz gerekirse next.config.js dökümantasyonuna bakabilirsiniz.
_app.js dosyasında appWithTranslation ile projemizi sarıyoruz.
serverSideTranslation HOC aracılığıyla sayfalarımıza (master-level component) çoklu dil desteğini ekliyoruz.
Artık react-i18next’ten gelen useTranslation hook’u ile çevirilerimizi sayfalarımızda ve componentlerimizde kullanabiliriz. Bu hook’u direkt next-i18next’ten import edebiliriz.
Hepsi bu kadar. Daha detaylı bir inceleme için dökümantasyonları okumanızı öneririm. Yakın bir zamanda ise örnek bir uygulama yazıp codesandbox aracılığı ile bu story içinde paylaşacağım.
İlgili dökümantasyonlar
i18next : i18n nesnesi i18next’ten gelmektedir.
react-i18next : kullandığımız useTranslation hook’u react-i18next’ten gelmektedir.
next-i18next : paketin dökümantasyonu.
