@intlayer/docs 9.4.4 → 9.5.0

package/blog/pt/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,358 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Como tornar multilíngue (i18n) uma aplicação Vite e React existente a posteriori (Guia i18n 2026)"
+description: "O guia de 2026 para tornar uma aplicação Vite e React existente multilíngue (i18n) sem refatorações exaustivas. Conheça a extração automática, tradução com IA e bundles otimizados com Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internacionalização
+  - Traduzir app Vite existente
+  - Traduzir app React existente
+  - Intlayer
+  - Multilíngue
+  - Compilador
+  - Tradução IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - 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 Vite e React existente a posteriori (Guia i18n 2026)
+
+Adicionar internacionalização (i18n) a um projeto Vite e React desde o primeiro dia é relativamente simples. Mas o que acontece quando você já tem uma aplicação madura e em produção em um único idioma e precisa torná-la multilíngue **a posteriori**?
+
+Com bibliotecas tradicionais como `react-i18next` ou `react-intl`, o processo costuma ser exaustivo:
+
+- Caçar manualmente textos estáticos em centenas de arquivos JSX e TSX.
+- Criar arquivos JSON aninhados e inventar chaves de tradução arbitrárias (`components.header.title`, etc.).
+- Substituir textos da interface por chamadas complexas a hooks (`t('...')`).
+- Reestruturar o roteamento no cliente, o gerenciamento de estado e a lógica de troca de idioma.
+
+Em 2026, você não precisa reescrever sua aplicação. Com o **Intlayer**, você adiciona internacionalização em uma aplicação Vite e React existente em minutos através de extração automatizada, tradução assistida por IA e integração fluida.
+
+> Procurando o guia técnico passo a passo para Vite e React? Veja a nossa documentação: [Traduzir Vite e React com Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+react.md).
+
+## Índice
+
+<TOC/>
+
+## O dilema da adaptação: Por que internacionalizar uma aplicação existente é difícil
+
+Ao adaptar uma aplicação Vite e React existente, os desenvolvedores encontram 3 grandes obstáculos:
+
+1. **Impacto na base de código**: Extrair manualmente textos para dicionários JSON exige editar quase todos os componentes. Isso gera diffs imensos no Git, conflitos de mesclagem e riscos de regressão visual.
+2. **Custo de gerenciar chaves**: Criar chaves como `dashboard.hero.ctaButton` para cada trecho textual atrasa o desenvolvimento e eleva a carga cognitiva a cada ajuste na UI.
+3. **Trabalho repetitivo de tradução**: Após extrair as strings, traduzir dicionários para 5, 10 ou 20 idiomas exige infinitos copia e cola ou serviços de tradução externos dispendiosos.
+
+O Intlayer soluciona esses desafios no nível arquitetural através de **extração assistida por compilador**, **dicionários declarativos no nível do componente** e **integração nativa com o Vite**.
+
+## Extração automatizada de conteúdo (sem busca manual de textos)
+
+Em vez de extrair manualmente cada string do seu JSX, o Intlayer disponibiliza duas abordagens simples:
+
+### Opção A: O extrator via CLI (`npx intlayer extract`)
+
+Você pode rodar a ferramenta de extração do Intlayer diretamente na sua base de código:
+
+```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
+```
+
+Esse comando analisa seus componentes React, detecta textos visíveis ao usuário e gera automaticamente arquivos de declaração de conteúdo (`.content.ts`) ao lado de cada componente. A lógica permanece declarativa, limpa e com tipagem segura, sem precisar inventar chaves manualmente.
+
+### Opção B: O compilador Intlayer (Extração no momento do build)
+
+Com o compilador Intlayer ativo na configuração, você continua escrevendo seus componentes com texto comum no idioma padrão. No momento do build, o compilador extrai o texto e injeta o conteúdo localizado automaticamente:
+
+```tsx fileName="src/App.tsx"
+// Escreva código React comum. O compilador extrai os textos automaticamente
+export default function App() {
+  return (
+    <section>
+      <h1>Bem-vindo à nossa plataforma</h1>
+      <p>Comece a explorar nossos recursos modernos hoje mesmo.</p>
+    </section>
+  );
+}
+```
+
+Nos bastidores, o Intlayer monta o dicionário e vincula o componente ao seu conteúdo localizado, eliminando totalmente qualquer refatoração manual.
+
+Neste caso, ele gera um arquivo de declaração `src/App.content.ts` com a seguinte estrutura:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bemVindoANossaPlataforma: t({
+      pt: "Bem-vindo à nossa plataforma",
+    }),
+    comeceAExplorarNossosRecursos: t({
+      pt: "Comece a explorar nossos recursos modernos hoje mesmo.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Tradução assistida por IA com seu LLM favorito
+
+Após a extração, traduzir o conteúdo para dezenas de idiomas não deve levar dias. O Intlayer traz uma CLI de tradução integrada com IA compatível com OpenAI, Anthropic, DeepSeek ou Mistral usando suas próprias chaves 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
+```
+
+Configure seus idiomas e provedor de IA no arquivo `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.PORTUGUESE,
+    ],
+    defaultLocale: Locales.PORTUGUESE,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Aplicação SaaS moderna e painel administrativo construídos com Vite e React",
+  },
+};
+
+export default config;
+```
+
+Executar `npx intlayer fill` preenche suas declarações com traduções precisas para todos os idiomas configurados:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bemVindoANossaPlataforma: t({
+      pt: "Bem-vindo à nossa plataforma",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    comeceAExplorarNossosRecursos: t({
+      pt: "Comece a explorar nossos recursos modernos hoje mesmo.",
+      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.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Como o Intlayer passa o `applicationContext` para o modelo, as traduções respeitam o contexto técnico, o tom da marca e a gramática muito melhor do que ferramentas genéricas.
+
+Para validar se nenhum texto ficou sem tradução antes do deploy em produção:
+
+```bash
+npx intlayer test
+```
+
+## Integração com Vite e configuração do Provider
+
+Integrar o Intlayer ao Vite requer apenas adicionar o plugin no `vite.config.ts` e envolver o componente raiz com o `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> A partir do Intlayer v9, o compilador está incluído diretamente no plugin `intlayer()` e é ativado automaticamente ao definir `compiler.enabled` no `intlayer.config.ts`.
+
+Envolva sua aplicação com o `IntlayerProvider` no componente raiz:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Alterando o idioma dinamicamente
+
+Alterne o idioma facilmente em qualquer componente usando o hook `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## SEO Multilíngue (Sitemap e Robots.txt)
+
+O Intlayer inclui geradores como `generateSitemap` e `getMultilingualUrls` para criar arquivos `sitemap.xml` e `robots.txt` multilíngues otimizados para motores de busca em builds estáticos do Vite:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("Arquivos SEO gerados com sucesso.");
+```
+
+Adicione um script `prebuild` no seu `package.json` para rodar este passo antes de `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Aprofundamento: Pronto para o passo a passo completo?
+
+Este artigo ofereceu uma visão geral de como internacionalizar uma aplicação Vite e React existente em 2026 sem complicações de refatoração.
+
+Se você está pronto para configurar cada parte do seu projeto em detalhes, incluindo tipagem rigorosa em TypeScript, dicionários dinâmicos e editor visual, acesse nosso guia completo:
+
+👉 **[Guia completo para traduzir Vite e React com Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+react.md)**
+
+## Perguntas Frequentes (FAQ)
+
+<FAQ>
+
+<Question title="Posso tornar minha aplicação Vite e React multilíngue sem refatorar manualmente todas as strings?">
+
+Sim. Você pode usar `npx intlayer extract` para detectar e extrair automaticamente textos fixos em arquivos de declaração de conteúdo, ou utilizar o compilador Intlayer para transformar os componentes no build enquanto continua escrevendo JSX comum.
+
+</Question>
+<Question title="Como o Intlayer reduz o tamanho do bundle Vite em comparação com react-i18next ou react-intl?">
+
+O Intlayer utiliza definições de dicionário por componente e otimização por macros no build. Os seus bundles recebem somente os campos exatos demandados pelos componentes em exibição, ao invés de arquivos JSON inteiros. Dicionários dinâmicos também permitem carregar idiomas sob demanda.
+
+</Question>
+<Question title="Posso usar IA para traduzir meus componentes existentes em múltiplos idiomas?">
+
+Sim. A CLI do Intlayer possui o comando `npx intlayer fill`, que se conecta ao seu provedor de IA favorito (OpenAI, Anthropic, Mistral, DeepSeek) para gerar traduções contextuais em todos os idiomas configurados.
+
+</Question>
+<Question title="Posso migrar do react-i18next ou react-intl sem reescrever meus componentes?">
+
+Sim. O Intlayer conta com adaptadores de compatibilidade para `react-i18next` e `react-intl`, além de plugins dedicados para sincronizar seus arquivos JSON de tradução já existentes (`sync-json`).
+
+</Question>
+
+</FAQ>

package/blog/pt/vue-i18n_vs_intlayer.md

@@ -33,15 +33,11 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 > **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**                                                                                 |
@@ -65,8 +61,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 | **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
@@ -76,8 +70,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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.
@@ -85,8 +77,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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).
@@ -94,8 +84,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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.
@@ -103,8 +91,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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).
@@ -112,8 +98,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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.
@@ -121,8 +105,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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.
@@ -130,8 +112,6 @@ Focamos nas ferramentas modernas do Vue (Vite, Composition API) e avaliamos:
 
 **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**:
@@ -221,8 +201,6 @@ Esta abordagem:
 - **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.
@@ -240,23 +218,17 @@ Esta abordagem:
 - **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**.
 
----
-
 ## Interoperabilidade com vue-i18n
 
 `intlayer` também pode ajudar a gerenciar seus namespaces `vue-i18n`.
 
 Usando `intlayer`, você pode declarar seu conteúdo no formato de sua biblioteca i18n favorita, e intlayer gerará seus namespaces no local de sua escolha (exemplo: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## 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.
@@ -265,8 +237,6 @@ Usando `intlayer`, você pode declarar seu conteúdo no formato de sua bibliotec
 - **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:

package/blog/pt/what_is_internationalization.md

@@ -101,8 +101,6 @@ Este resumo conciso cobre os principais elementos que devem ser internacionaliza
 - **Sensibilidades culturais**  
   Ícones, cores e símbolos podem carregar significados diferentes entre culturas. É importante adaptar conteúdo visual e textual para respeitar as nuances culturais locais.
 
----
-
 ## Melhores Práticas para Implementar i18n
 
 - **Planeje cedo**  
@@ -117,8 +115,6 @@ Este resumo conciso cobre os principais elementos que devem ser internacionaliza
 - **Reutilização de Traduções**  
   Organize seus arquivos de tradução para serem reutilizáveis em vários sites ou aplicações. Por exemplo, se você tem um rodapé ou cabeçalho multilíngue, configure arquivos de tradução dedicados para que elementos comuns possam ser facilmente aplicados a todos os projetos.
 
----
-
 ## Declaração de Conteúdo Localizado vs. Externalização de Conteúdo CMS
 
 Ao criar um site, um **Sistema de Gerenciamento de Conteúdo (CMS) como WordPress, Wix ou Drupal geralmente oferece melhor manutenibilidade**. Especialmente para blogs ou páginas de destino, por causa de suas funcionalidades integradas de i18n.
@@ -136,8 +132,6 @@ Diante desses desafios, é comum optar por um CMS headless para externalizar o c
 
 É importante escolher a ferramenta certa para suas necessidades e planejar sua estratégia de internacionalização desde o início. **A Intlayer oferece uma solução atraente combinando declaração de conteúdo localizado com um CMS headless que é intimamente integrado, proporcionando o melhor de ambos os mundos.**
 
----
-
 ### Veja a lista de bibliotecas e ferramentas de i18n por tecnologia
 
 Se você está procurando uma lista de bibliotecas e ferramentas de i18n por tecnologia, confira os seguintes recursos:
@@ -155,8 +149,6 @@ Se você está procurando uma lista de bibliotecas e ferramentas de i18n por tec
 - Svelte: [Veja a lista de bibliotecas e ferramentas de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Veja a lista de bibliotecas e ferramentas de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Conclusão
 
 A internacionalização (i18n) é mais do que apenas uma tarefa técnica; é um **investimento estratégico** que permite que seu software fale a língua dos seus usuários, literalmente. Ao abstrair elementos específicos do local, acomodar variações linguísticas e culturais e planejar para a expansão futura, você capacita seu produto a prosperar em um mercado global.

package/blog/ru/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 Перевод — это простая половина. Сложная половина — это сообщение поисковым системам, что эти страницы — это **одна и та же страница на другом языке**, а не три документа, конкурирующих друг с другом. Это то, что делает `hreflang`, и это именно то место, где большинство многоязычных сайтов тихо теряют свой трафик.
 
----
-
 ## Что такое hreflang на самом деле
 
 Аннотация на странице, которая говорит: _у этого URL есть эквивалентные версии там, для этих языков._
@@ -42,8 +40,6 @@ author: aymericzip
 
 Стоит быть ясным насчет того, чем это не является. Это **не редирект** — это подсказка, и Google может её переопределить. Это **не бонус ранжирования** — это меняет _какая_ версия ранжируется, а не _ранжируется ли_ вы вообще. А Bing полностью его игнорирует, полагаясь вместо этого на `content-language` и геотаргетинг.
 
----
-
 ## Где его объявить
 
 Три способа размещения, все действительные. Выберите один и оставайтесь там — один и тот же кластер, объявленный в двух местах, — это как наборы расходятся.
@@ -54,8 +50,6 @@ author: aymericzip
 
 **HTTP `Link` header** — единственный вариант для файлов, не являющихся HTML, таких как PDF.
 
----
-
 ## Правила
 
 ### Самоссылка и взаимность
@@ -107,8 +101,6 @@ ISO 639-1 для языка, ISO 3166-1 Alpha 2 для необязательн
 
 Два момента, которые нужно держать в уме: `x-default` — это одна дополнительная запись в наборе, а не замена самоссылающейся, и, как и любая другая запись, она должна появляться одинаково на каждой странице в кластере.
 
----
-
 ## Ловушка канонического URL
 
 Каждая локализованная страница должна быть **своим собственным каноническим URL**:
@@ -131,8 +123,6 @@ ISO 639-1 для языка, ISO 3166-1 Alpha 2 для необязательн
 
 **Canonical является самореферентным для каждой локали. `hreflang` описывает кластер.**
 
----
-
 ## Выбор структуры URL
 
 `hreflang` аннотирует URLs, поэтому структура идет в первую очередь.
@@ -149,14 +139,11 @@ ISO 639-1 для языка, ISO 3166-1 Alpha 2 для необязательн
 
 > Intlayer охватывает все три варианта через `routing.mode` и `routing.domains`. См. [пользовательские домены](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/custom_domains.md) и [справочник конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
----
-
 ## Реализация
 
 Написание этих тегов вручную не переживает контакт со второй локалью. Вместо этого выводите их из вашего списка локалей.
 
 <Steps>
-
 <Step number={1} title="Выдавайте кластер на каждой странице">
 
 Одинаковый набор везде, canonical для каждой локали, абсолютные URL, `x-default` включен.
@@ -245,7 +232,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="Или переместите все это в sitemap">
 
 В большом масштабе держите аннотации полностью вне ваших страниц. `generateSitemap` выдает `xhtml:link` альтернативы для каждой записи, читая локали и режим маршрутизации из вашей конфигурации:
@@ -268,7 +254,6 @@ const sitemap = generateSitemap(
 - `entryPerLocale` (default `false`) — по умолчанию одна запись `<url>` содержит все альтернативы. Обе формы валидны, но только URL, указанный как `<loc>`, считается _отправленным_ в Search Console; локали только с альтернативами остаются обнаруживаемыми, но не атрибутируются никакой карте сайта. Включение этой опции дает каждому локализованному URL собственную запись с повторяющимся полным набором альтернатив. Это умножает количество записей на количество локалей, поэтому следите за лимитом в 50 000 URL / 50 МБ и разделите на индекс карты сайта при его превышении.
 
 </Step>
-
 <Step number={3} title="Проверьте, что получает краулер">
 
 `hreflang` может молча не срабатывать, поэтому проверьте его вместо того, чтобы полагаться на предположения.
@@ -281,8 +266,6 @@ const sitemap = generateSitemap(
 
 </Steps>
 
----
-
 ## Checklist
 
 - [ ] Each locale has a distinct, crawlable URL
@@ -296,8 +279,6 @@ const sitemap = generateSitemap(
 - [ ] Объявлены ровно в одном месте
 - [ ] Нет перенаправлений между альтернатами
 
----
-
 ## Завершение
 
 `hreflang` прост и неумолим. Один пропущенный обратный тег, один относительный URL, один cross-locale canonical — и кластер отбрасывается без каких-либо ошибок. Каждый из этих случаев возникает из-за ручного написания тегов.

package/blog/ru/i18n_meaning.md

@@ -92,8 +92,6 @@ author: aymericzip
 - **Абстрагируйте весь текст, обращенный к пользователю:** Убедитесь, что в ваших компонентах пользовательского интерфейса нет жестко закодированного текста.
 - **Используйте надежную систему управления переводами:** Такие инструменты, как **Intlayer**, сокращают разрыв между разработчиками и переводчиками. Intlayer действует как headless CMS, которая тесно интегрирована с вашей кодовой базой, позволяя контент-менеджерам визуально обновлять переводы без необходимости запуска нового билда разработчиком.
 
----
-
 ### Список библиотек и инструментов i18n по технологиям
 
 Если вы ищете список библиотек и инструментов i18n для конкретной технологии, ознакомьтесь со следующими ресурсами:
@@ -112,8 +110,6 @@ author: aymericzip
 - Svelte: [Список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Список библиотек и инструментов i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Заключение
 
 **Значение i18n** является основополагающей концепцией для любого современного цифрового бизнеса, стремящегося к глобальному влиянию. Это далеко не просто причудливая техническая аббревиатура для слова "интернационализация", i18n представляет собой техническую архитектуру, необходимую для бесшовной адаптации вашего программного обеспечения к различным языкам, культурам и региональным стандартам.