NextJS’de çoklu dil desteği eklemek

Oluşturduğumuz projede birden fazla dil ile sayfamızı oluşturmak istiyoruz ve bunu nasıl yaparız bu blog yazısında dilim döndüğünce buna değinmek istiyorum.

Kullanımı oldukça kolay olan ve çok az yer kaplayan next-translate kütüphanesini kullanacağım.

Next projemizi oluşturalım.

npx create-next-app multi-language
cd multi-language

Artık Next projemiz kullanıma hazır. Dil desteği için next-translate kütüphanesini yükleyelim.

npm i next-translate

Kurulumlarımız tamamlandıktan sonra next.config.js dosyasına eklemeler yapmamız gerekiyor.

Eğer next.config.js dosyamızda daha önceden yaptığımız konfigürasyonlar varsa next.config.js dosyamızı bu şekilde güncelleyebiliriz.

Artık konfigürasyonlarımız tamamlandı.

Dil ayarlamalarımız için i18n.json adında bir dosya oluşturuyoruz.

Burada sayfamızda bulunacak dil seçeneklerini , sayfanın ilk açılışında seçili olan dili ve bir sayfa objesi tanımladık.Aslında bu pages klasöründe * tanımladığımız çeviri sayfaları her sayfada yüklenecek demek bunları birazdan daha da özelleştireceğiz.

Çevirilerimizi eklemek için locales adında bir dosya oluşturacağız ve 2 dil desteği olmasını istediğimiz için burada 2 klasör açıyoruz.

2 klasörde de common.json dosyası oluşturduk. Çünkü hatırlarsanız i18n.json dosyamızda bu isimle tanımlamıştık. Artık sayfamızda kullanalım.

useTranslation’ı kullanarak bu hookun içinden lang ve t keywordlerini aldık.

lang keywordu şuanda sistemin seçili olduğu dili ve t keywordu de çeviriyi kullanmamız için işimize yarıyor.

Ekranda artık türkçe için Merhaba ve ingilizce için Hello yazılarını alıyoruz.

Sayfaya özel bir dil ayarı yapmak istersek locales/tr/about locales/en/about dosyaları oluşturup i18n.json’da pages objesi içinde pathini vermemiz yeterli olacaktır.

Son olarak da bir parametre nasıl gönderebiliriz onu inceleyelim.

Bu şekilde .json dosyamızda count key’imiz karşılığındaki çeviride bir parametre bulunuyor.

Parametre gönderirken ;

Aslında benim bahsedeceklerim kısaca bunlar.

DİLİ DEĞİŞTİRMEK

i18n.json dosyamıza erişip buradaki dil seçeneklerimizi alabiliriz. Kod üzerinde detaylı inceleyelim.

Bu kod satırını direkt kütüphanenin dökümantasyonundan aldım çok temiz ve anlaşılır.

Locale’de olan tüm dil seçeneklerini alıp mapliyoruz ve link ile sarıyoruz.

Umarım bu yazı yardımcı olmuştur.