@intlayer/docs 6.1.5 → 6.1.6

package/docs/pt/intlayer_with_vite+preact.md

@@ -1056,38 +1056,38 @@ const App = () => (
 module.exports = App;
 ```
 
-Em paralelo, você também pode usar o `intlayerMiddlewarePlugin` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o locale atual com base na URL e definirá o cookie de locale apropriado. Se nenhum locale for especificado, o plugin determinará o locale mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum locale for detectado, ele redirecionará para o locale padrão.
+Em paralelo, você também pode usar o `intlayerMiddleware` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o locale atual com base na URL e definirá o cookie de locale apropriado. Se nenhum locale for especificado, o plugin determinará o locale mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum locale for detectado, ele redirecionará para o locale padrão.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const preact = require("@preact/preset-vite");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1631,9 +1631,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 O Intlayer usa a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Garanta que sua configuração do TypeScript inclua os tipos gerados automaticamente.
 

package/docs/pt/intlayer_with_vite+react.md

@@ -1018,38 +1018,38 @@ const App = () => (
 );
 ```
 
-Paralelamente, você também pode usar o `intlayerMiddlewarePlugin` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.
+Paralelamente, você também pode usar o `intlayerMiddleware` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const react = require("@vitejs/plugin-react-swc");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1583,9 +1583,9 @@ Ao integrar este componente `Link` em toda a sua aplicação, você mantém uma
 
 O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e tornar sua base de código mais robusta.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Certifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.
 

package/docs/pt/intlayer_with_vite+vue.md

@@ -670,46 +670,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-Paralelamente, você também pode usar o `intlayerMiddlewarePlugin` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.
+Paralelamente, você também pode usar o `intlayerMiddleware` para adicionar roteamento no lado do servidor à sua aplicação. Este plugin detectará automaticamente o idioma atual com base na URL e definirá o cookie de idioma apropriado. Se nenhum idioma for especificado, o plugin determinará o idioma mais adequado com base nas preferências de idioma do navegador do usuário. Se nenhum idioma for detectado, ele redirecionará para o idioma padrão.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 

package/docs/pt/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Extensão Oficial do VS Code
-description: Aprenda a usar a extensão Intlayer no VS Code para aprimorar seu fluxo de trabalho de desenvolvimento. Navegue rapidamente entre conteúdos localizados e gerencie seus dicionários de forma eficiente.
+description: Aprenda a usar a extensão Intlayer no VS Code para melhorar seu fluxo de trabalho de desenvolvimento. Navegue rapidamente entre conteúdos localizados e gerencie seus dicionários de forma eficiente.
 keywords:
   - Extensão VS Code
   - Intlayer
@@ -21,94 +21,38 @@ slugs:
 
 ## Visão Geral
 
-[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) é a extensão oficial do Visual Studio Code para **Intlayer**, projetada para melhorar a experiência do desenvolvedor ao trabalhar com conteúdo localizado em seus projetos.
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) é a extensão oficial do Visual Studio Code para o **Intlayer**, projetada para melhorar a experiência do desenvolvedor ao trabalhar com conteúdo localizado em seus projetos.
 
-![Extensão Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Extensão Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Link da extensão: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funcionalidades
 
-### Navegação Instantânea
+![Preencher dicionários](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Suporte a Ir para Definição** – Use `⌘ + Clique` (Mac) ou `Ctrl + Clique` (Windows/Linux) em uma chave `useIntlayer` para abrir instantaneamente o arquivo de conteúdo correspondente.  
-**Integração Fluida** – Funciona perfeitamente com projetos **react-intlayer** e **next-intlayer**.  
-**Suporte Multilíngue** – Suporta conteúdo localizado em diferentes idiomas.  
-**Integração com VS Code** – Integra-se suavemente com a navegação e a paleta de comandos do VS Code.
+- **Navegação Instantânea** – Vá rapidamente para o arquivo de conteúdo correto ao clicar em uma chave `useIntlayer`.
+- **Preencher Dicionários** – Preencha dicionários com conteúdo do seu projeto.
 
-### Comandos de Gerenciamento de Dicionários
+![Listar comandos](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gerencie seus dicionários de conteúdo diretamente do VS Code:
+- **Acesso fácil aos comandos do Intlayer** – Construir, enviar, puxar, preencher e testar dicionários de conteúdo com facilidade.
 
-- **Construir Dicionários** – Gere arquivos de conteúdo com base na estrutura do seu projeto.
-- **Enviar Dicionários** – Faça upload do conteúdo mais recente do dicionário para o seu repositório.
-- **Puxar Dicionários** – Sincronize o conteúdo mais recente do dicionário do seu repositório para o seu ambiente local.
-- **Preencher Dicionários** – Popule os dicionários com conteúdo do seu projeto.
-- **Testar Dicionários** – Identifique traduções faltantes ou incompletas.
+![Criar arquivo de conteúdo](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Gerador de Declaração de Conteúdo
+- **Gerador de Declaração de Conteúdo** – Criar arquivos de conteúdo de dicionário em vários formatos (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Gere facilmente arquivos de dicionário estruturados em diferentes formatos:
+![Testar dicionários](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Se você estiver trabalhando em um componente, ele gerará o arquivo `.content.{ts,tsx,js,jsx,mjs,cjs,json}` para você.
+- **Testar Dicionários** – Testar dicionários para traduções ausentes.
 
-Exemplo de componente:
+![Reconstruir dicionário](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Mantenha seus dicionários atualizados** – Mantenha seus dicionários atualizados com o conteúdo mais recente do seu projeto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Arquivo gerado no formato TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Formatos disponíveis:
-
-- **TypeScript (`.ts`)**
-- **ES Module (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Aba Intlayer (Barra de Atividades)
+![Aba Intlayer (Barra de Atividades)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Abra a aba Intlayer clicando no ícone do Intlayer na Barra de Atividades do VS Code. Ela contém duas visualizações:
-
-- **Pesquisar**: Uma barra de pesquisa ao vivo para filtrar rapidamente os dicionários e seu conteúdo. Digitar atualiza os resultados instantaneamente.
-- **Dicionários**: Uma visualização em árvore dos seus ambientes/projetos, chaves dos dicionários e os arquivos que contribuem com entradas. Você pode:
-  - Clicar em um arquivo para abri-lo no editor.
-  - Usar a barra de ferramentas para executar ações: Build, Pull, Push, Fill, Refresh, Test e Create Dictionary File.
-  - Usar o menu de contexto para ações específicas do item:
-    - Em um dicionário: Pull ou Push
-    - Em um arquivo: Fill Dictionary
-  - Quando você alternar de editor, a árvore revelará o arquivo correspondente se ele pertencer a um dicionário.
-
-## Instalação
-
-Você pode instalar o **Intlayer** diretamente no Marketplace do VS Code:
-
-1. Abra o **VS Code**.
-2. Vá para o **Marketplace de Extensões**.
-3. Pesquise por **"Intlayer"**.
-4. Clique em **Instalar**.
+- **Aba Intlayer (Barra de Atividades)** – Navegue e pesquise dicionários em uma aba lateral dedicada com barra de ferramentas e ações de contexto (Construir, Puxar, Enviar, Preencher, Atualizar, Testar, Criar Arquivo).
 
 ## Uso
 
@@ -121,63 +65,58 @@ Você pode instalar o **Intlayer** diretamente no Marketplace do VS Code:
    const content = useIntlayer("app");
    ```
 
-3. **Command-click** (`⌘+Click` no macOS) ou **Ctrl+Click** (no Windows/Linux) na chave (ex.: `"app"`).
+3. **Clique com comando** (`⌘+Clique` no macOS) ou **Ctrl+Clique** (no Windows/Linux) na chave (por exemplo, `"app"`).
 4. O VS Code abrirá automaticamente o arquivo de dicionário correspondente, por exemplo, `src/app.content.ts`.
 
-### Gerenciando Dicionários de Conteúdo
-
 ### Aba Intlayer (Barra de Atividades)
 
-Use a aba lateral para navegar e gerenciar os dicionários:
+Use a aba lateral para navegar e gerenciar dicionários:
 
 - Abra o ícone do Intlayer na Barra de Atividades.
 - Em **Pesquisar**, digite para filtrar dicionários e entradas em tempo real.
 - Em **Dicionários**, navegue por ambientes, dicionários e arquivos. Use a barra de ferramentas para Construir, Puxar, Enviar, Preencher, Atualizar, Testar e Criar Arquivo de Dicionário. Clique com o botão direito para ações de contexto (Puxar/Enviar em dicionários, Preencher em arquivos). O arquivo atual do editor é revelado automaticamente na árvore quando aplicável.
 
-#### Construindo Dicionários
+### Acessando os comandos
 
-Gere todos os arquivos de conteúdo dos dicionários com:
+Você pode acessar os comandos a partir da **Paleta de Comandos**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Pesquise por **Construir Dicionários** e execute o comando.
-
-#### Enviando Dicionários
-
-Envie o conteúdo mais recente dos dicionários:
-
-1. Abra a **Paleta de Comandos**.
-2. Pesquise por **Enviar Dicionários**.
-3. Selecione os dicionários para enviar e confirme.
-
-#### Puxando Dicionários
+- **Construir Dicionários**
+- **Enviar Dicionários**
+- **Puxar Dicionários**
+- **Preencher Dicionários**
+- **Testar Dicionários**
+- **Criar Arquivo de Dicionário**
 
-Sincronize o conteúdo mais recente do dicionário:
+### Carregando Variáveis de Ambiente
 
-1. Abra a **Paleta de Comandos**.
-2. Procure por **Puxar Dicionários**.
-3. Escolha os dicionários para puxar.
+O Intlayer recomenda armazenar suas chaves de API de IA, assim como o ID e o segredo do cliente Intlayer, em variáveis de ambiente.
 
-#### Preenchendo Dicionários
+A extensão pode carregar variáveis de ambiente do seu espaço de trabalho para executar comandos do Intlayer com o contexto correto.
 
-Preencha os dicionários com conteúdo do seu projeto:
+- **Ordem de carregamento (por prioridade)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Não destrutivo**: valores existentes em `process.env` não são sobrescritos.
+- **Escopo**: os arquivos são resolvidos a partir do diretório base configurado (padrão é a raiz do espaço de trabalho).
 
-1. Abra a **Paleta de Comandos**.
-2. Procure por **Preencher Dicionários**.
-3. Execute o comando para popular os dicionários.
+#### Selecionando o ambiente ativo
 
-#### Testando Dicionários
+- **Paleta de Comandos**: abra a paleta e execute `Intlayer: Select Environment`, depois escolha o ambiente (por exemplo, `development`, `staging`, `production`). A extensão tentará carregar o primeiro arquivo disponível na lista de prioridade acima e mostrará uma notificação como “Loaded env from .env.<env>.local”.
+- **Configurações**: vá para `Settings → Extensions → Intlayer` e defina:
+  - **Environment**: o nome do ambiente usado para resolver arquivos `.env.<env>*`.
+  - (Opcional) **Env File**: um caminho explícito para um arquivo `.env`. Quando fornecido, ele tem precedência sobre a lista inferida.
 
-Valide os dicionários e encontre traduções faltantes:
+#### Monorepos e diretórios personalizados
 
-1. Abra a **Paleta de Comandos**.
-2. Procure por **Testar Dicionários**.
-3. Revise os problemas relatados e corrija conforme necessário.
+Se os seus arquivos `.env` estiverem fora da raiz do espaço de trabalho, defina o **Diretório Base** em `Configurações → Extensões → Intlayer`. O carregador irá procurar arquivos `.env` relativos a esse diretório.
 
 ## Histórico do Documento
 
-| Versão | Data       | Alterações        |
-| ------ | ---------- | ----------------- |
-| 5.5.10 | 2025-06-29 | Histórico inicial |
+| Versão | Data       | Alterações                                 |
+| ------ | ---------- | ------------------------------------------ |
+| 6.1.5  | 2025-09-30 | Adicionado gif de demonstração             |
+| 6.1.0  | 2025-09-24 | Adicionada seção de seleção de ambiente    |
+| 6.0.0  | 2025-09-22 | Aba Intlayer / Comandos Preencher & Testar |
+| 5.5.10 | 2025-06-29 | Histórico inicial                          |

package/docs/ru/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Сделать компонент многоязычным (i18n) в React и Next.js
+description: Узнайте, как объявлять и получать локализованный контент для создания многоязычного компонента React или Next.js с помощью Intlayer.
+keywords:
+  - i18n
+  - компонент
+  - react
+  - многоязычный
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Как сделать компонент многоязычным (i18n) с Intlayer
+
+В этом руководстве показаны минимальные шаги для создания многоязычного UI-компонента в двух популярных конфигурациях:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Сначала вы объявите свой контент, затем получите его в своем компоненте.
+
+## 1) Объявите ваш контент (общий для React и Next.js)
+
+Создайте файл объявления контента рядом с вашим компонентом. Это позволяет держать переводы близко к месту их использования и обеспечивает типобезопасность.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+Также поддерживается JSON, если вы предпочитаете конфигурационные файлы.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Получение вашего контента
+
+### Случай A — React приложение (Vite/SPA)
+
+Стандартный подход: используйте `useIntlayer` для получения по ключу. Это позволяет компонентам оставаться легкими и типизированными.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Серверный рендеринг или использование вне провайдера: используйте `react-intlayer/server` и передавайте явный `locale` при необходимости.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Альтернатива: `useDictionary` может читать весь объявленный объект, если вы предпочитаете размещать структуру непосредственно в месте вызова.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Случай B — Next.js (App Router)
+
+Предпочитайте серверные компоненты для безопасности данных и производительности. Используйте `useIntlayer` из `next-intlayer/server` в серверных файлах и `useIntlayer` из `next-intlayer` в клиентских компонентах.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Совет: Для метаданных страницы и SEO вы также можете получать контент с помощью `getIntlayer` и генерировать многоязычные URL с помощью `getMultilingualUrls`.
+
+## Почему подход Intlayer к компонентам лучший
+
+- **Совмещение**: Объявления контента находятся рядом с компонентами, что снижает рассогласование и улучшает повторное использование в дизайн-системах.
+- **Типобезопасность**: Ключи и структуры строго типизированы; отсутствующие переводы выявляются на этапе сборки, а не во время выполнения.
+- **Server-first**: Работает нативно в серверных компонентах для лучшей безопасности и производительности; клиентские хуки остаются эргономичными.
+- **Tree-shaking**: В бандл включается только контент, используемый компонентом, что позволяет сохранять размер payload небольшим в больших приложениях.
+- **DX и инструменты**: Встроенный middleware, помощники SEO и опциональные Визуальный редактор/AI-переводы упрощают повседневную работу.
+
+Смотрите сравнения и шаблоны в обзоре, ориентированном на Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Связанные руководства и ссылки
+
+- Настройка React (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Настройка Next.js: https://intlayer.org/doc/environment/nextjs
+- Почему Intlayer вместо next-intl или next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Эти страницы включают полную настройку, провайдеры, маршрутизацию и помощники SEO.

package/docs/ru/intlayer_with_angular.md

@@ -664,9 +664,9 @@ export const appConfig: ApplicationConfig = {
 
 Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать ваш код более надежным.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Убедитесь, что ваша конфигурация TypeScript включает автогенерируемые типы.