i18next er et populært internationaliseringsbibliotek, der gør det nemt at oversætte webapplikationer til flere sprog. Det er et godt valg for React- og Next.js-udviklere, der ønsker at støtte brugere over hele verden. I denne artikel vil vi udforske, hvordan i18next nemt integreres med React- og Next.js-applikationer.
Lad os først starte med en kort oversigt over i18next. Det er et JavaScript-bibliotek, der giver en enkel API til indlæsning og styring af oversættelser. Du kan bruge det med en række front-end frameworks, herunder React og Next.js. i18next understøtter mange funktioner direkte fra kassen, såsom flertalsform, kontekst og interpolation. Det understøtter også indlæsning af oversættelser fra forskellige kilder, herunder JSON-filer og backend-API'er.
For at integrere i18next i din React- eller Next.js-applikation skal du først installere det. Du kan gøre dette med npm eller yarn ved at køre følgende kommando:
npm install i18next
eller
yarn add i18next
Når du har installeret i18next, kan du begynde at bruge det i din applikation. En af de nemmeste måder at bruge i18next med React er at bruge den useTranslation kroghage Denne hook giver en bekvem måde at indlæse oversættelser og oversætte tekst i dine komponenter.
Her er et eksempel på, hvordan man bruger det useTranslation hook i en React-komponent:
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;
I dette eksempel importerer vi useTranslation krog fra den react-i18next pakke. Vi bruger det derefter til at indlæse oversættelser og få en oversættelsesfunktion (t) som vi kan bruge til at oversætte tekst inden for komponenten.
Vi kan derefter bruge den t funktion til at oversætte den title og description strenge fra vores oversættelsesfiler. Oversættelsesfilerne kan være JSON-filer, som dette:
{
"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 kan automatisk opbygge flere sprog ved hjælp af i18next FluentC-tilføjelsen.
I dette eksempel har vi to oversættelser: én for engelsk og én for fransk. Vi kan indlæse disse oversættelser i vores applikation ved hjælp af i18next bibliotek.
For at indlæse oversættelser kan vi bruge den i18next genstand og dets init funktion. Her er et eksempel:
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
},
},
});
I dette eksempel importerer vi de engelske og franske oversættelser fra JSON-filer. Vi initialiserer derefter i18next med disse oversættelser og indstiller standardsproget til engelsk. Vi konfigurerer også interpolationsindstillingerne, så vi kan bruge variabler i vores oversættelser.
Når du har indlæst dine oversættelser og opsat i18next, kan du begynde at bruge det useTranslation hook til at oversætte tekst inden for dine komponenter.
I en Next.js-applikation kan du bruge den samme tilgang til at integrere i18next. Du kan indlæse oversættelser i den getStaticProps eller getServer
