A internacionalização é uma necessidade comum em muitos projetos web.

Se sua aplicação Next.js precisa suportar múltiplos idiomas, é importante ter uma estratégia de internacionalização bem definida.

Felizmente, o Next.js oferece suporte para internacionalização, o que torna a implementação desta funcionalidade bastante simples.

Neste artigo, vamos discutir como implementar a internacionalização em sua aplicação Next.js.

Abaixo, seguem os passos para adicionar suporte para múltiplos idiomas em sua aplicação.

Passo 1: Instalar as dependências

Para começar, é preciso instalar as dependências necessárias para suportar a internacionalização em sua aplicação Next.js.

No terminal, execute o seguinte comando:

npm install --save next-i18next i18next i18next-browser-languagedetector

Estamos instalando as bibliotecas next-i18next, i18next e i18next-browser-languagedetector.

• next-i18next é a biblioteca oficial do Next.js para internacionalização.
• i18next é a biblioteca principal para gerenciamento de internacionalização.
• i18next-browser-languagedetector é uma biblioteca que detecta automaticamente o idioma do navegador do usuário.

Passo 2: Configurar o arquivo next.config.js

Em seguida, é necessário configurar o arquivo next.config.js. Abaixo está um exemplo de configuração básica:

const { i18n } = require('next-i18next/config');

module.exports = {
  i18n,
}; 

O código acima utiliza o objeto i18n da biblioteca next-i18next para configurar a internacionalização em sua aplicação.

Este objeto deve ser exportado para que o Next.js possa usá-lo para configurar o ambiente.

Passo 3: Configurar o arquivo i18n.js

O próximo passo é criar o arquivo i18n.js. Este arquivo é responsável por configurar a biblioteca i18next e definir as traduções para os idiomas suportados.

Abaixo está um exemplo de como definir as configurações básicas para o arquivo i18n.js:

const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'pt',
  otherLanguages: ['en'],
  localePath: 'public/static/locales',
});

No exemplo acima, estamos criando uma nova instância da biblioteca next-i18next. Estamos definindo o idioma padrão como pt, e adicionando o idioma en como um idioma adicional.

O parâmetro localePath indica o caminho para os arquivos de tradução, que devem estar localizados na pasta public/static/locales.

Passo 4: Adicionar as traduções

Agora que as configurações básicas foram definidas, é preciso adicionar as traduções para cada idioma suportado em sua aplicação.

Os arquivos de tradução devem estar localizados na pasta definida no parâmetro localePath do arquivo i18n.js.

Por exemplo, seguindo nosso exemplo, se o caminho para os arquivos de tradução é public/static/locales, você deve criar uma pasta para cada idioma suportado em sua aplicação (por exemplo, en para inglês e pt para português) e, em cada uma dessas pastas, criar um arquivo .json com as traduções.

Aqui está um exemplo de arquivo de tradução em inglês (en.json):

{
  "welcome": "Welcome!",
  "hello": "Hello, {name}!",
  "goodbye": "Goodbye!"
}

E um exemplo de arquivo de tradução em português (pt.json):

{
  "welcome": "Bem-vindo!",
  "hello": "Olá, {name}!",
  "goodbye": "Tchau!"
}

Observe que as chaves em ambos os arquivos de tradução devem ser as mesmas.

No entanto, o valor associado a cada chave deve ser traduzido para o idioma correspondente.

Passo 5: Implementar a internacionalização em sua aplicação

Com as configurações básicas e as traduções definidas, é hora de implementar a internacionalização em sua aplicação.

O next-i18next oferece uma API simples para traduzir seus componentes e páginas.

Para usar essa API, você precisa importar a instância da biblioteca next-i18next criada no arquivo i18n.js em seu componente ou página.

Aqui está um exemplo de como usar a API de tradução em um componente:

import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('hello', { name: 'John' })}</p>
      <button>{t('goodbye')}</button>
    </div>
  );
}

O código acima usa a função useTranslation para obter o objeto t que permite traduzir as chaves definidas nos arquivos de tradução.

O primeiro parâmetro da função useTranslation deve ser o nome do arquivo de tradução sem a extensão .json.

Conclusão

Neste artigo, vimos como implementar a internacionalização em sua aplicação Next.js.

Para adicionar suporte para múltiplos idiomas em sua aplicação, você precisa instalar as bibliotecas next-i18next, i18next e i18next-browser-languagedetector, configurar o arquivo next.config.js e criar o arquivo i18n.js para definir as configurações básicas e as traduções.

Em seguida, você pode usar a API de tradução fornecida pela biblioteca next-i18next para traduzir seus componentes e páginas.