Internacionalização com Intlayer e i18next

i18next é um framework de internacionalização (i18n) de código aberto projetado para aplicações JavaScript. É amplamente utilizado para gerenciar traduções, localização e troca de idiomas em projetos de software. No entanto, possui algumas limitações que podem complicar a escalabilidade e o desenvolvimento.

Intlayer é outro framework de internacionalização que aborda essas limitações, oferecendo uma abordagem mais flexível para a declaração e gestão de conteúdo. Vamos explorar algumas diferenças fundamentais entre i18next e Intlayer, e como configurar ambos para uma internacionalização ideal.

Intlayer vs. i18next: Diferenças Chave

1. Declaração de Conteúdo

Com i18next, os dicionários de tradução devem ser declarados em uma pasta específica, o que pode complicar a escalabilidade da aplicação. Em contraste, o Intlayer permite que o conteúdo seja declarado dentro do mesmo diretório que seu componente. Isso tem várias vantagens:

• Edição de Conteúdo Simplificada: Os usuários não precisam procurar o dicionário correto para editar, reduzindo a chance de erros.
• Adaptação Automática: Se um componente mudar de local ou for removido, o Intlayer detecta e se adapta automaticamente.

2. Complexidade de Configuração

Configurar o i18next pode ser complexo, especialmente ao integrar com componentes do lado do servidor ou ao configurar middleware para frameworks como Next.js. O Intlayer simplifica esse processo, oferecendo uma configuração mais direta.

3. Consistência dos Dicionários de Tradução

Garantir que os dicionários de tradução sejam consistentes em diferentes idiomas pode ser desafiador com i18next. Essa inconsistência pode levar a falhas na aplicação se não for tratada adequadamente. O Intlayer aborda isso exigindo restrições no conteúdo traduzido, garantindo que nenhuma tradução seja perdida e que o conteúdo traduzido seja preciso.

4. Integração com TypeScript

O Intlayer oferece melhor integração com TypeScript, permitindo sugestões automáticas de conteúdo em seu código, aumentando assim a eficiência do desenvolvimento.

5. Compartilhamento de Conteúdo Entre Aplicações

O Intlayer facilita o compartilhamento de arquivos de declaração de conteúdo entre várias aplicações e bibliotecas compartilhadas. Esse recurso torna mais fácil manter traduções consistentes em uma base de código maior.

Como Gerar Dicionários i18next com Intlayer

Configurando Intlayer para Exportar Dicionários i18next

Notas Importantes A exportação de dicionários i18next está atualmente em beta e não garante uma compatibilidade 1:1 com outros frameworks. É recomendado seguir uma configuração baseada no Intlayer para minimizar problemas.

Para exportar dicionários i18next, você precisa configurar o Intlayer adequadamente. Abaixo está um exemplo de como configurar o Intlayer para exportar tanto dicionários Intlayer quanto i18next.

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  content: {
    // Indique que Intlayer irá exportar tanto dicionários Intlayer quanto i18next
    dictionaryOutput: ["intlayer", "i18next"],
    // Caminho relativo da raiz do projeto para o diretório onde os dicionários i18n serão exportados
    i18nDictionariesDir: "./i18n/dictionaries",
  },
};

export default config;

Ao incluir 'i18next' na configuração, o Intlayer gera dicionários dedicados do i18next além dos dicionários do Intlayer. Note que remover 'intlayer' da configuração pode quebrar a compatibilidade com React-Intlayer ou Next-Intlayer.

Importando Dicionários na Sua Configuração i18next

Para importar os dicionários gerados na sua configuração i18next, você pode usar 'i18next-resources-to-backend'. Aqui está um exemplo de como importar seus dicionários i18next:

// i18n/client.ts

import i18next from "i18next";
import resourcesToBackend from "i18next-resources-to-backend";

i18next
  // Sua configuração i18next
  .use(
    resourcesToBackend(
      (language: string, namespace: string) =>
        import(`../i18n-dictionaries/${language}/${namespace}.json`)
    )
  );