i18next is een populaire internationalisatiebibliotheek die het gemakkelijk maakt om webapplicaties in meerdere talen te vertalen. Het is een uitstekende keuze voor React- en Next.js-ontwikkelaars die gebruikers over de hele wereld willen ondersteunen. In dit artikel verkennen we hoe i18next eenvoudig integreert met React- en Next.js-toepassingen.
Laten we eerst een korte overzicht geven van i18next. Het is een JavaScript-bibliotheek die een eenvoudige API biedt voor het laden en beheren van vertalingen. Je kunt het gebruiken met verschillende front-end frameworks, waaronder React en Next.js. i18next ondersteunt veel functies direct uit de doos, zoals meervoudsvorming, context en interpolatie. Het ondersteunt ook het laden van vertalingen uit verschillende bronnen, waaronder JSON-bestanden en backend-API's.
Om i18next in je React- of Next.js-toepassing te integreren, moet je het eerst installeren. Je kunt dit doen met npm of yarn door het volgende commando uit te voeren:
npm install i18next
of
yarn add i18next
Zodra je i18next hebt geïnstalleerd, kun je het gaan gebruiken in je applicatie. Een van de gemakkelijkste manieren om i18next te gebruiken met React is door de useTranslation haak Deze hook biedt een handige manier om vertalingen te laden en tekst binnen je componenten te vertalen.
Hier is een voorbeeld van hoe je de gebruikt useTranslation hook in een React-component:
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;
In dit voorbeeld importeren we de useTranslation haak van de react-i18next pakket. We gebruiken het vervolgens om vertalingen te laden en een vertaalfunctie te krijgen (t) die we kunnen gebruiken om tekst binnen het component te vertalen.
We kunnen dan de gebruiken t functie om te vertalen de title En description strings uit onze vertalingsbestanden. De vertalingsbestanden kunnen JSON-bestanden zijn, zoals dit:
{
"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 automatisch meerdere talen bouwen met behulp van de i18next FluentC-plugin.
In dit voorbeeld hebben we twee vertalingen: één voor Engels en één voor Frans. We kunnen deze vertalingen in onze applicatie laden met behulp van de i18next bibliotheek.
Om vertalingen te laden, kunnen we de i18next object en zijn init functie. Hier is een voorbeeld:
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
},
},
});
In dit voorbeeld importeren we de Engelse en Franse vertalingen uit JSON-bestanden. We initialiseren i18next vervolgens met deze vertalingen en stellen de standaardtaal in op Engels. We configureren ook de interpolatie-instellingen zodat we variabelen in onze vertalingen kunnen gebruiken.
Zodra je je vertalingen hebt geladen en i18next hebt ingesteld, kun je beginnen met het gebruiken van de useTranslation haak om tekst binnen je componenten te vertalen.
In een Next.js-toepassing kun je dezelfde aanpak gebruiken om i18next te integreren. Je kunt vertalingen laden in de getStaticProps of getServer