Implementazione dell'internazionalizzazione(i18n) in Next.js: Multilingue

In questa sezione ti guideremo attraverso il processo di implementazione dell'internazionalizzazione(i18n) nella tua Next.js domanda. Con i18n puoi creare un'esperienza multilingue per gli utenti e fornire contenuti specifici per la lingua.

Utilizzo della next-i18next Biblioteca

next-i18next è una libreria popolare per implementare i18n nelle Next.js applicazioni. Ecco come puoi aggiungere i18n alla tua applicazione:

Installa next-i18next:

npm install next-i18next

Configura la libreria nel tuo next.config.js file:

const { i18n } = require('./next-i18next.config');  
  
module.exports = {  
  i18n,  
};  

Crea un file di configurazione denominato next-i18next.config.js:

module.exports = {  
  i18n: {  
    locales: ['en', 'fr', 'es'],  
    defaultLocale: 'en',  
  },  
};  

Utilizza la libreria nella tua applicazione:

import { useTranslation } from 'next-i18next';  
  
function MyComponent() {  
  const { t } = useTranslation();  
  
  return( 
    <div>  
      <p>{t('welcome')}</p>  
    </div>  
 );  
}  

Creazione di contenuti multilingue

Dopo l'installazione next-i18next, è possibile creare file di lingua come en.json, fr.json, es.json per fornire contenuti in ciascuna lingua:

// en.json  
{  
  "welcome": "Welcome!"  
}  
  
// fr.json  
{  
  "welcome": "Bienvenue!"  
}  
  
// es.json  
{  
  "welcome": "¡Bienvenido!"  
}  

Cambio di lingua

Per consentire il cambio di lingua, puoi creare uno strumento di cambio lingua e utilizzare la i18n.changeLanguage funzione:

 

import { useTranslation } from 'next-i18next';  
  
function LanguageSwitcher() {  
  const { i18n } = useTranslation();  
  
  const handleChangeLanguage =(newLanguage) => {  
    i18n.changeLanguage(newLanguage);  
  };  
  
  return( 
    <div>  
      <button onClick={() => handleChangeLanguage('en')}>English</button>  
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>  
      <button onClick={() => handleChangeLanguage('es')}>Español</button>  
    </div>  
 );  
}  

Conclusione

Questa sezione ti ha presentato il processo di implementazione dell'internazionalizzazione(i18n) nella tua Next.js applicazione utilizzando la next-i18next libreria. Fornendo contenuti specifici per la lingua e consentendo agli utenti di cambiare lingua, puoi creare un'esperienza multilingue coinvolgente per i tuoi utenti.