@intlayer/docs 5.7.8 → 5.8.0

package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md

@@ -1,14 +1,14 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-06-29
-title: react-i18n vs react-intl vs Intlayer
-description: Integre o react-i18next com o next-intl e Intlayer para a internacionalização (i18n) de um aplicativo React
+title: react-i18next vs react-intl vs Intlayer
+description: Integre react-i18next com next-intl e Intlayer para a internacionalização (i18n) de uma aplicação React
 keywords:
   - next-intl
   - react-i18next
   - Intlayer
   - Internacionalização
-  - Blogumentação
+  - Blog
   - Next.js
   - JavaScript
   - React
@@ -17,178 +17,137 @@ slugs:
   - react-i18next-vs-react-intl-vs-intlayer
 ---
 
-# React-Intl VS React-i18next VS Intlayer | React Internationalization (i18n)
+# react-Intl VS react-i18next VS intlayer | Internacionalização (i18n) em React
 
-Abaixo está uma comparação concisa de três bibliotecas populares de i18n (internacionalização) para React: **React-Intl**, **React-i18next** e **Intlayer**. Cada biblioteca oferece recursos e fluxos de trabalho exclusivos para integrar suporte multilíngue em sua aplicação React. Após ler isso, você deve ser capaz de decidir qual solução atende melhor às suas necessidades.
+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.
 
----
-
-## 1. Introdução
-
-A internacionalização (i18n) em aplicações React pode ser alcançada de várias maneiras. As três bibliotecas apresentadas aqui têm diferentes filosofias de design, conjuntos de recursos e suporte da comunidade:
+Nós avaliamos:
 
-1. **React-Intl**
-2. **React-i18next**
-3. **Intlayer**
+- 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)
 
-Abaixo, você encontrará uma visão geral de cada solução, seguida de uma comparação de recursos, prós e contras, e exemplos de casos de uso.
+> **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.
 
 ---
 
-## 2. React-Intl
-
-### Visão Geral
-
-[**React-Intl**](https://formatjs.io/docs/react-intl/) é parte da [FormatJS](https://formatjs.io/) suite. Ele fornece um conjunto poderoso de **APIs e componentes** para lidar com formatação de mensagens, pluralização, data/hora e formatação de números. O React-Intl é amplamente utilizado em aplicações corporativas, principalmente porque faz parte de um ecossistema que padroniza a sintaxe e a formatação das mensagens.
-
-### Principais Recursos
-
-- **Sintaxe de Mensagem ICU**: Oferece uma sintaxe abrangente para interpolação de mensagens, pluralização e muito mais.
-- **Formatação Localizada**: Utilitários embutidos para formatar datas, horas, números e tempos relativos com base na localidade.
-- **Componentes Declarativos**: Expõe `<FormattedMessage>`, `<FormattedNumber>`, `<FormattedDate>`, etc., para uso sem costura em JSX.
-- **Ecossistema Rico**: Integra-se bem com as ferramentas FormatJS (por exemplo, [babel-plugin-react-intl](https://formatjs.io/docs/tooling/babel-plugin/) para extrair, gerenciar e compilar mensagens.
-
-### Fluxo de Trabalho Típico
-
-1. **Defina catálogos de mensagens** (geralmente arquivos JSON por localidade).
-2. **Envolva seu aplicativo** em `<IntlProvider locale="pt" messages={messages}>`.
-3. **Use** `<FormattedMessage id="myMessage" defaultMessage="Hello world" />` ou o hook `useIntl()` para acessar strings de tradução.
-
-### Prós
-
-- Bem estabelecido e usado em muitos ambientes de produção.
-- Formatação avançada de mensagens, incluindo pluralização, gênero, fusos horários e mais.
-- Forte suporte de ferramentas para extração e compilação de mensagens.
-
-### Contras
+## Posicionamento de alto nível
 
-- Requer familiaridade com o **formato de mensagem ICU**, que pode ser verboso.
-- Não é tão simples lidar com traduções dinâmicas ou complexas que são mais do que apenas baseadas em strings.
+- **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.
 
 ---
 
-## 3. React-i18next
+## Matriz de funcionalidades (foco em React)
+
+| 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                                                                    |
 
-### Visão Geral
-
-[**React-i18next**](https://react.i18next.com/) é uma extensão React de [i18next](https://www.i18next.com/), um dos frameworks de i18n JavaScript mais populares. Ele oferece **recursos extensos** para traduções em tempo de execução, carregamento preguiçoso e detecção de idioma, tornando-o extremamente flexível para uma ampla variedade de casos de uso.
-
-### Principais Recursos
-
-- **Estrutura de Tradução Flexível**: Não está atada a um único formato como ICU. Você pode armazenar traduções em JSON, usar interpolação, pluralização, etc.
-- **Alternância de Idioma Dinâmica**: Plugins de detector de idioma incorporados e atualizações em tempo de execução.
-- **Traduções Aninhadas e Estruturadas**: Você pode aninhar traduções facilmente dentro de JSON.
-- **Ecossistema de Plugins Extensivo**: Para detecção (navegador, caminho, subdomínio, etc.), carregamento de recursos, cache e mais.
-
-### Fluxo de Trabalho Típico
-
-1. **Instale `i18next` e `react-i18next`.**
-2. **Configure i18n** para carregar traduções (JSON) e configurar detecção de idioma ou fallback.
-3. **Envolva seu aplicativo** em `I18nextProvider`.
-4. **Use o hook `useTranslation()`** ou o componente `<Trans>` para exibir traduções.
+---
 
-### Prós
+## Comparação detalhada
 
-- **Altamente flexível** e rico em recursos.
-- Comunidade muito ativa e grande ecossistema de plugins.
-- Facilidade de **carregamento dinâmico** de traduções (por exemplo, de um servidor, sob demanda).
+### 1) Arquitetura e escalabilidade
 
-### Contras
+- **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.
 
-- **A configuração pode ser verbosa**, especialmente se você tiver necessidades mais avançadas.
-- Se você prefere traduções fortemente tipadas, pode precisar de configurações adicionais do TypeScript.
+**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.
 
 ---
 
-## 4. Intlayer
+### 2) TypeScript & segurança
 
-### Visão Geral
+- **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.
 
-[**Intlayer**](https://github.com/aymericzip/intlayer) é uma biblioteca de i18n open-source mais nova, focada em **declarações de conteúdo em nível de componente**, segurança de tipo e **roteamento dinâmico**. É projetada para fluxos de trabalho modernos do React, suportando tanto **Create React App** quanto configurações de **Vite**. Também inclui recursos avançados como **roteamento baseado em localidade** e **tipos TypeScript gerados automaticamente** para traduções.
+**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.
 
-### Principais Recursos
+---
 
-- **Arquivos de Conteúdo Declarativos**: Cada componente ou módulo pode declarar suas traduções em arquivos dedicados `.content.tsx` ou `.content.json`, mantendo o conteúdo próximo de onde é usado.
-- **Roteamento & Middleware Incorporados**: Módulos opcionais para roteamento localizado (por exemplo, `/pt/sobre`, `/fr/about`) e middleware do servidor para detectar a localidade do usuário.
-- **Tipos TypeScript Gerados Automaticamente**: Garante segurança de tipo com recursos como autocompletar e detecção de erros em tempo de compilação.
-- **Traduções Dinâmicas e Ricas**: Podem incluir JSX/TSX em traduções para casos de uso mais complexos (por exemplo, links, texto em negrito, ícones em traduções).
+### 3) Tratamento de traduções ausentes
 
-### Fluxo de Trabalho Típico
+- **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.
 
-1. **Instale `intlayer` e `react-intlayer`.**
-2. **Crie `intlayer.config.ts`** para definir localidades disponíveis e a localidade padrão.
-3. **Use a CLI do Intlayer** ou o plugin para **transpilar** declarações de conteúdo.
-4. **Envolva seu aplicativo** em `<IntlayerProvider>` e recupere o conteúdo com `useIntlayer("keyName")`.
+**Por que isso importa:** Falhas no CI por strings ausentes evitam o vazamento do “inglês misterioso” em interfaces não inglesas.
 
-### Prós
+---
 
-- **Amigável ao TypeScript** com geração de tipos integrada e verificação de erros.
-- **Conteúdo rico** possível (por exemplo, passando nós React como traduções).
-- **Roteamento Localizado** pronto para uso.
-- Integrado com ferramentas de build populares (CRA, Vite) para configuração fácil.
+### 4) Conteúdo rico e formatação
 
-### Contras
+- **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.
 
-- Ainda **relativamente novo** em comparação com React-Intl ou React-i18next.
-- Foco maior em uma abordagem de “declaração de conteúdo em nível de componente”, pode ser uma mudança em relação aos catálogos típicos em .json.
-- Ecossistema e comunidade menores em comparação com as bibliotecas mais estabelecidas.
+**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. Comparação de Recursos
+### 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.
 
-| **Recurso**                   | **React-Intl**                                                                   | **React-i18next**                                                                                                    | **Intlayer**                                                                                                                                |
-| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Caso de Uso Principal**     | Traduções baseadas em string, formatação de data/número, sintaxe de mensagem ICU | i18n completo com fácil troca dinâmica, aninhamento, ecossistema de plugins                                          | Traduções seguras em tipos com foco em conteúdo declarativo, roteamento localizado e middleware opcional de servidor                        |
-| ** abordagem **               | Utilize `<IntlProvider>` & componentes de mensagem FormatJS                      | Utilize `I18nextProvider` & hook `useTranslation()`                                                                  | Utilize `<IntlayerProvider>` & hook `useIntlayer()` com declarações de conteúdo                                                             |
-| **Formato de Localização**    | Strings baseadas em ICU (catálogos JSON ou JavaScript)                           | Arquivos de recurso JSON (ou carregadores personalizados). Formato ICU opcional via plugin i18next                   | Declarações em `.content.[ts/js/tsx]` ou JSON; podem conter strings ou componentes React                                                    |
-| **Roteamento**                | Tratado externamente (sem roteamento localizado embutido)                        | Tratado externamente com plugins i18next (detecção de caminho, subdomínio, etc.)                                     | Suporte embutido para roteamento localizado (por exemplo, `/pt/sobre`, `/fr/about`), além de middleware opcional (para SSR/Vite)            |
-| **Suporte ao TypeScript**     | Bom (tipagens para pacotes oficiais)                                             | Bom, mas configuração extra para traduções tipadas se você quiser verificação rigorosa                               | Excelente (definições de tipo geradas automaticamente para chaves de conteúdo e traduções)                                                  |
-| **Pluralização & Formatação** | Avançado: formatação de data/hora/número incorporada, suporte a plural/gênero    | Pluralização configurável. A formatação de data/hora é normalmente feita por meio de libs externas ou plugin i18next | Pode depender de JavaScript Intl padrão ou embutir lógica no conteúdo. Não tão especializado quanto o FormatJS, mas lida com casos típicos. |
-| **Comunidade & Ecossistema**  | Grande, parte do ecossistema FormatJS                                            | Muito grande, altamente ativo, muitos plugins (detecção, caching, frameworks)                                        | Menor, mas crescente; abordagem moderna, open-source                                                                                        |
-| **Curva de Aprendizado**      | Moderada (aprendendo a sintaxe de mensagem ICU, convenções do FormatJS)          | Baixa a moderada (uso direto, mas configuração avançada pode se tornar verbosa)                                      | Moderada (conceito de declarações de conteúdo e etapas de build especializadas)                                                             |
+**Por que isso importa:** Pacotes menores e menos strings não utilizadas melhoram o desempenho de inicialização e navegação.
 
 ---
 
-## 6. Quando Escolher Cada Um
+### 6) DX, ferramentas e manutenção
 
-1. **React-Intl**
+- **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.
 
-   - Você precisa de **formatação poderosa** para datas/horas/números e de forte **sintaxe de mensagem ICU**.
-   - Você prefere uma abordagem mais “**baseada em padrões**” para traduções.
-   - Você não requer roteamento localizado ou chaves de tradução fortemente tipadas.
+**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.
 
-2. **React-i18next**
+---
 
-   - Você precisa de uma solução **flexível, estabelecida** com carregamento **dinâmico** e **sob demanda** de traduções.
-   - Você deseja detecção de idioma **baseada em plugins** (por exemplo, a partir de URL, cookies, armazenamento local) ou cache avançado.
-   - Você precisa do maior ecossistema, com muitas integrações existentes para vários frameworks (Next.js, React Native, etc.).
+## Quando escolher qual?
 
-3. **Intlayer**
-   - Você deseja uma forte integração com TypeScript com _tipos gerados automaticamente_, garantindo que você raramente perca uma chave de tradução.
-   - Você prefere **conteúdo declarativo** próximo do componente, possivelmente incluindo nós React ou lógica avançada em traduções.
-   - Você requer **roteamento localizado embutido** ou deseja facilmente incorporá-lo em sua configuração de SSR ou Vite.
-   - Você deseja uma abordagem moderna ou simplesmente quer uma única biblioteca que cubra tanto a **gestão de conteúdo** (i18n) quanto o **roteamento** de forma segura.
+- **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**.
 
 ---
 
-## 7. Conclusão
-
-Cada biblioteca oferece uma solução robusta para internacionalizar uma aplicação React:
-
-- **React-Intl** é excelente em formatação de mensagens e é uma escolha popular para soluções empresariais focadas na sintaxe de mensagem ICU.
-- **React-i18next** fornece um ambiente altamente flexível, impulsionado por plugins para necessidades avançadas ou dinâmicas de i18n.
-- **Intlayer** oferece uma abordagem **moderna e fortemente tipada** que une declarações de conteúdo, roteamento localizado avançado e integrações baseadas em plugins (CRA, Vite).
+## Notas práticas de migração (react-intl / react-i18next → Intlayer)
 
-Sua escolha depende em grande parte dos requisitos do projeto, da experiência desejada do desenvolvedor (DX) e da importância de traduções tipadas ou roteamento avançado. Se você valoriza o roteamento localizado embutido e a integração com TypeScript, **Intlayer** pode ser a mais atraente. Se você deseja uma solução robusta e rica em ecossistemas, **React-i18next** é uma ótima escolha. Para necessidades de formatação baseadas em ICU mais diretas, **React-Intl** é uma opção confiável.
+- **Migre de forma incremental**: Comece com uma funcionalidade ou rota; mantenha os catálogos legados em paralelo durante a transição.
+- **Adote dicionários por componente**: Coloque o conteúdo junto aos componentes para reduzir o acoplamento.
+- **Habilite verificações rigorosas**: Permita que erros em tempo de build revelem chaves/locais faltantes cedo no CI.
+- **Meça os bundles**: Espere reduções conforme strings não usadas forem eliminadas.
 
 ---
 
-### Leitura Adicional
+## Conclusão
 
-- [Documentação do React-Intl](https://formatjs.io/docs/react-intl/)
-- [Documentação do React-i18next](https://react.i18next.com/)
-- [Intlayer + Guia de Introdução ao CRA](#) (do seu doc)
-- [Intlayer + Guia de Introdução ao Vite & React](#) (do seu doc)
+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**:
 
-Sinta-se à vontade para misturar e combinar abordagens para atender às suas necessidades, não há uma “solução única para todos”, e cada biblioteca continua a evoluir para abordar novos casos de uso no ecossistema React.
+- 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.

package/blog/pt/vue-i18n_vs_intlayer.md

@@ -0,0 +1,268 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-08-23
+title: vue-i18n vs Intlayer
+description: Comparação entre vue-i18n e Intlayer para internacionalização (i18n) em apps Vue/Nuxt
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internacionalização
+  - i18n
+  - Blog
+  - Vue
+  - Nuxt
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer
+---
+
+# vue-i18n VS Intlayer | Internacionalização (i18n) em Vue
+
+Este guia compara duas opções populares de i18n para **Vue 3** (e **Nuxt**): **vue-i18n** e **Intlayer**.
+Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
+
+1. **Arquitetura & organização de conteúdo**
+2. **TypeScript & segurança**
+3. **Tratamento de traduções faltantes**
+4. **Roteamento & estratégia de URL**
+5. **Performance & comportamento de carregamento**
+6. **Experiência do desenvolvedor (DX), ferramentas & manutenção**
+7. **SEO & escalabilidade para grandes projetos**
+
+> **resumo**: Ambos podem localizar apps Vue. Se você deseja **conteúdo com escopo de componente**, **tipos TypeScript rigorosos**, **verificações de chaves faltantes em tempo de build**, **dicionários otimizados por tree-shaking**, e **helpers integrados para roteamento/SEO** além de **Editor Visual & traduções com IA**, **Intlayer** é a escolha mais completa e moderna.
+
+---
+
+## Posicionamento em alto nível
+
+- **vue-i18n** - A biblioteca i18n padrão para Vue. Formatação flexível de mensagens (estilo ICU), blocos SFC `<i18n>` para mensagens locais, e um grande ecossistema. Segurança e manutenção em larga escala ficam principalmente por sua conta.
+- **Intlayer** - Modelo de conteúdo centrado em componentes para Vue/Vite/Nuxt com **tipagem TS rigorosa**, **verificações em tempo de build**, **tree-shaking**, **helpers para roteador e SEO**, **Editor Visual/CMS** opcional e **traduções assistidas por IA**.
+
+---
+
+## Comparação de Recursos Lado a Lado (focada em Vue)
+
+| Recurso                                            | **Intlayer**                                                                          | **vue-i18n**                                                                                 |
+| -------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| **Traduções próximas aos componentes**             | ✅ Sim, conteúdo colocalizado por componente (ex.: `MyComp.content.ts`)               | ✅ Sim, via blocos SFC `<i18n>` (opcional)                                                   |
+| **Integração com TypeScript**                      | ✅ Avançada, tipos **estritos** gerados automaticamente e autocompletar de chaves     | ✅ Boas tipagens; **segurança estrita de chaves requer configuração/disciplinas adicionais** |
+| **Detecção de tradução ausente**                   | ✅ Avisos/erros em **tempo de build** e exposição no TS                               | ⚠️ Fallbacks/avisos em tempo de execução                                                     |
+| **Conteúdo rico (componentes/Markdown)**           | ✅ Suporte direto para nós ricos e arquivos de conteúdo Markdown                      | ⚠️ Limitado (componentes via `<i18n-t>`, Markdown via plugins externos)                      |
+| **Tradução com IA**                                | ✅ Fluxos de trabalho integrados usando suas próprias chaves de provedores de IA      | ❌ Não integrado                                                                             |
+| **Editor Visual / CMS**                            | ✅ Editor Visual gratuito e CMS opcional                                              | ❌ Não integrado (use plataformas externas)                                                  |
+| **Roteamento localizado**                          | ✅ Auxiliares para Vue Router/Nuxt para gerar caminhos localizados, URLs e `hreflang` | ⚠️ Não é parte do núcleo (use Nuxt i18n ou configuração personalizada do Vue Router)         |
+| **Geração dinâmica de rotas**                      | ✅ Sim                                                                                | ❌ Não fornecido (Nuxt i18n fornece)                                                         |
+| **Pluralização e formatação**                      | ✅ Padrões de enumeração; formatadores baseados em Intl                               | ✅ Mensagens no estilo ICU; formatadores Intl                                                |
+| **Formatos de conteúdo**                           | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML em desenvolvimento)                     | ✅ `.json`, `.js` (além de blocos SFC `<i18n>`)                                              |
+| **Suporte ICU**                                    | ⚠️ Em desenvolvimento                                                                 | ✅ Sim                                                                                       |
+| **Auxiliares de SEO (sitemap, robots, metadados)** | ✅ Auxiliares integrados (independente de framework)                                  | ❌ Não faz parte do núcleo (Nuxt i18n/comunidade)                                            |
+| **SSR/SSG**                                        | ✅ Funciona com Vue SSR e Nuxt; não bloqueia a renderização estática                  | ✅ Funciona com Vue SSR/Nuxt                                                                 |
+| **Tree-shaking (enviar apenas o conteúdo usado)**  | ✅ Por componente em tempo de build                                                   | ⚠️ Parcial; requer divisão manual de código/mensagens assíncronas                            |
+| **Carregamento preguiçoso (Lazy loading)**         | ✅ Por localidade / por dicionário                                                    | ✅ Suporte a mensagens de localidade assíncronas                                             |
+| **Purgar conteúdo não utilizado**                  | ✅ Sim (em tempo de build)                                                            | ❌ Não incorporado                                                                           |
+| **Manutenção em projetos grandes**                 | ✅ Incentiva estrutura modular, amigável a design systems                             | ✅ Possível, mas requer disciplina rigorosa de arquivos/namespace                            |
+| **Ecossistema / comunidade**                       | ⚠️ Menor, mas crescendo rapidamente                                                   | ✅ Grande e madura no ecossistema Vue                                                        |
+
+---
+
+## Comparação detalhada
+
+### 1) Arquitetura e escalabilidade
+
+- **vue-i18n**: Configurações comuns usam **catálogos centralizados** por localidade (opcionalmente divididos em arquivos/namespace). Blocos SFC `<i18n>` permitem mensagens locais, mas as equipes frequentemente retornam a catálogos compartilhados conforme os projetos crescem.
+- **Intlayer**: Promove **dicionários por componente** armazenados ao lado do componente que atendem. Isso reduz conflitos entre equipes, mantém o conteúdo descobrível e limita naturalmente a deriva/chaves não utilizadas.
+
+**Por que isso importa:** Em grandes aplicativos Vue ou sistemas de design, **conteúdo modular** escala melhor do que catálogos monolíticos.
+
+---
+
+### 2) TypeScript & segurança
+
+- **vue-i18n**: Bom suporte a TS; **tipagem estrita de chaves** normalmente requer esquemas/genéricos personalizados e convenções cuidadosas.
+- **Intlayer**: **Gera tipos estritos** a partir do seu conteúdo, oferecendo **autocompletar no IDE** e **erros em tempo de compilação** para erros de digitação/chaves ausentes.
+
+**Por que isso importa:** Tipagem forte detecta problemas **antes** da execução.
+
+---
+
+### 3) Tratamento de traduções ausentes
+
+- **vue-i18n**: Avisos/falhas em **tempo de execução** (ex.: fallback para localidade ou chave).
+- **Intlayer**: Detecção em **tempo de build** com avisos/erros entre localidades e chaves.
+
+**Por que isso importa:** Aplicação em tempo de build mantém a interface de produção limpa e consistente.
+
+---
+
+### 4) Estratégia de roteamento e URLs (Vue Router/Nuxt)
+
+- **Ambos** podem funcionar com rotas localizadas.
+- **Intlayer** fornece auxiliares para **gerar caminhos localizados**, **gerenciar prefixos de localidade** e emitir **`<link rel="alternate" hreflang>`** para SEO. Com Nuxt, complementa o roteamento do framework.
+
+**Por que isso importa:** Menos camadas personalizadas e **SEO mais limpo** entre localidades.
+
+---
+
+### 5) Desempenho e comportamento de carregamento
+
+- **vue-i18n**: Suporta mensagens de localidade assíncronas; evitar sobrecarregamento é sua responsabilidade (divida os catálogos com cuidado).
+- **Intlayer**: **Elimina código morto** na build e **carrega preguiçosamente por dicionário/localidade**. Conteúdo não utilizado não é enviado.
+
+**Por que isso importa:** Pacotes menores e inicialização mais rápida para apps Vue multilíngues.
+
+---
+
+### 6) Experiência do desenvolvedor e ferramentas
+
+- **vue-i18n**: Documentação madura e comunidade consolidada; normalmente você dependerá de **plataformas externas de localização** para fluxos editoriais.
+- **Intlayer**: Oferece um **Editor Visual gratuito**, **CMS** opcional (compatível com Git ou externalizado), uma **extensão para VSCode**, utilitários **CLI/CI** e **traduções assistidas por IA** usando suas próprias chaves de provedor.
+
+**Por que isso importa:** Menor custo operacional e um ciclo de desenvolvimento–conteúdo mais curto.
+
+---
+
+### 7) SEO, SSR & SSG
+
+- **Ambos** funcionam com Vue SSR e Nuxt.
+- **Intlayer**: Adiciona **auxiliares de SEO** (sitemaps/metadados/`hreflang`) que são independentes de framework e funcionam bem com builds Vue/Nuxt.
+
+**Por que isso importa:** SEO internacional sem configurações personalizadas complexas.
+
+---
+
+## Por que Intlayer? (Problema & abordagem)
+
+A maioria das pilhas i18n (incluindo **vue-i18n**) começa a partir de **catálogos centralizados**:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Ou com pastas por localidade:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Isso frequentemente desacelera o desenvolvimento conforme os apps crescem:
+
+1. **Para um novo componente** você cria/edita catálogos remotos, conecta namespaces e traduz (frequentemente via copiar/colar manual de ferramentas de IA).
+2. **Ao modificar componentes** você procura chaves compartilhadas, traduz, mantém as localidades sincronizadas, remove chaves obsoletas e alinha as estruturas JSON.
+
+**Intlayer** delimita o conteúdo **por componente** e mantém-no **junto ao código**, como já fazemos com CSS, histórias, testes e documentação:
+
+```bash
+.
+└── components
+    └── MyComponent
+        ├── MyComponent.content.ts
+        └── MyComponent.vue
+```
+
+**Declaração de conteúdo** (por componente):
+
+```ts fileName="./components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    greeting: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+**Uso no Vue** (Composition API):
+
+```vue fileName="./components/MyComponent/MyComponent.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer"; // Integração Vue
+const { greeting } = useIntlayer("component-example");
+</script>
+
+<template>
+  <span>{{ greeting }}</span>
+</template>
+```
+
+Esta abordagem:
+
+- **Acelera o desenvolvimento** (declare uma vez; IDE/IA completa automaticamente).
+- **Limpa a base de código** (1 componente = 1 dicionário).
+- **Facilita duplicação/migração** (copie um componente e seu conteúdo juntos).
+- **Evita chaves mortas** (componentes não usados não importam conteúdo).
+- **Otimiza o carregamento** (componentes carregados sob demanda trazem seu conteúdo junto).
+
+---
+
+## Funcionalidades adicionais do Intlayer (relevantes para Vue)
+
+- **Suporte multiplataforma**: Funciona com Vue, Nuxt, Vite, React, Express e mais.
+- **Gerenciamento de conteúdo baseado em JavaScript**: Declare no código com total flexibilidade.
+- **Arquivo de declaração por localidade**: Defina todas as localidades e deixe as ferramentas gerarem o restante.
+- **Ambiente com tipagem segura**: Configuração forte de TS com autocompletar.
+- **Recuperação simplificada de conteúdo**: Um único hook/composable para buscar todo o conteúdo de um dicionário.
+- **Base de código organizada**: 1 componente = 1 dicionário na mesma pasta.
+- **Roteamento aprimorado**: Auxiliares para caminhos e metadados localizados do **Vue Router/Nuxt**.
+- **Suporte a Markdown**: Importe Markdown remoto/local por localidade; exponha frontmatter para o código.
+- **Editor Visual gratuito e CMS opcional**: Criação de conteúdo sem plataforma de localização paga; sincronização amigável ao Git.
+- **Conteúdo tree-shakable**: Envia apenas o que é usado; suporta carregamento preguiçoso.
+- **Compatível com renderização estática**: Não bloqueia SSG.
+- **Traduções com IA**: Traduza para 231 idiomas usando seu próprio provedor de IA/chave de API.
+- **Servidor MCP & extensão VSCode**: Automatize fluxos de trabalho i18n e autoria dentro do seu IDE.
+- **Interoperabilidade**: Integrações com **vue-i18n**, **react-i18next** e **react-intl** quando necessário.
+
+---
+
+## Quando escolher qual?
+
+- **Escolha vue-i18n** se você quiser a **abordagem padrão do Vue**, estiver confortável gerenciando catálogos/namespace por conta própria, e seu app for **pequeno a médio porte** (ou já depender do Nuxt i18n).
+- **Escolha Intlayer** se você valoriza **conteúdo escopado por componente**, **TypeScript rigoroso**, **garantias em tempo de build**, **tree-shaking**, e ferramentas completas para roteamento/SEO/editor - especialmente para **códigos Vue/Nuxt grandes e modulares**.
+
+---
+
+## Notas práticas de migração (vue-i18n → Intlayer)
+
+- **Comece por funcionalidade**: Mova uma rota/visualização/componente de cada vez para os dicionários locais do Intlayer.
+- **Ponte durante a migração**: Mantenha os catálogos vue-i18n em paralelo; substitua as consultas gradualmente.
+- **Ative verificações rigorosas**: Permita que a detecção em tempo de compilação identifique cedo chaves/locais ausentes.
+- **Adote auxiliares de roteador/SEO**: Padronize a detecção de localidade e as tags `hreflang`.
+- **Meça os pacotes**: Espere **reduções no tamanho dos pacotes** à medida que o conteúdo não utilizado é excluído.
+
+---
+
+## Conclusão
+
+Tanto o **vue-i18n** quanto o **Intlayer** localizam bem aplicações Vue. A diferença está em **quanto você precisa construir por conta própria** para alcançar uma configuração robusta e escalável:
+
+- Com **Intlayer**, **conteúdo modular**, **TS rigoroso**, **segurança em tempo de build**, **bundles otimizados por tree-shaking** e **ferramentas para router/SEO/editor** vêm **prontos para usar**.
+- Se sua equipe prioriza **manutenibilidade e velocidade** em um app Vue/Nuxt multi-local, orientado a componentes, o Intlayer oferece a experiência **mais completa** atualmente.
+
+Consulte o documento ['Por que Intlayer?'](https://intlayer.org/doc/why) para mais detalhes.

package/blog/ru/intlayer_with_next-i18next.md

@@ -1,6 +1,6 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: Intlayer и next-i18next
 description: Интегрируйте Intlayer с next-i18next для приложения Next.js
 keywords:
@@ -24,7 +24,6 @@ slugs:
 Обе решения включают три основных понятия:
 
 1. **Декларация контента**: Метод определения переводимого контента вашего приложения.
-
    - Называемый `resource` в случае `i18next`, декларация контента - это структурированный объект JSON, содержащий пары ключ-значение для переводов на одном или нескольких языках. Смотрите [документацию i18next](https://www.i18next.com/translation-function/essentials) для получения дополнительной информации.
    - Называемый `content declaration file` в случае `Intlayer`, декларация контента может быть JSON, JS или TS файлом, экспортирующим структурированные данные. Смотрите [документацию Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/doc/concept/content) для получения дополнительной информации.
 
@@ -213,8 +212,8 @@ const content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -231,8 +230,8 @@ const content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -246,8 +245,8 @@ module.exports = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };