i18next è una libreria di internazionalizzazione popolare che rende facile tradurre applicazioni web in più lingue. È una scelta eccellente per gli sviluppatori di React e Next.js che desiderano supportare utenti in tutto il mondo. In questo articolo, esploreremo come i18next si integri facilmente con applicazioni React e Next.js.
Innanzitutto, iniziamo con una breve panoramica di i18next. È una libreria JavaScript che fornisce un'API semplice per caricare e gestire le traduzioni. Puoi usarlo con una varietà di framework front-end, tra cui React e Next.js. i18next supporta molte funzionalità di default, come la pluralizzazione, il contesto e l'interpolazione. Supporta anche il caricamento delle traduzioni da varie fonti, inclusi file JSON e API di backend.
Per integrare i18next nella tua applicazione React o Next.js, dovrai prima installarlo. Puoi farlo con npm o yarn eseguendo il seguente comando:
npm install i18next
o
yarn add i18next
Una volta installato i18next, puoi iniziare a usarlo nella tua applicazione. Uno dei modi più semplici per usare i18next con React è utilizzare il useTranslation gancio. Questo hook offre un modo conveniente per caricare le traduzioni e tradurre il testo all'interno dei tuoi componenti.
Ecco un esempio di come usare il useTranslation hook in un componente React:
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 questo esempio, stiamo importando il useTranslation gancio da react-i18next pacchetto. Poi lo utilizziamo per caricare le traduzioni e ottenere una funzione di traduzione (t) che possiamo usare per tradurre il testo all'interno del componente.
Possiamo quindi usare il t funzione per tradurre il title E description stringhe dai nostri file di traduzione I file di traduzione possono essere file JSON, come questo:
{
"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 può costruire automaticamente più lingue utilizzando il plugin FluentC di i18next.
In questo esempio, abbiamo due traduzioni: una per l'inglese e una per il francese. Possiamo caricare queste traduzioni nella nostra applicazione utilizzando il i18next biblioteca
Per caricare le traduzioni, possiamo usare il i18next oggetto e suo init funzione. Ecco un esempio:
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 questo esempio, stiamo importando le traduzioni in inglese e francese dai file JSON. Stiamo quindi inizializzando i18next con queste traduzioni e impostando la lingua predefinita su inglese. Stiamo anche configurando le impostazioni di interpolazione in modo da poter usare variabili nelle nostre traduzioni.
Una volta caricati le tue traduzioni e configurato i18next, puoi iniziare a usarlo useTranslation gancio per tradurre il testo all'interno dei tuoi componenti.
In un'applicazione Next.js, puoi utilizzare lo stesso approccio per integrare i18next. Puoi caricare le traduzioni nel getStaticProps o getServer