React Çoklu Dil Yapısı ve i18next Nedir?

i18next nedir?

i18next uygulamalarımızda çoklu dil desteği sağlamamızı sağlayan bir framework. Kolay entegrasyon ve hızlı konfigürasyonu ile projenize dahil edebilirsiniz.

Kurulum

npm install react-i18next i18next --save

komutunu projemizin dizininde çalıştırıyoruz.

Dil dosyalarını oluşturma

locales klasörünün altına kullanacağımız dillerin dosyalarını oluşturuyoruz. Örneğin en.json ve tr.json

en.json

tr.json

Projemizde i18next kullanabilmek için src’nin alt dosyası olarak i18n adında bir dosya oluşturuyoruz.

i18next kullanımı

i18next’in kullanımı basitçe şu şekildedir:

t(“welcomeMessage”) - i18n.t(“welcomeMessage”)

src/App.js Dosyamıza importları yapıyoruz

import { useTranslation } from "react-i18next";
import i18n from "./i18n";

Örnek App.js kodu

Bu kod bloğunda kullanıcı butona bastığı anda i18n’nin changeLanguage fonksiyonu yardımıyla mevcut dil İngilizce ise Türkçeye, Türkçe ise İngilizceye değiştiriyor.

App.js kodu basitçe bu şekilde çalışıyor.

https://github.com/emrekircaa/i18next-react-implementation

Kaynaklar

Introduction