Implementering av internasjonalisering(i18n) i Next.js: Flerspråklig

I denne delen vil vi veilede deg gjennom prosessen med å implementere internasjonalisering(i18n) i Next.js søknaden din. Med i18n kan du skape en flerspråklig opplevelse for brukere og gi språkspesifikt innhold.

Bruke next-i18next biblioteket

next-i18next er et populært bibliotek for implementering av i18n i Next.js applikasjoner. Slik kan du legge til i18n i applikasjonen din:

Installer next-i18next:

npm install next-i18next

Konfigurer biblioteket i next.config.js filen din:

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

Opprett en konfigurasjonsfil med navnet next-i18next.config.js:

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

Bruk biblioteket i søknaden din:

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

Opprette flerspråklig innhold

Etter installasjonen next-i18next kan du opprette språkfiler som en.json, fr.json, es.json for å gi innhold på hvert språk:

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

Språkveksling

For å tillate språkbytte kan du opprette et språkbytteverktøy og bruke funksjonen i18n.changeLanguage:

 

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

Konklusjon

Denne delen introduserte deg for prosessen med å implementere internasjonalisering(i18n) i Next.js applikasjonen din ved å bruke next-i18next biblioteket. Ved å tilby språkspesifikt innhold og gjøre det mulig for brukere å bytte språk, kan du skape en engasjerende flerspråklig opplevelse for brukerne dine.