Implementación de la internacionalización(i18n) en Next.js: multilingüe

En esta sección, lo guiaremos a través del proceso de implementación de Internacionalización(i18n) en su Next.js aplicación. Con i18n, puede crear una experiencia multilingüe para los usuarios y proporcionar contenido específico en cada idioma.

Usando la next-i18next biblioteca

next-i18next es una biblioteca popular para implementar i18n en Next.js aplicaciones. Así es como puede agregar i18n a su aplicación:

Instalar next-i18next:

npm install next-i18next

Configure la biblioteca en su next.config.js archivo:

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

Cree un archivo de configuración llamado next-i18next.config.js:

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

Utilice la biblioteca en su aplicación:

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

Crear contenido multilingüe

Después de instalar next-i18next, puede crear archivos de idioma como en.json ,, para proporcionar contenido en cada idioma fr.json: es.json

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

Cambio de idioma

Para permitir el cambio de idioma, puede crear una herramienta de cambio de idioma y usar la i18n.changeLanguage función:

 

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

Conclusión

Esta sección le presentó el proceso de implementación de la internacionalización(i18n) en su Next.js aplicación utilizando la next-i18next biblioteca. Al proporcionar contenido específico para cada idioma y permitir a los usuarios cambiar de idioma, puede crear una experiencia multilingüe atractiva para sus usuarios.