Internationalisering implementeren(i18n) in Next.js: meertalig

In dit gedeelte begeleiden we u door het proces van het implementeren van Internationalisering(i18n) in uw Next.js aanvraag. Met i18n kunt u een meertalige ervaring voor gebruikers creëren en taalspecifieke inhoud aanbieden.

Gebruik van de next-i18next bibliotheek

next-i18next is een populaire bibliotheek voor het implementeren van i18n in Next.js applicaties. Zo kunt u i18n aan uw toepassing toevoegen:

Installeren next-i18next:

npm install next-i18next

Configureer de bibliotheek in uw next.config.js bestand:

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

Maak een configuratiebestand met de naam next-i18next.config.js:

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

Gebruik de bibliotheek in uw toepassing:

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

Meertalige inhoud creëren

Na de installatie next-i18next kunt u taalbestanden maken zoals en.json, fr.json, es.json om inhoud in elke taal aan te bieden:

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

Taalwisseling

Om taalwisseling mogelijk te maken, kunt u een taalwisseltool maken en de i18n.changeLanguage functie gebruiken:

 

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>  
 );  
}  

Conclusie

In dit gedeelte maakte u kennis met het proces van het implementeren van Internationalisering(i18n) in uw Next.js toepassing met behulp van de next-i18next bibliotheek. Door taalspecifieke inhoud aan te bieden en gebruikers in staat te stellen van taal te wisselen, kunt u een boeiende meertalige ervaring voor uw gebruikers creëren.