i18next je populárna knižnica na internacionalizáciu, ktorá uľahčuje preklad webových aplikácií do viacerých jazykov. Je to skvelá voľba pre vývojárov React a Next.js, ktorí chcú podporovať používateľov po celom svete. V tomto článku preskúmame, ako sa i18next ľahko integruje s aplikáciami React a Next.js.
Najskôr začnime stručným prehľadom i18next. Je to knižnica JavaScript, ktorá poskytuje jednoduché rozhranie API na načítanie a správu prekladov. Môžete ho použiť s rôznymi front-end rámcami, vrátane React a Next.js. i18next podporuje mnoho funkcií priamo z krabice, ako sú množné čísla, kontext a interpolácia. Tiež podporuje načítanie prekladov z rôznych zdrojov, vrátane súborov JSON a backendových API.
Na integráciu i18next do vašej aplikácie React alebo Next.js ho najskôr musíte nainštalovať. Toto môžete urobiť pomocou npm alebo yarn spustením nasledujúceho príkazu:
npm install i18next
alebo
yarn add i18next
Keď nainštalujete i18next, môžete ho začať používať vo svojej aplikácii. Jeden z najjednoduchších spôsobov, ako použiť i18next s Reactom, je použiť useTranslation hák Tento háčik poskytuje pohodlný spôsob načítania prekladov a prekladu textu vo vašich komponentoch.
Tu je príklad, ako použiť useTranslation záhlavie v React komponentu:
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;
V tomto príklade importujeme the useTranslation háčik z react-i18next balíček. Potom ho používame na načítanie prekladov a získanie prekladovej funkcie (t) ktorú môžeme použiť na preklad textu v rámci komponentu.
Môžeme potom použiť t funkcia na preklad title a description reťazce z našich prekladových súborov. Prekladové súbory môžu byť súbory JSON, ako je tento:
{
"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 môže automaticky vytvárať viacero jazykov pomocou pluginu FluentC pre i18next.
V tomto príklade máme dva preklady: jeden pre angličtinu a jeden pre francúzštinu. Môžeme tieto preklady načítať do našej aplikácie pomocou i18next knižnica.
Na načítanie prekladov môžeme použiť i18next objekt a jeho init funkcia. Tu je príklad:
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
},
},
});
V tomto príklade importujeme anglické a francúzske preklady zo súborov JSON. Potom inicializujeme i18next s týmito prekladmi a nastavujeme predvolený jazyk na angličtinu. Tiež nastavujeme nastavenia interpolácie, aby sme mohli používať premenné v našich prekladoch.
Keď načítate svoje preklady a nastavíte i18next, môžete začať používať useTranslation háčik na preklad textu vo vašich komponentoch.
V aplikácii Next.js môžete použiť rovnaký prístup na integráciu i18next. Môžete načítať preklady v getStaticProps alebo getServer