Implementando a Internacionalização(i18n) em Next.js: Multilíngue

Nesta seção, iremos guiá-lo através do processo de implementação da Internacionalização(i18n) em sua Next.js aplicação. Com o i18n, você pode criar uma experiência multilíngue para os usuários e fornecer conteúdo específico para um idioma.

Usando a next-i18next Biblioteca

next-i18next é uma biblioteca popular para implementação de i18n em Next.js aplicativos. Veja como você pode adicionar i18n ao seu aplicativo:

Instalar next-i18next:

npm install next-i18next

Configure a biblioteca em seu next.config.js arquivo:

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

Crie um arquivo de configuração chamado next-i18next.config.js:

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

Use a biblioteca em seu aplicativo:

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

Criação de conteúdo multilíngue

Após a instalação, next-i18next você pode criar arquivos de idioma como en.json, para fornecer conteúdo em cada idioma: fr.json es.json

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

Troca de idioma

Para permitir a troca de idioma, você pode criar uma ferramenta de troca de idioma e usar a i18n.changeLanguage função:

 

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

Conclusão

Esta seção apresentou o processo de implementação da Internacionalização(i18n) em seu Next.js aplicativo usando a next-i18next biblioteca. Ao fornecer conteúdo específico para um idioma e permitir que os usuários troquem de idioma, você pode criar uma experiência multilíngue envolvente para seus usuários.