Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha
O conteúdo desta página foi traduzido com uma IA.
Veja a última versão do conteúdo original em inglêsSe você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.
Link do GitHub para a documentaçãoCopiar o Markdown do documento para a área de transferência
react-Intl VS react-i18next VS intlayer
Este guia compara três opções consolidadas de i18n para React: react-intl (FormatJS), react-i18next (i18next) e Intlayer.
Focamos em aplicações React puras (ex.: Vite, CRA, SPA). Se você usa Next.js, veja nossa comparação dedicada para Next.js.
Nós avaliamos:
- Arquitetura e organização de conteúdo
- TypeScript e segurança
- Tratamento de traduções ausentes
- Conteúdo rico e capacidades de formatação
- Desempenho e comportamento de carregamento
- Experiência do desenvolvedor (DX), ferramentas e manutenção
- SEO/roteamento (dependente do framework)
resumo: Todos os três podem localizar uma aplicação React. Se você deseja conteúdo com escopo por componente, tipagem TypeScript rigorosa, verificações de chaves ausentes em tempo de build, dicionários otimizados por tree-shaking e ferramentas editoriais integradas (Editor Visual/CMS + tradução assistida por IA opcional), Intlayer é a escolha mais completa para bases de código React modulares.
Posicionamento de alto nível
- react-intl - Formatação alinhada a padrões e centrada em ICU (datas/números/plurais) com uma API madura. Os catálogos são tipicamente centralizados; a segurança das chaves e a validação em tempo de build ficam majoritariamente a seu cargo.
- react-i18next - Extremamente popular e flexível; namespaces, detectores e muitos plugins (ICU, backends). Poderoso, mas a configuração pode se expandir conforme os projetos crescem.
- Intlayer - Modelo de conteúdo centrado em componentes para React, tipagem TS rigorosa, verificações em tempo de build, tree-shaking, além de Editor Visual/CMS e traduções assistidas por IA. Funciona com React Router, Vite, CRA, etc.
Para entender de onde vêm essas bibliotecas, leia a história do i18n em JavaScript.
Matriz de funcionalidades (foco em React)
Abrir a tabela em um modal para ver todo o conteúdo claramente
| Recurso | react-intlayer (Intlayer) | react-i18next (i18next) | react-intl (FormatJS) |
|---|---|---|---|
| Traduções Próximas aos Componentes | ✅ Sim, conteúdo localizado junto a cada componente | ❌ Não | ❌ Não |
| Integração com TypeScript | ✅ Avançada, tipos estritos gerados automaticamente | ⚠️ Básica; configuração extra para segurança | ✅ Boa, mas menos estrita |
| Detecção de Tradução Ausente | ✅ Destaque de erro no TypeScript e erro/aviso em tempo de compilação | ⚠️ Principalmente strings de fallback em tempo de execução | ⚠️ Strings de fallback |
| Conteúdo Rico (JSX/Markdown/componentes) | ✅ Suporte direto | ⚠️ Limitado / apenas interpolação | ⚠️ Sintaxe ICU, não é JSX real |
| Tradução com IA | ✅ Sim, suporta múltiplos provedores de IA. Usável com suas próprias chaves de API. Considera o contexto da sua aplicação e o escopo do conteúdo | ❌ Não | ❌ Não |
| Editor Visual | ✅ Sim, Editor Visual local + CMS opcional; pode externalizar conteúdo da base de código; incorporável | ❌ Não / disponível via plataformas externas de localização | ❌ Não / disponível via plataformas externas de localização |
| Roteamento Localizado | ✅ Sim, suporta caminhos localizados nativamente (funciona com Next.js & Vite) | ⚠️ Não embutido, requer plugins (ex: next-i18next) ou configuração personalizada do roteador | ❌ Não, apenas formatação de mensagens, roteamento deve ser manual |
| Geração Dinâmica de Rotas | ✅ Sim | ⚠️ Plugin/ecossistema ou configuração manual | ❌ Não fornecido |
| Pluralização | ✅ Padrões baseados em enumeração | ✅ Configurável (plugins como i18next-icu) | ✅ (ICU) |
| Formatação (datas, números, moedas) | ✅ Formatadores otimizados (Intl por baixo dos panos) | ⚠️ Via plugins ou uso customizado do Intl | ✅ Formatadores ICU |
| Formato de Conteúdo | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml em desenvolvimento) | ⚠️ .json | ✅ .json, .js |
| Suporte ICU | ⚠️ Em desenvolvimento | ⚠️ Via plugin (i18next-icu) | ✅ Sim |
| Ajuda para SEO (hreflang, sitemap) | ✅ Ferramentas integradas: auxiliares para sitemap, robots.txt, metadados | ⚠️ Plugins da comunidade/manual | ❌ Não faz parte do núcleo |
| Ecossistema / Comunidade | ⚠️ Menor, mas crescendo rápido e reativa | ✅ Maior e madura | ✅ Grande |
| Renderização do lado servidor & Componentes do Servidor | ✅ Sim, otimizado para SSR / Componentes do Servidor React | ⚠️ Suportado a nível de página, mas é necessário passar funções t na árvore de componentes para componentes filhos do servidor | ❌ Não suportado, é necessário passar funções t na árvore de componentes para componentes filhos do servidor |
| Tree-shaking (carregar apenas o conteúdo usado) | ✅ Sim, por componente no momento da build via plugins Babel/SWC | ⚠️ Normalmente carrega tudo (pode ser melhorado com namespaces/divisão de código) | ⚠️ Normalmente carrega tudo |
| Carregamento preguiçoso (Lazy loading) | ✅ Sim, por localidade / por dicionário | ✅ Sim (ex.: backends/namespaces sob demanda) | ✅ Sim (divisão dos pacotes por localidade) |
| Remoção de conteúdo não utilizado | ✅ Sim, por dicionário em tempo de build | ❌ Não, apenas via segmentação manual por namespace | ❌ Não, todas as mensagens declaradas são empacotadas |
| Gestão de Grandes Projetos | ✅ Incentiva modularidade, adequado para sistemas de design | ⚠️ Requer boa disciplina de arquivos | ⚠️ Catálogos centrais podem ficar grandes |
Comparação detalhada
1) Arquitetura e escalabilidade
- react-intl / react-i18next: A maioria das configurações mantém pastas de localidade centralizadas por idioma, às vezes divididas por namespaces (i18next). Funciona bem no início, mas torna-se uma área compartilhada à medida que os aplicativos crescem.
- Intlayer: Promove dicionários por componente (ou por funcionalidade) co-localizados com a interface de usuário que atendem. Isso mantém a propriedade clara, facilita a duplicação/migração de componentes e reduz a rotatividade de chaves entre equipes. Conteúdo não utilizado é mais fácil de identificar e remover.
Por que isso importa: Conteúdo modular reflete uma interface modular. Grandes bases de código React permanecem mais limpas quando as traduções vivem junto com os componentes a que pertencem.
2) TypeScript & segurança
- react-intl: Tipagens sólidas, mas sem tipagem automática de chaves; você mesmo deve aplicar padrões de segurança.
- react-i18next: Tipagens fortes para hooks; tipagem estrita de chaves geralmente requer configuração extra ou geradores.
- Intlayer: Gera automaticamente tipos estritos a partir do seu conteúdo. O autocompletar do IDE e os erros em tempo de compilação capturam erros de digitação e chaves ausentes antes da execução.
Por que isso importa: Mover falhas para a esquerda (para build/CI) reduz problemas em produção e acelera os ciclos de feedback dos desenvolvedores.
3) Tratamento de traduções ausentes
- react-intl / react-i18next: Usam por padrão fallbacks em tempo de execução (eco da chave ou local padrão). Você pode adicionar linting/plugins, mas não é garantido na build.
- Intlayer: Detecção em tempo de build com avisos ou erros quando locais/chaves obrigatórios estão ausentes.
Por que isso importa: Falhas no CI por strings ausentes evitam o vazamento do “inglês misterioso” em interfaces não inglesas.
4) Conteúdo rico e formatação
- react-intl: Excelente suporte ICU para plurais, seleções, datas/números e composição de mensagens. JSX pode ser usado, mas o modelo mental permanece centrado na mensagem.
- react-i18next: Interpolação flexível e
<Trans>para incorporar elementos/componentes; ICU disponível via plugin. - Intlayer: Arquivos de conteúdo podem incluir nós ricos (JSX/Markdown/componentes) e metadados. A formatação usa Intl internamente; padrões de plural são ergonômicos.
Por que isso importa: Textos complexos da interface do usuário (links, partes em negrito, componentes embutidos) são mais fáceis quando a biblioteca aceita nós React de forma limpa.
5) Desempenho e comportamento de carregamento
- react-intl / react-i18next: Normalmente você gerencia divisão de catálogos e carregamento preguiçoso manualmente (namespaces/importações dinâmicas). Eficaz, mas requer disciplina.
- Intlayer: Elimina dicionários não usados e suporta carregamento preguiçoso por dicionário/por localidade nativamente.
Por que isso importa: Pacotes menores e menos strings não utilizadas melhoram o desempenho de inicialização e navegação.
O gráfico abaixo estima o peso do conteúdo para uma aplicação teórica de 1 a 10 páginas traduzida para 1 a 10 idiomas, com cerca de 30 KB de texto por página. Carregar o conteúdo dinamicamente por locale remove o eixo dos idiomas, delimitar o conteúdo por componente ou por rota remove o eixo das páginas, e só a combinação dos dois mantém o peso estável.
Resultados do benchmark no React (TanStack Start / Vite)
Números do Benchmark Bloom, que mede implementações padrão de React no TanStack Start:
Métrica
Carregamento JSON dinâmico
Carrega as traduções tardiamente em tempo de execução
JSON com escopo (namespacing)
Namespaces de tradução por página
O que é essa métrica?
O tamanho total compactado em gzip do pacote da biblioteca de internacionalização. Inclui apenas o provedor e a lógica de recuperação de conteúdo após o tree-shaking e a minificação.
Por que é importante?
Um tamanho de biblioteca menor reduz a carga útil inicial de JavaScript, resultando em tempos de download e execução mais rápidos no cliente.
Ver como
Abrir a tabela em um modal para ver todo o conteúdo claramente
| Library | Strategy | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity | Hydration |
|---|---|---|---|---|---|---|---|---|
| base (no i18n) | - | 0.0 KB | 111.0 KB | 0.0% | 0.0% | 0.7 KB | 8.1 ms | 21.6 ms |
react-i18next | dynamic | 18.4 KB | 136.4 KB | 23.1% | 89.8% | 24.8 KB | 123.1 ms | 32.9 ms |
intlayer | dynamic | 5.0 KB | 118.6 KB | 0.0% | 0.0% | 6.3 KB | 3.6 ms | 14.1 ms |
Tabela completa no relatório de benchmark do TanStack Start e na visão geral dos benchmarks de i18n.
6) DX, ferramentas e manutenção
- react-intl / react-i18next: Ecossistema comunitário amplo; para fluxos editoriais, normalmente você adota plataformas externas de localização.
- Intlayer: Inclui um Editor Visual gratuito e um CMS opcional (mantenha o conteúdo no Git ou externalize-o). Também oferece uma extensão para VSCode para autoria de conteúdo e tradução assistida por IA usando suas próprias chaves de provedor.
Por que isso importa: Ferramentas integradas encurtam o ciclo entre desenvolvedores e autores de conteúdo - menos código de ligação, menos dependências de fornecedores.
Quando escolher qual?
- Escolha react-intl se você quiser formatação de mensagens priorizando ICU com uma API direta e alinhada aos padrões, e sua equipe estiver confortável em manter catálogos e verificações de segurança manualmente.
- Escolha react-i18next se precisar da amplitude do ecossistema do i18next (detectores, backends, plugin ICU, integrações) e aceitar mais configuração para ganhar flexibilidade.
- Escolha Intlayer se você valoriza conteúdo escopado por componente, TypeScript rigoroso, garantias em tempo de build, tree-shaking e ferramentas editoriais com tudo incluído - especialmente para apps React grandes e modulares.
Interoperabilidade com react-intl e react-i18next
intlayer também pode ajudar a gerenciar seus namespaces react-intl e react-i18next.
Usando intlayer, você pode declarar seu conteúdo no formato de sua biblioteca i18n favorita, e o intlayer gerará seus namespaces no local de sua escolha (exemplo: /messages/{{locale}}/{{namespace}}.json).
Leituras adicionais e benchmarks
Relatórios de benchmark:
Estrelas no GitHub
As estrelas no GitHub são um forte indicador da popularidade de um projeto, da confiança da comunidade e da relevância a longo prazo. Embora não sejam uma medida direta da qualidade técnica, refletem quantos desenvolvedores consideram o projeto útil, acompanham seu progresso e provavelmente o adotam. Para estimar o valor de um projeto, as estrelas ajudam a comparar a tração entre alternativas e fornecem insights sobre o crescimento do ecossistema.
Atividade de commits
As estrelas mostram popularidade. Os commits mostram quanto trabalho é investido num projeto. No momento em que este texto foi escrito, o Intlayer soma cerca de 7.500 commits, mais do que a maioria das bibliotecas comparadas aqui e cerca de 5 vezes mais do que next-intl ou next-i18next.
- formatjs/formatjs
- i18next/react-i18next
- aymericzip/intlayer
Commits no branch padrão, fonte: API do GitHub.
O Intlayer é um monorepo, então o total inclui cada pacote de framework, a CLI e a documentação. Leia os commits como um sinal de atividade, não de qualidade.
Downloads no npm
- react-i18next
- react-intl
- react-intlayer
Fonte: API de downloads do registro npm.
Os downloads recompensam as soluções mais antigas, não as melhores. Uma biblioteca lançada há anos continua sendo instalada por cada projeto que a escolheu na época, por cada execução de CI e por cada pacote que depende dela. O número mede a inércia mais do que uma escolha atual.
Os assistentes de IA amplificam o efeito. next-intl, i18next e vue-i18n estão por toda parte no código com que foram treinados, então eles os sugerem por padrão, sem comparar as alternativas. Cada sugestão gera downloads, que alimentam a próxima sugestão. Compare pelo benchmark, não pelo número de downloads.
Conclusão
Todas as três bibliotecas localizam o React de forma eficaz. O diferencial é quanto de infraestrutura você precisa construir para alcançar uma configuração segura e escalável:
- Com o Intlayer, conteúdo modular, tipagem TS rigorosa, segurança em tempo de compilação, pacotes otimizados por tree-shaking e ferramentas editoriais são padrões - não tarefas.
- Se sua equipe valoriza manutenibilidade e velocidade em aplicativos React multi-idioma e orientados a componentes, o Intlayer oferece o fluxo de trabalho para desenvolvedores e conteúdo mais completo atualmente.
Consulte a documentação 'Por que Intlayer?' para mais detalhes.
Comentários
Ainda sem comentários. Seja o primeiro a compartilhar seus pensamentos.