i18next, çok dilli web uygulamalarını kolayca çevirmeyi sağlayan popüler bir uluslararasılaştırma kütüphanesidir. Dünya genelindeki kullanıcılara destek olmak isteyen React ve Next.js geliştiricileri için harika bir seçim. Bu makalede, i18next'in React ve Next.js uygulamalarıyla nasıl kolayca entegre edildiğini inceleyeceğiz.
İlk olarak, i18next hakkında kısa bir genel bakışla başlayalım. Çeviri yükleme ve yönetme için basit bir API sağlayan bir JavaScript kütüphanesidir. Bunu React ve Next.js dahil olmak üzere çeşitli ön uç çerçeveleriyle kullanabilirsiniz. i18next, çoğul kullanımı, bağlam ve interpolasyon gibi birçok özelliği kutudan çıkar çıkmaz destekler. Ayrıca, JSON dosyaları ve arka uç API'leri dahil olmak üzere çeşitli kaynaklardan çevirilerin yüklenmesini de destekler.
i18next'i React veya Next.js uygulamanıza entegre etmek için önce onu yüklemeniz gerekir. Bunu npm veya yarn ile aşağıdaki komutu çalıştırarak yapabilirsiniz:
npm install i18next
ve
yarn add i18next
i18next'i yükledikten sonra, uygulamanızda kullanmaya başlayabilirsiniz. i18next'i React ile kullanmanın en kolay yollarından biri, kullanmaktır. useTranslation kanca Bu kanca, çevirileri yüklemek ve bileşenleriniz içinde metinleri çevirmek için kullanışlı bir yol sağlar.
İşte nasıl kullanılacağına dair bir örnek useTranslation React bileşeninde hook:
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
Bu örnekte, içe aktarıyoruz useTranslation kanca from the react-i18next paket. Daha sonra çevirileri yüklemek ve bir çeviri fonksiyonu almak için kullanıyoruz (tBileşen içinde metni çevirmek için kullanabileceğimiz şey.
O zaman şunu kullanabiliriz t çeviri yapmak için fonksiyon title ve description çeviriler dosyalarımızdan dizeler Çeviri dosyaları JSON dosyaları olabilir, şu şekilde:
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC, i18next FluentC eklentisini kullanarak birden fazla dili otomatik olarak oluşturabilir.
Bu örnekte, İngilizce ve Fransızca olmak üzere iki çeviri bulunmaktadır. Bu çevirileri uygulamamızda kullanmak için yükleyebiliriz. i18next kütüphane
Çevirileri yüklemek için şunu kullanabiliriz i18next nesne ve onun init fonksiyon. İşte bir örnek:
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
Bu örnekte, JSON dosyalarından İngilizce ve Fransızca çevirileri içe aktarıyoruz. Sonra bu çevirilerle i18next'i başlatıyoruz ve varsayılan dili İngilizce olarak ayarlıyoruz. Ayrıca, çevirilerimizde değişkenleri kullanabilmemiz için enterpolasyon ayarlarını yapılandırıyoruz.
Çevirilerinizi yükledikten ve i18next'i kurduktan sonra kullanmaya başlayabilirsiniz. useTranslation Bileşenlerinizdeki metni çevirmek için bağlayıcı.
Bir Next.js uygulamasında, i18next'i entegre etmek için aynı yaklaşımı kullanabilirsiniz. Çevirileri yükleyebilirsiniz getStaticProps ve getServer