i18next dünýä boýunça giňden ulanylýan halkaralaşdyrma kitaphanasy bolup, web programmalaryny birnäçe dillerde terjime etmekde aňsatlyk döredýär. Dünýä boýunça ulanyjylara goldaw bermek isleýän React we Next.js programmistleri üçin ajaýyp saýlaw. Bu makalada, i18next-iň React we Next.js programma üpjünçilikleri bilen aňsatlyk bilen birleşmegini gözden geçireris.
Ilki bilen, i18next barada gysgaça düşünje bilen başlaýarys. Bu, terjime işlemlerini ýüklemek we dolandyryş etmek üçin ýönekeý API üpjün edýän JavaScript kitaphanasydyr. Siz onu React we Next.js ýaly dürli öňki çarçuwalary bilen ulanyp bilersiňiz. i18next kutulmalary, meselem, köpeltmek, kontekst we interpolasiýa ýaly, köp aýratynlygy öz içine alýar. Bu hem-de dürli çeşmelerden, şol sanda JSON faýllary we arka plandaky API-lardan terjime almak üçin goldaýar.
React ýa-da Next.js programmaňyza i18next-i goşmak üçin, ilkinji nobatda ony gurnamagyňyz gerek. Bunu npm ýa-da yarn bilen şu buýrugy ýerine ýetirip edip bilersiňiz:
npm install i18next
ýa-da
yarn add i18next
i18next-ni gurama başlaň, ony siziň programmaňyzda ulanyp başlaň. i18next bilen React ulanyp bolýan iň aňsat usullaryň biri - ulanylýar useTranslation çäke Bu hook, terjime edilýän tekstleri ýüklemek we komponentleriň içinde terjime etmek üçin amatly ýol hödürleýär.
Munuň nädip ulanylýandygyny görkezýän mysal. useTranslation React komponentinde 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 mysalda, biz import edýäris useTranslation çençeňden çekmek react-i18next paket. Soňra biz onu terjime etmek we terjime funksiýasyny almak üçin ulanylýarystkomponentiň içinde teksti terjime etmek üçin ulanyp boljak.
Soňra biz ulanyp bileris t terjime etmek üçin funksiýa title we description terjime faýllarymyzdan satırlar Terjime faýllary JSON faýllary bolup biler, meselem ş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 plaginini ulanyp, birnäçe dili awtomatiki taýdan gurup bilýär.
Bu mysalda, iki terjime bar: biri iňlisçe, biri fransuzça. Biz bu terjimeleri programmyza şu şekilde ýükläp bileris. i18next kitaphana
Terjime ýazgylaryny ýüklemek üçin, biz ulanyp bileris i18next obýekt we onuň init funksiýa. Munu mysal:
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 mysalda, biz JSON faýllaryndan iňlisçe we fransuzça terjimeleri import edýäris. Biz soňra bu terjimeleri bilen i18next-i başlatýarys we esasy dili iňlis diline goýýarys. Biz hem-de terjime üçin üýtgeýänleri ulanyp bilmek üçin interpolasiýa sazlamalaryny hem konfigurasiýa edýäris.
Bir gezek terjimeleriňizi ýükledip, i18next-i sazlaňan soň, ulanmaga başlap bilersiňiz useTranslation komponentleriňiziň içinde tekstleri terjime etmek üçin hook
Next.js programmaçasynda, i18next-i goşmak üçin şol bir çemeleşmäni ulanyp bilersiňiz. Siz terjime ýazgylaryny şu ýerde ýükläp bilersiňiz getStaticProps ýa-da getServer