@intlayer/docs 9.4.4 → 9.5.0

package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md

@@ -42,16 +42,12 @@ Focamos no **Next.js 13+ App Router** (com **React Server Components**) e avalia
 
 > Uma confusão comum feita por desenvolvedores é pensar que `next-intl` é a versão Next.js do `react-intl`. Não é, `next-intl` é mantido por [Amann](https://github.com/amannn), enquanto `react-intl` é mantido por [FormatJS](https://github.com/formatjs/formatjs).
 
----
-
 ## Em resumo
 
 - **next-intl** - Formatação de mensagens leve e direta com suporte sólido ao Next.js. Catálogos centralizados são comuns; a experiência do desenvolvedor (DX) é simples, mas a segurança e a manutenção em larga escala permanecem principalmente sob sua responsabilidade.
 - **next-i18next** - i18next com aparência de Next.js. Ecossistema maduro e recursos via plugins (por exemplo, ICU), mas a configuração pode ser verbosa e os catálogos tendem a se centralizar conforme os projetos crescem.
 - **Intlayer** - Modelo de conteúdo centrado em componentes para Next.js, **tipagem TS rigorosa**, **verificações em tempo de build**, **tree-shaking**, **middleware e helpers de SEO integrados**, **Editor Visual/CMS** opcional e **traduções assistidas por IA**.
 
----
-
 | Library                | GitHub Stars                                                                                                                                                                     | Total Commits                                                                                                                                                                        | Last Commit                                                                                                                                           | First Version | NPM Version                                                                                                         | NPM Downloads                                                                                                                  |
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | `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)   | April 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)         |
@@ -61,8 +57,6 @@ Focamos no **Next.js 13+ App Router** (com **React Server Components**) e avalia
 
 > Os distintivos são atualizados automaticamente. As capturas de tela podem variar ao longo do tempo.
 
----
-
 ## Comparação de Recursos Lado a Lado (focado em Next.js)
 
 | Recurso                                                     | `next-intlayer` (Intlayer)                                                                                                                       | `next-intl`                                                                                                                    | `next-i18next`                                                                                                                 |
@@ -88,16 +82,12 @@ Focamos no **Next.js 13+ App Router** (com **React Server Components**) e avalia
 | **Gerenciamento de Grandes Projetos**                       | ✅ Incentiva modularidade, adequado para design-system                                                                                           | ✅ Modular com configuração                                                                                                    | ✅ Modular com configuração                                                                                                    |
 | **Testando Traduções Ausentes (CLI/CI)**                    | ✅ CLI: `npx intlayer content test` (auditoria amigável para CI)                                                                                 | ⚠️ Não embutido; a documentação sugere `npx @lingual/i18n-check`                                                               | ⚠️ Não embutido; depende das ferramentas do i18next / runtime `saveMissing`                                                    |
 
----
-
 ## Introdução
 
 Next.js oferece suporte embutido para roteamento internacionalizado (ex.: segmentos de localidade). Mas essa funcionalidade não realiza traduções por si só. Você ainda precisa de uma biblioteca para renderizar conteúdo localizado para seus usuários.
 
 Existem muitas bibliotecas i18n, mas no universo Next.js hoje, três estão ganhando destaque: next-i18next, next-intl e Intlayer.
 
----
-
 ## Arquitetura & escalabilidade
 
 - **next-intl / next-i18next**: Por padrão, utilizam **catálogos centralizados** por localidade (além de **namespaces** no i18next). Funciona bem no início, mas frequentemente se torna uma grande área compartilhada com aumento do acoplamento e da rotatividade de chaves.
@@ -105,8 +95,6 @@ Existem muitas bibliotecas i18n, mas no universo Next.js hoje, três estão ganh
 
 **Por que isso importa:** Em grandes bases de código ou configurações de sistemas de design, **conteúdo modular** escala melhor do que catálogos monolíticos.
 
----
-
 ## Tamanhos de bundle e dependências
 
 Após a construção da aplicação, o bundle é o JavaScript que o navegador irá carregar para renderizar a página. Portanto, o tamanho do bundle é importante para o desempenho da aplicação.
@@ -174,8 +162,6 @@ Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `in
 | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | ![pacote otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![pacote não otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
----
-
 ## TypeScript e segurança
 
 <Columns>
@@ -200,12 +186,11 @@ Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `in
 - **Gera tipos estritos** a partir do seu conteúdo. **Autocompletação na IDE** e **erros em tempo de compilação** detectam erros de digitação e chaves ausentes antes do deploy.
 
   </Column>
+
 </Columns>
 
 **Por que isso importa:** Tipagem forte desloca falhas para a **esquerda** (CI/build) em vez da **direita** (tempo de execução).
 
----
-
 ## Tratamento de traduções ausentes
 
 **next-intl**
@@ -222,8 +207,6 @@ Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `in
 
 **Por que isso importa:** Detectar lacunas durante a build evita “strings misteriosas” em produção e está alinhado com gates rigorosos de release.
 
----
-
 ## Roteamento, middleware e estratégia de URL
 
 <Columns>
@@ -248,12 +231,11 @@ Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `in
 - Tudo o que foi mencionado acima, além de **middleware i18n** (detecção de local via headers/cookies) e **helpers** para gerar URLs localizadas e tags `<link rel="alternate" hreflang="…">`.
 
   </Column>
+
 </Columns>
 
 **Por que isso importa:** Menos camadas de integração personalizadas; **UX consistente** e **SEO limpo** entre os locais.
 
----
-
 ## Alinhamento com Server Components (RSC)
 
 <Columns>
@@ -278,12 +260,11 @@ Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `in
 - Suporta Next.js 13+ e suaviza a **fronteira servidor/cliente** com uma API consistente e provedores orientados para RSC, evitando o transporte de formatadores ou funções t.
 
   </Column>
+
 </Columns>
 
 **Por que isso importa:** Modelo mental mais limpo e menos casos extremos em árvores híbridas.
 
----
-
 ## Integração com plataformas de localização (TMS)
 
 Grandes organizações frequentemente dependem de Sistemas de Gerenciamento de Tradução (TMS) como **Crowdin**, **Phrase**, **Lokalise**, **Localizely** ou **Localazy**.
@@ -790,8 +771,6 @@ const ClientComponentExample = () => {
   - **next-intl** é flexível; carrega mensagens conforme sua configuração.
   - **Intlayer** armazena conteúdo em dicionários TS/JS e resolve por chave.
 
----
-
 ### Uso em um componente servidor
 
 Vamos considerar o caso de um componente de interface do usuário (UI). Este componente é um componente de servidor e deve ser capaz de ser inserido como filho de um componente cliente. (página (componente de servidor) -> componente cliente -> componente de servidor). Como este componente pode ser inserido como filho de um componente cliente, ele não pode ser assíncrono.
@@ -889,7 +868,7 @@ Aqui está uma lista de boas práticas relacionadas ao SEO multilíngue.
 Os desenvolvedores frequentemente esquecem de referenciar corretamente suas páginas entre os diferentes locais.
 
 <Tabs defaultTab="next-intl" group='techno'>
- 
+
   <Tab label="next-i18next" value="next-i18next">
 
 ```ts fileName="i18n.config.ts"
@@ -1148,8 +1127,6 @@ export default robots;
 
 > Intlayer fornece uma função `getMultilingualUrls` para gerar URLs multilíngues para seu sitemap.
 
----
-
 ### Middleware para roteamento de locale
 
 <Tabs defaultTab="next-intl" group='techno'>
@@ -1267,9 +1244,8 @@ A configuração do middleware está centralizada no arquivo `intlayer.config.ts
 - **Ferramentas integradas**: Aproveite o suporte integrado de roteamento, auxiliares de SEO e editor visual.
 
   </Tab>
-</Tabs>
 
----
+</Tabs>
 
 ## E o vencedor é…
 
@@ -1297,6 +1273,7 @@ Não é simples. Cada opção tem seus prós e contras. Aqui está como eu vejo:
 - construído para o Next.js moderno, com conteúdo modular, segurança de tipos, ferramentas e menos código repetitivo. Se você valoriza **conteúdo com escopo de componente**, **TypeScript rigoroso**, **garantias em tempo de build**, **tree-shaking** e ferramentas de roteamento/SEO/editor **com tudo incluído** - especialmente para **Next.js App Router**, sistemas de design e **bases de código grandes e modulares**.
 
   </Column>
+
 </Columns>
 
 Se você prefere uma configuração mínima e aceita algum trabalho manual, next-intl é uma boa escolha. Se você precisa de todos os recursos e não se importa com a complexidade, next-i18next funciona. Mas se você quer uma solução moderna, escalável e modular com ferramentas integradas, Intlayer pretende oferecer isso pronto para uso.
@@ -1311,8 +1288,6 @@ As estrelas no GitHub são um forte indicador da popularidade de um projeto, da
 
 [![Gráfico do Histórico de Estrelas](https://api.star-history.com/chart?repos=i18next/next-i18next%2Camannn/next-intl%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/next-i18next&amannn/next-intl&aymericzip/intlayer)
 
----
-
 ## Conclusão
 
 Todas as três bibliotecas têm sucesso na localização principal. A diferença é **quanto trabalho você deve fazer** para alcançar uma configuração robusta e escalável no **Next.js moderno**:

package/blog/pt/nextjs-multilingual-seo-comparison.md

@@ -26,8 +26,6 @@ Se o seu app Next.js multilíngue não informar aos motores de busca como rastre
 
 Neste blog, vamos explorar **por que a i18n é uma superpotência do SEO** e como implementá-la corretamente no Next.js com `next-intl`, `next-i18next` e `Intlayer`.
 
----
-
 ## Por que SEO e i18n
 
 Adicionar idiomas não é apenas sobre UX. É também uma alavanca poderosa para a **visibilidade orgânica**. Eis o porquê:
@@ -37,8 +35,6 @@ Adicionar idiomas não é apenas sobre UX. É também uma alavanca poderosa para
 3. **Melhor UX:** Os visitantes chegam imediatamente à versão correta do seu site.
 4. **Vantagem competitiva:** Poucos sites implementam SEO multilíngue corretamente, o que significa que você pode se destacar.
 
----
-
 ## Melhores práticas para SEO multilíngue no Next.js
 
 Aqui está uma lista de verificação que todo app multilíngue deve implementar:
@@ -57,8 +53,6 @@ Aqui está uma lista de verificação que todo app multilíngue deve implementar
 
 Estes são passos simples, mas ignorá-los pode custar sua visibilidade.
 
----
-
 ## Exemplos de Implementação
 
 Os desenvolvedores frequentemente esquecem de referenciar corretamente suas páginas entre os idiomas, então vamos ver como isso funciona na prática com diferentes bibliotecas.
@@ -343,14 +337,10 @@ export default robots;
   </Tab>
 </Tabs>
 
----
-
 ## Audite seu site com o Intlayer SEO Scanner
 
 Para garantir que seu aplicativo multilíngue esteja perfeitamente otimizado, recomendamos o uso do [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). É uma ferramenta especializada em verificação de sites multilíngues, ajudando você a identificar tags hreflang ausentes, links quebrados e outros problemas de SEO em todas as suas páginas localizadas.
 
----
-
 ## Conclusão
 
 Fazer a i18n corretamente no Next.js não é apenas sobre traduzir texto, mas sim garantir que os motores de busca e os usuários saibam exatamente qual versão do seu conteúdo deve ser exibida.

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

@@ -35,16 +35,12 @@ Nós avaliamos:
 
 > **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.
 
----
-
 ## Matriz de funcionalidades (foco em React)
 
 | Recurso                                                     | `react-intlayer` (Intlayer)                                                                                                                      | `react-i18next` (i18next)                                                                                                      | `react-intl` (FormatJS)                                                                                      |
@@ -69,8 +65,6 @@ Nós avaliamos:
 | **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
@@ -80,8 +74,6 @@ Nós avaliamos:
 
 **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.
@@ -90,8 +82,6 @@ Nós avaliamos:
 
 **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.
@@ -99,8 +89,6 @@ Nós avaliamos:
 
 **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.
@@ -109,8 +97,6 @@ Nós avaliamos:
 
 **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.
@@ -118,8 +104,6 @@ Nós avaliamos:
 
 **Por que isso importa:** Pacotes menores e menos strings não utilizadas melhoram o desempenho de inicialização e navegação.
 
----
-
 ### 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.
@@ -127,24 +111,18 @@ Nós avaliamos:
 
 **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`).
 
----
-
 ## Notas práticas de migração (react-intl / react-i18next → Intlayer)
 
 - **Migre de forma incremental**: Comece com uma funcionalidade ou rota; mantenha os catálogos legados em paralelo durante a transição.
@@ -152,8 +130,6 @@ Usando `intlayer`, você pode declarar seu conteúdo no formato de sua bibliotec
 - **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.
 
----
-
 ## 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**:

package/blog/pt/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,294 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Como tornar multilíngue (i18n) uma aplicação Next.js existente a posteriori (Guia i18n 2026)"
+description: "O guia de 2026 para tornar uma aplicação Next.js existente multilíngue (i18n) sem refatorações exaustivas. Conheça a extração automática, tradução com IA e roteamento com Intlayer."
+keywords:
+  - Next.js i18n
+  - Internacionalização
+  - Traduzir app Next.js existente
+  - Next.js 16
+  - Intlayer
+  - Multilíngue
+  - React i18n
+  - Compilador
+  - Tradução IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Como tornar multilíngue (i18n) uma aplicação Next.js existente a posteriori (Guia i18n 2026)
+
+Adicionar internacionalização (i18n) a um projeto Next.js desde o primeiro dia é relativamente simples. Mas o que acontece quando você já tem uma aplicação Next.js madura e em produção em um único idioma e precisa torná-la multilíngue **a posteriori**?
+
+Com bibliotecas tradicionais como `next-intl` ou `next-i18next`, a tarefa é exaustiva:
+
+- Caçar textos estáticos em centenas de arquivos JSX/TSX.
+- Criar manualmente arquivos JSON aninhados e inventar chaves (`pages.dashboard.header.title`, etc.).
+- Substituir textos por hooks de tradução (`t('...')`).
+- Reestruturar toda a pasta `app/` em `app/[locale]/...`, quebrando URLs existentes e SEO.
+
+Em 2026, você não precisa reescrever sua aplicação. Com o **Intlayer**, você adiciona internacionalização em minutos através de extração automatizada, tradução assistida por IA e roteamento flexível.
+
+> Procurando o guia técnico passo a passo para o Next.js 16 App Router? Veja a nossa documentação: [Traduzir Next.js 16 com Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_nextjs_16.md).
+
+## Índice
+
+<TOC/>
+
+## O dilema da adaptação: Por que internacionalizar uma aplicação existente é difícil
+
+Ao adaptar uma aplicação Next.js existente, os desenvolvedores encontram 3 grandes problemas:
+
+1. **Impacto no código**: Extrair textos manualmente para JSONs exige modificar quase todos os arquivos de componentes.
+2. **Imposição de rotas**: Bibliotecas tradicionais exigem mover suas páginas para `[locale]`.
+3. **Tradução repetitiva**: Traduzir dezenas de idiomas exige copiar e colar incansavelmente.
+
+O Intlayer resolve isso com **extração assistida por compilador**, **dicionários declarativos** e **roteamento não invasivo**.
+
+## Extração automatizada de conteúdo (sem busca manual)
+
+### Opção A: Extrator via CLI (`npx intlayer extract`)
+
+Execute o extrator do Intlayer diretamente no projeto:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Ele analisa seus componentes e cria arquivos `.content.ts` declarativos ao lado de cada componente.
+
+### Opção B: Compilador Intlayer (Extração em tempo de build)
+
+Escreva texto comum em seus componentes. No build, o compilador extrai o texto e injeta o conteúdo traduzido automaticamente:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+Nos bastidores, o Intlayer constrói o dicionário e vincula o componente ao seu conteúdo localizado, eliminando totalmente a refatoração manual.
+
+Nesse caso, será gerado um arquivo `src/app/page.content.ts` com o seguinte conteúdo:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Tradução assistida por IA com seu LLM preferido
+
+Traduza rapidamente com OpenAI, Anthropic, DeepSeek ou Mistral usando sua própria chave de API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Painel SaaS para produtividade e colaboração de equipes",
+  },
+};
+
+export default config;
+```
+
+A execução de `npx intlayer fill` preenche suas declarações `.content.ts` com as traduções para todas as línguas configuradas:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      pt: "Bem-vindo à nossa plataforma",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      pt: "Comece a explorar nossos recursos modernos hoje mesmo.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Como o Intlayer fornece um `applicationContext` de alto nível para o LLM, as traduções geradas preservam nuances técnicas, o tom da marca e o contexto gramatical muito melhor do que ferramentas automatizadas tradicionais.
+
+Para verificar se nenhuma string foi esquecida antes de enviar para produção:
+
+```bash
+npx intlayer test
+```
+
+## Roteamento multilíngue sem quebrar URLs existentes
+
+O Intlayer oferece suporte a:
+
+- **Search Params / Cookies (`search-params`)**: Mantenha sua estrutura intacta sem mover nada para `[locale]`.
+- **Modo prefixo (`prefix` / `prefix-all-locales`)**: Suporte total a rotas amigáveis para SEO.
+
+Configure sua integração com o Next.js em segundos:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Envolva seu root layout com `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## SEO multilíngue
+
+Gere metadados localizados e tags `hreflang` facilmente para indexação global:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Aprofunde-se: Pronto para a implementação completa?
+
+Para o passo a passo técnico completo com middleware, geração estática (`generateStaticParams`) e Server Components, veja a documentação detalhada:
+
+👉 **[Guia completo para traduzir Next.js 16 com Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_nextjs_16.md)**
+
+## Perguntas Frequentes (FAQ)
+
+<FAQ>
+
+<Question title="Posso tornar meu app Next.js multilíngue sem mover arquivos para app/[locale]?">
+
+Sim. O Intlayer suporta `routing.mode: "search-params"` e detecção por cookies/headers sem alterar sua estrutura de pastas.
+
+</Question>
+<Question title="Preciso substituir manualmente todos os textos do meu app?">
+
+Não. Utilize `npx intlayer extract` ou o compilador do Intlayer para extração automática.
+
+</Question>
+<Question title="Como o Intlayer reduz o tamanho do bundle comparado ao next-intl?">
+
+Através de declarações modulares por componente e eliminação de código não utilizado durante o build.
+
+</Question>
+<Question title="Posso usar IA para traduzir os componentes existentes?">
+
+Sim. O comando `npx intlayer fill` conecta seu projeto a LLMs para preenchimento de traduções com contexto.
+
+</Question>
+</FAQ>