@intlayer/docs 9.5.2 → 9.5.4-canary.0

package/blog/pt/i18next_vs_intlayer.md

@@ -0,0 +1,445 @@
+---
+createdAt: 2026-09-13
+updatedAt: 2026-09-13
+title: "i18next vs Intlayer: Benchmark e Comparativo 2026"
+description: "react-i18next e next-i18next medidos contra o Intlayer no Next.js e TanStack Start. Tamanho do bundle, vazamento de conteúdo, reatividade na troca de idioma e experiência de desenvolvimento."
+keywords:
+  - i18next
+  - react-i18next
+  - next-i18next
+  - Intlayer
+  - Internacionalização
+  - i18n
+  - Benchmark
+  - Tamanho do bundle
+  - Blog
+  - Next.js
+  - TanStack Start
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - i18next-vs-intlayer
+author: aymericzip
+---
+
+# i18next VS Intlayer | Benchmark de internacionalização (i18n) para React e Next.js
+
+O `i18next` é o framework de i18n mais utilizado no ecossistema JavaScript. Através do `react-i18next` e `next-i18next`, sustenta grande parte das aplicações React e Next.js. O Intlayer é uma alternativa baseada em compilador, com escopo por componente.
+
+Este artigo compara ambas as soluções com base em medições reais e não em listas de recursos. Os números vêm do [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), uma suíte de código aberto que constrói a mesma aplicação com cada biblioteca e registra o que o navegador realmente baixa.
+
+<TOC/>
+
+> **tl;dr**: O `i18next` é o runtime mais pesado do benchmark: **+77 KB gzip por página** no Next.js na configuração padrão (naive), **+22 KB** após otimização completa de namespaces + lazy loading. O Intlayer adiciona apenas **+0.3 KB**. Todas as configurações do `i18next`, exceto a totalmente isolada (scoped), enviam **~90% de strings de outras páginas**; o Intlayer envia **0%** por padrão. A troca de idioma com backend carregado sob demanda levou **123-185 ms** com o `react-i18next` contra **3-4 ms** com o Intlayer. O adaptador `@intlayer/next-i18next` mantém a API do `i18next` e atingiu **150.7 KB** por página contra **218.5 KB** do original.
+
+## Em resumo
+
+- **i18next / react-i18next / next-i18next** - Maduro, com ecossistema rico de plugins e agnóstico de framework. Namespaces, detectores de idioma, backends, ICU via plugin, `<Trans>` para conteúdo rico. Conteúdo centralizado em `locales/{lng}/{ns}.json`. Poderoso, mas cada otimização (divisão de namespaces, carregamento por página, segurança de tipos) exige configurações manuais contínuas.
+- **Intlayer** - Modelo de conteúdo centrado em componentes. Dicionários `.content.ts` ficam ao lado do componente que atendem, um compilador em tempo de build aplica tree-shaking e lazy loading por componente e por idioma, tipos TypeScript estritos são gerados a partir do seu conteúdo e traduções ausentes quebram o build. Oferece middleware, utilitários de SEO, Editor Visual / CMS e tradução assistida por IA.
+
+| Biblioteca              | Estrelas no GitHub                                                                                                                                                                 | Commits Totais                                                                                                                                                                         | Último Commit                                                                                                                                           | Primeira Versão  | Versão no NPM                                                                                                         | Downloads no NPM                                                                                                                 |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `aymericzip/intlayer`   | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers)     | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)     | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)     | Abril de 2024    | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)           | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)           |
+| `i18next/i18next`       | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/i18next?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/i18next/i18next/stargazers)             | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=for-the-badge&label=commits)](https://github.com/i18next/i18next/commits)             | [![Last Commit](https://img.shields.io/github/last-commit/i18next/i18next?style=for-the-badge)](https://github.com/i18next/i18next/commits)             | Janeiro de 2012  | [![npm](https://img.shields.io/npm/v/i18next?style=for-the-badge)](https://www.npmjs.com/package/i18next)             | [![npm downloads](https://img.shields.io/npm/dm/i18next?style=for-the-badge)](https://www.npmjs.com/package/i18next)             |
+| `i18next/react-i18next` | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/react-i18next?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/i18next/react-i18next/stargazers) | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/react-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/react-i18next/commits) | [![Last Commit](https://img.shields.io/github/last-commit/i18next/react-i18next?style=for-the-badge)](https://github.com/i18next/react-i18next/commits) | Dezembro de 2015 | [![npm](https://img.shields.io/npm/v/react-i18next?style=for-the-badge)](https://www.npmjs.com/package/react-i18next) | [![npm downloads](https://img.shields.io/npm/dm/react-i18next?style=for-the-badge)](https://www.npmjs.com/package/react-i18next) |
+| `i18next/next-i18next`  | [![GitHub Repo stars](https://img.shields.io/github/stars/i18next/next-i18next?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/i18next/next-i18next/stargazers)   | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/next-i18next/commits)   | [![Last Commit](https://img.shields.io/github/last-commit/i18next/next-i18next?style=for-the-badge)](https://github.com/i18next/next-i18next/commits)   | Novembro de 2018 | [![npm](https://img.shields.io/npm/v/next-i18next?style=for-the-badge)](https://www.npmjs.com/package/next-i18next)   | [![npm downloads](https://img.shields.io/npm/dm/next-i18next?style=for-the-badge)](https://www.npmjs.com/package/next-i18next)   |
+
+> Os badges são atualizados automaticamente. As capturas variam ao longo do tempo.
+
+## Comparativo direto de recursos
+
+| Recurso                                      | Intlayer (`react-intlayer` / `next-intlayer`)                                      | i18next (`react-i18next` / `next-i18next`)                                      |
+| -------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| **Traduções próximas aos componentes**       | ✅ Sim, `.content.ts` junto a cada componente                                      | ❌ Não, pastas centralizadas `locales/{lng}/{ns}.json`                          |
+| **Integração com TypeScript**                | ✅ Tipos estritos gerados automaticamente do conteúdo                              | ⚠️ Básico; chaves estritas exigem ampliação de `CustomTypeOptions` e tipagem    |
+| **Detecção de traduções ausentes**           | ✅ Erro TypeScript + erro/aviso no momento do build                                | ⚠️ Fallback em runtime (`saveMissing`, eco de chave)                            |
+| **Conteúdo rico (JSX / Markdown)**           | ✅ Suporte nativo                                                                  | ⚠️ `<Trans>` com placeholders indexados                                         |
+| **Suporte ICU**                              | ⚠️ Em andamento                                                                    | ⚠️ Via plugin (`i18next-icu`)                                                   |
+| **Pluralização**                             | ✅ Padrões baseados em enumerações                                                 | ✅ Sufixos `_one` / `_other` (Intl.PluralRules)                                 |
+| **Formatação (datas, números, moedas)**      | ✅ `useNumber`, `useDate`, ... (Intl nativo)                                       | ⚠️ Formatadores de interpolação ou chamadas diretas a `Intl.*`                  |
+| **Roteamento localizado e middleware**       | ✅ Proxy/middleware integrado, `getMultilingualUrls`                               | ⚠️ Não é nativo; middleware manual ou de terceiros                              |
+| **Utilitários de SEO (hreflang, sitemap)**   | ✅ Utilitários integrados                                                          | ❌ Manual                                                                       |
+| **Componentes de servidor síncronos**        | ✅ `useIntlayer` de `next-intlayer/server` utilizável em qualquer Server Component | ⚠️ `getFixedT` na página e passar `t` via props                                 |
+| **Tree-shaking (apenas conteúdo utilizado)** | ✅ Por componente, por idioma, automatizado pelo compilador                        | ⚠️ Manual: namespaces + lista `ns` por página + backend                         |
+| **Lazy loading**                             | ✅ `importMode: 'dynamic'` (uma linha de configuração)                             | ✅ Via plugins backend (`i18next-resources-to-backend`, `i18next-http-backend`) |
+| **Limpeza de conteúdo não utilizado**        | ✅ Dicionários órfãos são descartados no build                                     | ❌ Não integrado                                                                |
+| **Testar traduções ausentes (CLI / CI)**     | ✅ `npx intlayer content test`                                                     | ⚠️ `i18next-parser` / ferramentas de terceiros                                  |
+| **Tradução assistida por IA**                | ✅ Integrada, utiliza suas próprias chaves de API                                  | ❌ Não (Locize é um serviço pago à parte)                                       |
+| **Editor Visual / CMS**                      | ✅ Editor Visual gratuito + CMS opcional                                           | ❌ Não (Locize / plataformas externas)                                          |
+| **Servidor MCP e Agent Skills**              | ✅ Sim                                                                             | ❌ Não                                                                          |
+| **Ecossistema e comunidade**                 | ⚠️ Mais recente, porém em rápido crescimento                                       | ✅ Maior e mais maduro                                                          |
+
+## O benchmark
+
+### O que foi medido
+
+A suíte [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) constrói **a mesma aplicação** com cada biblioteca: **10 páginas** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 idiomas** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), componentes e conteúdos idênticos. As páginas são medidas em `en` e `fr`. Cada biblioteca é testada em até quatro **estratégias de carregamento**:
+
+| Estratégia         | Descrição                                                                              | Quem costuma usar                              |
+| ------------------ | -------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| **static**         | Todos os idiomas e páginas empacotados juntos (`resources` embutidos em `init()`)      | Protótipos rápidos, código gerado por IA       |
+| **dynamic**        | Apenas o idioma ativo é carregado via backend, mas todos os namespaces simultaneamente | A maioria dos projetos                         |
+| **scoped-static**  | Um namespace por rota, todos embutidos antecipadamente                                 | Raro                                           |
+| **scoped-dynamic** | Um namespace por rota + lazy loading via backend. Apenas a página e idioma atuais      | Aplicações com orçamento de performance rígido |
+
+O Intlayer não possui variante "scoped": o compilador isola o conteúdo **por componente** automaticamente, logo suas linhas `static` e `dynamic` já são otimizadas.
+
+Para cada build, a suíte registra:
+
+- **Lib size**: tamanho gzip de um componente vazio que apenas importa a biblioteca i18n. O custo fixo do runtime.
+- **Page JS**: JavaScript gzip baixado por página, com média calculada sobre todas as páginas e idiomas.
+- **Locale leak %**: proporção de strings traduzidas no JS baixado que pertencem a um idioma que o usuário **não** está visualizando.
+- **Page leak %**: proporção de strings traduzidas no JS baixado pertencentes a páginas nas quais o usuário **não** está.
+- **Component avg**: tamanho médio gzip de cada componente compilado isoladamente.
+- **E2E reactivity**: intervalo real entre a seleção de um novo idioma e a atualização de `html[lang]` no DOM (Playwright, 5 iterações).
+- **Hydration**: duração da fase de hidratação do React.
+
+> Os dados abaixo provêm da execução de **2026-09-12** com `next-i18next` 16.3.0, `react-i18next` 17.0.13 e `intlayer` 9.5.1. A aplicação de teste é deliberadamente enxuta (poucas dezenas de strings por idioma), portanto as porcentagens de vazamento expressam um **padrão**: crescem com o volume do conteúdo enquanto o custo do runtime permanece constante.
+
+### Resultados no Next.js (`next-i18next`)
+
+| Biblioteca                        | Estratégia     | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | Reatividade E2E | Hydration |
+| --------------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | --------------: | --------: |
+| **base** (sem i18n)               | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |         13.4 ms |   11.8 ms |
+| `next-i18next`                    | static         |       19.7 KB |         218.5 KB |        0.0% |     89.8% |            78.5 KB |         16.4 ms |   15.6 ms |
+| `next-i18next`                    | dynamic        |       19.7 KB |         169.5 KB |       50.0% |     89.8% |            26.1 KB |         15.4 ms |   27.7 ms |
+| `next-i18next`                    | scoped-static  |       19.7 KB |         220.1 KB |        0.0% |     89.8% |            78.9 KB |         16.4 ms |   14.7 ms |
+| `next-i18next`                    | scoped-dynamic |       19.7 KB |         163.4 KB |        0.0% |      0.0% |            27.1 KB |         15.9 ms |   15.1 ms |
+| **`next-intlayer`**               | static         |    **5.5 KB** |     **141.3 KB** |    **0.0%** |  **0.0%** |         **8.5 KB** |     **15.5 ms** |   16.9 ms |
+| **`next-intlayer`**               | dynamic        |    **5.5 KB** |     **141.3 KB** |    **0.0%** |  **0.0%** |         **6.9 KB** |     **15.3 ms** |   15.9 ms |
+| `@intlayer/next-i18next` (compat) | static         |        9.4 KB |         150.7 KB |        0.0% |      0.0% |             9.7 KB |         10.7 ms |   11.3 ms |
+| `@intlayer/next-i18next` (compat) | dynamic        |        9.4 KB |         150.7 KB |        0.0% |      0.0% |             9.7 KB |         11.9 ms |   10.6 ms |
+
+**Como interpretar os dados**
+
+- **Custo do runtime.** O core do `i18next` somado ao `react-i18next` representa o maior runtime medido: **19.7 KB gzip** para um componente vazio, contra 5.5 KB do `next-intlayer`.
+- **A configuração inicial é onerosa.** Embutir `resources` em `init()` gera **218.5 KB por página**, +77.5 KB acima da aplicação base. Cada página carrega todos os namespaces.
+- **Otimizar exige muito esforço.** Adotar um backend (`dynamic`) reduz 49 KB mas ainda vaza **90% de strings de outras páginas** e, nesta configuração, metade das strings pertence ao idioma errado. Dividir em namespaces por rota (`scoped-dynamic`) atinge 0% de vazamento com **163.4 KB**, permanecendo **+22.4 KB por página** acima do Intlayer (141.3 KB), que não exigiu configuração manual alguma.
+- **Tamanho dos componentes.** Um componente invocando `useTranslation()` compila entre 26 e 79 KB; o mesmo componente com `useIntlayer()` compila em 6.9 KB.
+- **A hidratação** sobe para 27.7 ms na configuração `dynamic`: a instância do i18next inicializa e resolve o backend no cliente antes de o React conseguir hidratar a página.
+
+### Resultados no TanStack Start (`react-i18next`)
+
+A mesma aplicação no TanStack Start com `react-i18next` puro, isolando os efeitos específicos do Next.js.
+
+| Biblioteca          | Estratégia     | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | Reatividade E2E | Hydration |
+| ------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | --------------: | --------: |
+| **base** (sem i18n) | -              |        0.0 KB |         111.0 KB |        0.0% |      0.0% |             0.7 KB |          8.1 ms |   21.6 ms |
+| `react-i18next`     | static         |       18.4 KB |         180.3 KB |       50.0% |     89.8% |            24.3 KB |         12.9 ms |   85.1 ms |
+| `react-i18next`     | dynamic        |       18.4 KB |         136.4 KB |       23.1% |     89.8% |            24.8 KB |        123.1 ms |   32.9 ms |
+| `react-i18next`     | scoped-static  |       18.4 KB |         184.2 KB |       50.7% |     89.8% |            25.3 KB |        185.1 ms |   25.2 ms |
+| `react-i18next`     | scoped-dynamic |       18.4 KB |         127.2 KB |        0.0% |      0.0% |            26.7 KB |         17.6 ms |   11.3 ms |
+| **`intlayer`**      | static         |    **5.0 KB** |     **125.8 KB** |       50.0% |  **0.0%** |         **8.1 KB** |      **3.2 ms** |   11.5 ms |
+| **`intlayer`**      | dynamic        |    **5.0 KB** |     **118.6 KB** |    **0.0%** |  **0.0%** |         **6.3 KB** |      **3.6 ms** |   14.1 ms |
+
+**Como interpretar os dados**
+
+- A aplicação `react-i18next` básica entrega **+69 KB por página** em relação à aplicação base, e a hidratação consome **85 ms** (4 vezes a base) porque toda a árvore de recursos é processada e registrada no cliente antes do primeiro render.
+- **A troca de idioma evidencia o atraso do lazy loading.** Quando os recursos são carregados sob demanda, alternar de idioma exige uma viagem de rede antes da atualização do `html[lang]`: **123 ms** em `dynamic`, **185 ms** em `scoped-static`. O Intlayer atualiza o DOM em **3-4 ms** em ambos os modos: a troca é instantânea e não fica bloqueada em requisições de rede.
+- A configuração totalmente otimizada `scoped-dynamic` atinge 0% de vazamento com 127.2 KB, ainda **+8.6 KB** acima da linha `dynamic` do Intlayer, e demandou mapeamento de rotas para namespaces, backend de recursos e limites Suspense por rota.
+- A linha `static` do Intlayer já apresenta **0% de vazamento de página** porque somente os dicionários importados pelos componentes daquela página são empacotados. Ativar `importMode: 'dynamic'` elimina também o vazamento de idioma.
+- **Tamanho por componente**: 24-27 KB com `react-i18next` contra 6-8 KB com Intlayer. O `useTranslation()` conecta cada componente à instância global do i18next.
+
+## De onde vem a diferença? Instância global vs. dicionários compilados
+
+O `i18next` foi projetado em 2012 como um runtime: uma instância global mantém os recursos, plugins a expandem e `t()` busca chaves em tempo de renderização. Isso proporciona grande flexibilidade (qualquer framework, backend ou formato), mas impõe custo de peso:
+
+```bash
+.
+├── i18n.ts                      # createInstance().use(...).use(...).init({...})
+└── src
+    ├── locales
+    │   ├── en
+    │   │   ├── common.json
+    │   │   ├── home.json
+    │   │   └── about.json
+    │   └── fr
+    │       ├── common.json
+    │       ├── home.json
+    │       └── about.json
+    ├── components
+    │   └── Counter.tsx          # useTranslation("about") + t("counter.label")
+    └── app
+        └── [locale]
+            └── about
+                └── page.tsx     # precisa saber que depende de ["common", "about"]
+```
+
+A instância não tem como prever quais chaves um componente solicitará. Otimizar exige que **você** divida catálogos em namespaces, **você** liste os namespaces de cada página e **você** mantenha essa lista sincronizada ao mover componentes. Como destacam as [notas do benchmark](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md): "manter a segurança de tipos e saber com precisão qual namespace incluir em cada página é um pesadelo".
+
+O Intlayer remove a instância global. O conteúdo é declarado ao lado do componente e o compilador resolve o grafo de dependências no momento do build:
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── components
+    │   └── Counter
+    │       ├── index.tsx        # useIntlayer("counter")
+    │       └── index.content.ts
+    └── app
+        └── [locale]
+            └── about
+                ├── page.tsx
+                └── page.content.ts
+```
+
+O `@intlayer/swc` / `@intlayer/babel` identifica qual componente importa qual dicionário, inclui apenas esses, apenas para o idioma ativo, e descarta o que não for utilizado. O padrão "scoped-dynamic" passa a ser o resultado natural do build, e não uma disciplina manual mantida pela equipe.
+
+> Para reproduzir os números da linha `dynamic`, configure `dictionary.importMode: 'dynamic'` em `intlayer.config.ts`. Veja a [documentação de otimização de bundle](https://intlayer.org/pt/doc/concept/bundle-optimization).
+
+## Experiência de desenvolvimento
+
+### Configuração
+
+**next-i18next (App Router)**
+
+```ts fileName="src/app/i18n/server.ts"
+import { createInstance } from "i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { defaultLocale } from "@/i18n.config";
+
+const backend = resourcesToBackend(
+  (locale: string, namespace: string) =>
+    import(`../../locales/${locale}/${namespace}.json`)
+);
+
+export const initI18next = async (
+  locale: string,
+  namespaces: string[] = ["common"]
+) => {
+  const i18n = createInstance();
+  await i18n
+    .use(initReactI18next)
+    .use(backend)
+    .init({
+      lng: locale,
+      fallbackLng: defaultLocale,
+      ns: namespaces,
+      defaultNS: "common",
+      interpolation: { escapeValue: false },
+      react: { useSuspense: false },
+    });
+  return i18n;
+};
+```
+
+Adiciona-se a isso um `I18nProvider` client-side que recria a instância com as mesmas configurações, `generateStaticParams` e uma lista de `namespaces` em cada página.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```tsx fileName="src/app/[locale]/layout.tsx"
+import { getHTMLTextDir } from "intlayer";
+import { IntlayerClientProvider, type NextLayoutIntlayer } from "next-intlayer";
+
+const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
+  const { locale } = await params;
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerClientProvider locale={locale}>
+          {children}
+        </IntlayerClientProvider>
+      </body>
+    </html>
+  );
+};
+
+export default LocaleLayout;
+```
+
+### Componente de cliente
+
+**react-i18next**
+
+```json fileName="src/locales/en/about.json"
+{
+  "counter": {
+    "label": "Counter",
+    "increment": "Increment"
+  }
+}
+```
+
+```tsx fileName="src/components/Counter.tsx"
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export const Counter = () => {
+  const { t, i18n } = useTranslation("about");
+  const [count, setCount] = useState(0);
+  const numberFormat = new Intl.NumberFormat(i18n.language);
+
+  return (
+    <div>
+      <p>{numberFormat.format(count)}</p>
+      <button
+        aria-label={t("counter.label")}
+        onClick={() => setCount((c) => c + 1)}
+      >
+        {t("counter.increment")}
+      </button>
+    </div>
+  );
+};
+```
+
+> A página que renderiza este componente precisa carregar o namespace `about`, e `t("counter.label")` é uma string simples a menos que você estenda `CustomTypeOptions`.
+
+**Intlayer**
+
+```ts fileName="src/components/Counter/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const counterContent = {
+  key: "counter",
+  content: {
+    label: t({ en: "Counter", fr: "Compteur" }),
+    increment: t({ en: "Increment", fr: "Incrémenter" }),
+  },
+} satisfies Dictionary;
+
+export default counterContent;
+```
+
+```tsx fileName="src/components/Counter/index.tsx"
+"use client";
+
+import { useState } from "react";
+import { useIntlayer } from "next-intlayer";
+import { useNumber } from "next-intlayer/format";
+
+export const Counter = () => {
+  const { label, increment } = useIntlayer("counter");
+  const number = useNumber();
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>{number(count)}</p>
+      <button aria-label={label} onClick={() => setCount((c) => c + 1)}>
+        {increment}
+      </button>
+    </div>
+  );
+};
+```
+
+`label` e `increment` são estritamente tipados; erros de digitação tornam-se erros de TypeScript e uma tradução ausente causa erro na compilação.
+
+### Componente de servidor síncrono
+
+**next-i18next**
+
+```tsx fileName="src/components/ServerCounter.tsx"
+type ServerCounterProps = {
+  t: (key: string) => string;
+  locale: string;
+  count: number;
+};
+
+export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
+  <div>
+    <p>{new Intl.NumberFormat(locale).format(count)}</p>
+    <button aria-label={t("counter.label")}>{t("counter.increment")}</button>
+  </div>
+);
+```
+
+A página invoca `i18n.getFixedT(locale, "about")` e propaga `t` e `locale` via props.
+
+**Intlayer**
+
+```tsx fileName="src/components/ServerCounter.tsx"
+import { useIntlayer } from "next-intlayer/server";
+import { useNumber } from "next-intlayer/server/format";
+
+export const ServerCounter = ({ count }: { count: number }) => {
+  const { label, increment } = useIntlayer("counter");
+  const number = useNumber();
+
+  return (
+    <div>
+      <p>{number(count)}</p>
+      <button aria-label={label}>{increment}</button>
+    </div>
+  );
+};
+```
+
+## Mantenha a API do i18next, aproveite o desempenho do Intlayer
+
+Você não precisa reescrever componentes para obter os números do benchmark. `@intlayer/i18next`, `@intlayer/react-i18next` e `@intlayer/next-i18next` são adaptadores compatíveis: `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, plurais `_one` / `_other`, sufixos de contexto e `returnObjects` continuam operacionais, alimentados pelos dicionários compilados pelo Intlayer.
+
+```ts fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
+
+const withIntlayer = createNextI18nPlugin();
+
+const nextConfig: NextConfig = {};
+
+export default withIntlayer(nextConfig);
+```
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";
+
+export default defineConfig({
+  plugins: [reactI18nextVitePlugin()],
+});
+```
+
+No benchmark, a versão adaptada da mesma aplicação Next.js caiu de **218.5 KB para 150.7 KB** por página, de **78.5 KB para 9.7 KB** por componente, de **~90% de vazamento para 0%**, e a hidratação passou de 15.6 ms para 11.3 ms, mantendo o código da aplicação intacto. Seus arquivos `locales/{lng}/{ns}.json` existentes podem continuar sendo a fonte da verdade via plugin de sincronização JSON.
+
+Consulte os guias de migração: [i18next](https://intlayer.org/pt/doc/migration/i18next), [react-i18next](https://intlayer.org/pt/doc/migration/react-i18next), [next-i18next](https://intlayer.org/pt/doc/migration/next-i18next).
+
+## Quando escolher cada um?
+
+- **Escolha o i18next** se você depende de seu ecossistema de plugins (detectores, backends, ICU, Locize), traduz também fora do React (serviços Node, vanilla JS, outros frameworks), seu time já possui domínio ou uma plataforma externa exige `locales/{lng}/{ns}.json`. Reserve tempo para separar catálogos em namespaces, conectar um backend e manter o mapa de rotas se a performance for prioritária.
+- **Escolha o Intlayer** se busca **conteúdo com escopo por componente**, **TypeScript estrito**, **detecção de chaves ausentes no build**, **tree-shaking e lazy loading automáticos**, troca instantânea de idioma, componentes de servidor síncronos e ferramentas editoriais nativas (Editor Visual, CMS, tradução com IA, servidor MCP). Ideal para bases de código modulares e design systems.
+- **Escolha os adaptadores `@intlayer/*-i18next`** se você já utiliza o i18next e quer os ganhos de bundle e reatividade sem precisar reescrever seus componentes.
+
+## Comparações relacionadas
+
+- [next-intl vs Intlayer](https://intlayer.org/pt/blog/next-intl-vs-intlayer) (mesmo benchmark)
+- [Lingui vs Intlayer](https://intlayer.org/pt/blog/lingui-vs-intlayer) (mesmo benchmark)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-benchmark) (mesmo benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/pt/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/pt/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [O i18next está desatualizado?](https://intlayer.org/pt/blog/is-i18next-outdated)
+
+## Estrelas no GitHub
+
+As estrelas no GitHub são um indicador sólido da popularidade, confiança da comunidade e relevância de longo prazo de um projeto. Embora não meçam diretamente a qualidade técnica, refletem o engajamento dos desenvolvedores e o potencial de adoção.
+
+[![Gráfico de histórico de estrelas](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
+
+## Conclusão
+
+O `i18next` conquistou sua posição de destaque: roda em qualquer lugar, conta com plugins para tudo e possui mais de dez anos de manutenção contínua. O benchmark demonstra o custo de um design centrado no runtime. A configuração padrão da maioria dos times adiciona **+70-77 KB gzip por página**, vaza **~90% do conteúdo de outras páginas** e leva **mais de 100 ms** para trocar de idioma com lazy loading. Chegar a 0% de vazamento é viável, mas requer backend, namespaces por rota e mapeamento manual, permanecendo ainda **+9-22 KB** acima do Intlayer.
+
+O Intlayer transfere essa responsabilidade para o compilador. Dicionários por componente, lazy loading por idioma e eliminação de conteúdo inútil tornam-se saídas automáticas do build. Na mesma aplicação: **+0.3 KB por página**, **0% de vazamento**, componentes **3 a 10 vezes menores** e troca de idioma em **3-4 ms**.
+
+Todos os dados brutos, aplicações de teste e scripts estão disponíveis no [repositório Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Execute e confira por conta própria.
+
+Consulte a documentação ['Por que o Intlayer?'](https://intlayer.org/pt/doc/why) para obter mais detalhes.

package/blog/pt/is_i18next_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: O i18next está obsoleto em 2026?
 description: O i18next alimenta milhões de sites, mas sua arquitetura em tempo de execução de 2011 começa a mostrar a idade. Uma análise sobre inchaço de bundle, limites de tree-shaking e estagnação.
 keywords:
@@ -70,7 +70,7 @@ Atividade nos últimos doze meses:
 | `i18next` core  | 2.626              | **259**          | Correções menores                          |
 | Intlayer        | 7.156              | **4.343**        | Compilador, extensões de IDE e motor de IA |
 
-[![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
 
 Uma biblioteca enxuta pode ser completa e estável. Contudo, o ferramental de i18n continua a se transformar: bundlers modernos eliminam conteúdo desnecessário em tempo de build, modelos de linguagem traduzem em CI e editores utilizam Language Servers (LSP) e agentes de IA. A dependência exclusiva de plugins em tempo de execução impede que o i18next acompanhe essa evolução.
 
@@ -125,6 +125,10 @@ No Next.js, o `next-i18next` adiciona **76.7 KB gzipped** em relação ao projet
 
 Por padrão, cerca de **90% dos textos carregados** em uma rota pertencem a outras páginas. A divisão manual de namespaces é desgastante e vulnerável a omissões.
 
+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.
+
+![Vazamento de conteúdo teórico por arquitetura](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **Tempo de hidratação:**
 
 Componentes com `react-i18next` levaram **85 ms** para hidratar, contra **24 ms** no Intlayer. Repassar grandes estruturas JSON aos componentes atrasa a interatividade.

package/blog/pt/is_next-intl_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: O next-intl está obsoleto em 2026?
 description: O next-intl tornou-se o padrão para o Next.js App Router. No entanto, ainda carrega sobrecarga no bundle em runtime e a complexidade de manter namespaces manualmente.
 keywords:
@@ -66,7 +66,7 @@ Histórico recente:
 - `amannn/next-intl`: **187 commits** (ajustes de compatibilidade e pequenos reparos).
 - `aymericzip/intlayer`: **4.343 commits** (evolução ativa em compiladores, extensões de editor, servidores MCP e motores de tradução).
 
-[![Star History Chart](https://api.star-history.com/chart?repos=amannn%2Fnext-intl%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#amannn/next-intl&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=amannn%2Fnext-intl%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#amannn/next-intl&aymericzip/intlayer)
 
 Uma ferramenta consolidada pode ser confiável. Mas o ecossistema de i18n se modernizou: compiladores removem conteúdo sem referência em tempo de build, LLMs automatizam a tradução em CI e editores se integram com Language Servers (LSP) e agentes de IA. Uma arquitetura restrita ao runtime não usufrui plenamente desses avanços.
 
@@ -127,6 +127,10 @@ Ao fornecer `messages` ao provedor na raiz, o navegador baixa a coleção integr
 
 É possível atenuar o problema dividindo arquivos JSON por namespaces. Contudo, manter essa tabela manualmente demanda esforço contínuo e gera erros frequentes.
 
+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.
+
+![Vazamento de conteúdo teórico por arquitetura](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 O Intlayer soluciona isso por análise estática: o [compilador do Intlayer](https://intlayer.org/pt/doc/compiler) empacota exclusivamente os textos solicitados por cada rota, reduzindo o vazamento para **0.0%**.
 
 ## Por que o next-intl não suporta tree-shaking

package/blog/pt/is_vue-i18n_outdated.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-02
-updatedAt: 2026-09-02
+updatedAt: 2026-09-16
 title: O vue-i18n está obsoleto em 2026?
 description: O vue-i18n tem sido o padrão para Vue e Nuxt há dez anos. Contudo, em nossos benchmarks ele se revelou o runtime de i18n mais pesado da web. Entenda o porquê.
 keywords:
@@ -64,7 +64,7 @@ Histórico do último ano:
 - `intlify/vue-i18n`: **259 commits** (manutenção para Vue 3 e Nuxt).
 - `aymericzip/intlayer`: **4.343 commits** (trabalho contínuo em otimização de compilação, integrações LSP e suporte a IA).
 
-[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 Uma ferramenta estabelecida garante estabilidade. Mas o desenvolvimento atual aproveita transformações AST no build, eliminação de código inativo e tradução por IA. Um modelo focado no navegador tem dificuldade de acompanhar esses padrões.
 
@@ -116,6 +116,12 @@ Por padrão, **90% das traduções transmitidas** para uma rota pertencem a outr
 
 Componentes compilados com escopos locais chegaram a uma média de 196 KB no `vue-i18n` devido à duplicação de catálogos, frente a apenas **6.5 KB** no Intlayer.
 
+**Como o vazamento escala:**
+
+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.
+
+![Vazamento de conteúdo teórico por arquitetura](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 ## Por que o vue-i18n é pesado?
 
 ### Um compilador AST entregue ao navegador