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";
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.
https://github.com/emrekircaa/i18next-react-implementation
Kaynaklar