@intlayer/docs 7.0.4-canary.0 → 7.0.4

package/blog/pt/intlayer_with_react-intl.md

@@ -1,327 +1,123 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer e react-intl
-description: Integre Intlayer com react-intl para um aplicativo React
+updatedAt: 2025-10-29
+title: Como automatizar suas traduções JSON do react-intl usando Intlayer
+description: Automatize suas traduções JSON com Intlayer e react-intl para uma internacionalização aprimorada em aplicações React.
 keywords:
   - react-intl
   - Intlayer
   - Internacionalização
-  - Blogumentação
-  - Next.js
+  - Blog
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Mudança para o plugin syncJSON
 ---
 
-# Internationalização do React (i18n) com **react-intl** e Intlayer
+# Como automatizar suas traduções JSON do react-intl usando Intlayer
 
-Este guia mostra como integrar **Intlayer** com **react-intl** para gerenciar traduções em uma aplicação React. Você declarará seu conteúdo traduzível com o Intlayer e, em seguida, consumirá essas mensagens com **react-intl**, uma biblioteca popular do ecossistema [FormatJS](https://formatjs.io/docs/react-intl).
+## O que é o Intlayer?
 
-## Visão Geral
+**Intlayer** é uma biblioteca inovadora e de código aberto para internacionalização, projetada para resolver as limitações das soluções tradicionais de i18n. Ela oferece uma abordagem moderna para o gerenciamento de conteúdo em aplicações React.
 
-- **Intlayer** permite que você armazene traduções em arquivos de declaração de conteúdo **de nível de componente** (JSON, JS, TS, etc.) dentro do seu projeto.
-- **react-intl** fornece componentes e hooks do React (como `<FormattedMessage>` e `useIntl()`) para exibir strings localizadas.
+Veja uma comparação concreta com react-intl em nosso post no blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md).
 
-Ao configurar o Intlayer para **exportar** traduções em um formato **compatível com react-intl**, você pode automaticamente **gerar** e **atualizar** os arquivos de mensagem que `<IntlProvider>` (do react-intl) requer.
+## Por que combinar Intlayer com react-intl?
 
----
+Embora o Intlayer forneça uma excelente solução i18n independente (veja nosso [guia de integração com React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+react.md)), você pode querer combiná-lo com react-intl por várias razões:
 
-## Por Que Usar Intlayer com react-intl?
+1. **Base de código existente**: Você possui uma implementação estabelecida do react-intl e deseja migrar gradualmente para a melhor experiência de desenvolvedor do Intlayer.
+2. **Requisitos legados**: Seu projeto requer compatibilidade com plugins ou fluxos de trabalho existentes do react-intl.
+3. **Familiaridade da equipe**: Sua equipe está confortável com o react-intl, mas deseja um melhor gerenciamento de conteúdo.
 
-1. **Declarações de Conteúdo por Componente**  
-   Os arquivos de declaração de conteúdo do Intlayer podem viver ao lado dos seus componentes React, prevenindo traduções “órfãs” se os componentes forem movidos ou removidos. Por exemplo:
+**Para isso, o Intlayer pode ser implementado como um adaptador para o react-intl, ajudando a automatizar suas traduções JSON em pipelines CLI ou CI/CD, testar suas traduções e muito mais.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Declaração de conteúdo do Intlayer
-               └── index.tsx          # Componente React
-   ```
+Este guia mostra como aproveitar o sistema superior de declaração de conteúdo do Intlayer, mantendo a compatibilidade com o react-intl.
 
-2. **Traduções Centralizadas**  
-   Cada arquivo de declaração de conteúdo coleta todas as traduções necessárias para um componente. Isso é particularmente útil em projetos TypeScript: traduções ausentes podem ser descobertas no **tempo de compilação**.
+## Índice
 
-3. **Construção e Regeneração Automática**  
-   Sempre que você adicionar ou atualizar traduções, o Intlayer regenera os arquivos JSON de mensagens. Você pode então passá-los para o `<IntlProvider>` do react-intl.
+<TOC/>
 
----
+## Guia passo a passo para configurar o Intlayer com react-intl
 
-## Instalação
+### Passo 1: Instalar dependências
 
-Em um projeto React típico, instale o seguinte:
+Instale os pacotes necessários:
 
-```bash
-# com npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# com yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# com pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Por Que Esses Pacotes?
+**Descrição dos pacotes:**
 
-- **intlayer**: CLI e biblioteca principal que escaneia por declarações de conteúdo, as mescla e constrói saídas de dicionário.
-- **react-intl**: A biblioteca principal do FormatJS que fornece `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` e outros princípios de internacionalização.
+- **intlayer**: Biblioteca principal para gerenciamento de internacionalização, declaração de conteúdo e construção
+- **@intlayer/sync-json-plugin**: Plugin para exportar declarações de conteúdo do Intlayer para o formato JSON compatível com react-intl
 
-> Se você ainda não tiver o React instalado, precisará dele também (`react` e `react-dom`).
+### Passo 2: Implemente o plugin Intlayer para encapsular o JSON
 
-## Configurando o Intlayer para Exportar Mensagens do react-intl
+Crie um arquivo de configuração do Intlayer para definir os seus locais suportados:
 
-Na raiz do seu projeto, crie **`intlayer.config.ts`** (ou `.js`, `.mjs`, `.cjs`) assim:
+**Se você também quiser exportar dicionários JSON para react-intl**, adicione o plugin `syncJSON`:
 
-```typescript title="intlayer.config.ts"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
 const config: IntlayerConfig = {
   internationalization: {
-    // Adicione quantos locais desejar
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Indica ao Intlayer para gerar arquivos de mensagens para o react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // O diretório onde o Intlayer escreverá seus arquivos JSON de mensagens
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Nota**: Para outras extensões de arquivo (`.mjs`, `.cjs`, `.js`), consulte a [documentação do Intlayer](https://intlayer.org/pt/doc/concept/configuration) para detalhes de uso.
-
----
-
-## Criando Suas Declarações de Conteúdo do Intlayer
-
-O Intlayer escaneia seu código (por padrão, sob `./src`) em busca de arquivos que correspondam a `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Aqui está um exemplo de **TypeScript**:
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" se torna a chave de mensagem de nível superior no seu arquivo JSON do react-intl
-  key: "meu-componente",
-
-  content: {
-    // Cada chamada a t() declara um campo traduzível
-    helloWorld: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    description: t({
-      en: "This is a description",
-      fr: "Ceci est une description",
-      es: "Esta es una descripción",
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
     }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-Se preferir JSON ou diferentes variantes JS (`.cjs`, `.mjs`), a estrutura é em grande parte a mesma , veja [documentação do Intlayer sobre declaração de conteúdo](https://intlayer.org/pt/doc/concept/content).
-
----
-
-## Construindo as Mensagens do react-intl
-
-Para gerar os arquivos JSON de mensagens reais para **react-intl**, execute:
-
-```bash
-# com npm
-npx intlayer dictionaries build
-
-# com yarn
-yarn intlayer build
-
-# com pnpm
-pnpm intlayer build
-```
-
-Isso escaneia todos os arquivos `*.content.*`, os compila e grava os resultados no diretório especificado no seu **`intlayer.config.ts`** , neste exemplo, `./react-intl/messages`.  
-Uma saída típica pode parecer com:
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-Cada arquivo é um objeto JSON cujas **chaves de nível superior** correspondem a cada **`content.key`** das suas declarações. As **subchaves** (como `helloWorld`) refletem as traduções declaradas dentro daquele item de conteúdo.
-
-Por exemplo, o **en.json** pode parecer assim:
-
-```json
-{
-  "meu-componente": {
-    "helloWorld": "Hello World",
-    "description": "This is a description"
-  }
-}
-```
-
----
-
-## Inicializando o react-intl na Sua Aplicação React
-
-### 1. Carregue as Mensagens Geradas
-
-Onde você configura o componente raiz da sua aplicação (por exemplo, `src/main.tsx` ou `src/index.tsx`), você precisará:
-
-1. **Importar** os arquivos de mensagem gerados (estaticamente ou dinamicamente).
-2. **Fornecer** a eles para o `<IntlProvider>` do `react-intl`.
-
-Uma abordagem simples é importá-los **estaticamente**:
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// Importar os arquivos JSON da saída de compilação.
-// Alternativamente, você pode importar dinamicamente com base no idioma escolhido pelo usuário.
-import en from "../react-intl/messages/en.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// Se você tiver um mecanismo para detectar o idioma do usuário, defina-o aqui.
-// Para simplicidade, vamos escolher o inglês.
-const locale = "en";
-
-// Compilar mensagens em um objeto (ou selecioná-las dinamicamente)
-const messagesRecord: Record<string, Record<string, any>> = {
-  en,
-  fr,
-  es,
+  ],
 };
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
-      <App />
-    </IntlProvider>
-  </React.StrictMode>
-);
-```
-
-> **Dica**: Para projetos reais, você pode:
->
-> - Carregar dinamicamente as mensagens JSON em tempo de execução.
-> - Usar detecção de localidade baseada em ambiente, no navegador ou na conta do usuário.
-
-### 2. Usar `<FormattedMessage>` ou `useIntl()`
-
-Uma vez que suas mensagens estejam carregadas no `<IntlProvider>`, qualquer componente filho pode usar react-intl para acessar strings localizadas. Existem duas abordagens principais:
-
-- **Componente `<FormattedMessage>`**
-- **Hook `useIntl()`**
-
----
-
-## Usando Traduções em Componentes React
-
-### Abordagem A: `<FormattedMessage>`
-
-Para uso rápido em linha:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-export default function MyComponent() {
-  return (
-    <div>
-      <h1>
-        {/* “meu-componente.helloWorld” referencia a chave de en.json, fr.json, etc. */}
-        <FormattedMessage id="meu-componente.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="meu-componente.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> A prop **`id`** em `<FormattedMessage>` deve corresponder à **chave de nível superior** (`meu-componente`) mais quaisquer subchaves (`helloWorld`).
-
-### Abordagem B: `useIntl()`
-
-Para um uso mais dinâmico:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { useIntl } from "react-intl";
-
-export default function MyComponent() {
-  const intl = useIntl();
-
-  return (
-    <div>
-      <h1>{intl.formatMessage({ id: "meu-componente.helloWorld" })}</h1>
-      <p>{intl.formatMessage({ id: "meu-componente.description" })}</p>
-    </div>
-  );
-}
+export default config;
 ```
 
-Ambas as abordagens são válidas , escolha o estilo que melhor se adequa ao seu aplicativo.
+O plugin `syncJSON` irá automaticamente encapsular o JSON. Ele irá ler e escrever os arquivos JSON sem alterar a arquitetura do conteúdo.
 
----
+Se você quiser fazer coexistir esse JSON com arquivos de declaração de conteúdo do Intlayer (arquivos `.content`), o Intlayer procederá da seguinte forma:
 
-## Atualizando ou Adicionando Novas Traduções
+    1. carregar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo e transformá-los em um dicionário do Intlayer.
 
-1. **Adicione ou modifique** o conteúdo em qualquer arquivo `*.content.*`.
-2. Execute novamente `intlayer build` para regenerar os arquivos JSON sob `./react-intl/messages`.
-3. O React (e o react-intl) buscará as atualizações da próxima vez que você reconstruir ou recarregar sua aplicação.
+2. se houver conflitos entre o JSON e os arquivos de declaração de conteúdo, o Intlayer irá processar a mesclagem de todos esses dicionários. Dependendo da prioridade dos plugins e da do arquivo de declaração de conteúdo (todos são configuráveis).
 
----
+Se alterações forem feitas usando o CLI para traduzir o JSON, ou usando o CMS, o Intlayer atualizará o arquivo JSON com as novas traduções.
 
-## Integração com TypeScript (Opcional)
+Para ver mais detalhes sobre o plugin `syncJSON`, por favor consulte a [documentação do plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/plugins/sync-json.md).
 
-Se você estiver usando TypeScript, o Intlayer pode **gerar definições de tipo** para suas traduções.
+## Configuração do Git
 
-- Certifique-se de que o `tsconfig.json` inclua sua pasta `types` (ou qualquer pasta de saída que o Intlayer gera) na matriz `"include"`.
+É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Ignorar arquivos gerados pelo Intlayer
+.intlayer
 ```
 
-Os tipos gerados podem ajudar a detectar traduções ausentes ou chaves inválidas em seus componentes React no tempo de compilação.
-
----
-
-## Configuração do Git
+Esses arquivos podem ser regenerados durante o seu processo de build e não precisam ser commitados no controle de versão.
 
-É comum **excluir** os artefatos internos de construção do Intlayer do controle de versão. No seu `.gitignore`, adicione:
+### Extensão VS Code
 
-```plaintext
-# Ignorar artefatos de construção do intlayer
-.intlayer
-react-intl
-```
+Para uma melhor experiência de desenvolvimento, instale a **Extensão oficial Intlayer para VS Code**:
 
-Dependendo do seu fluxo de trabalho, você pode também querer ignorar ou commitar os dicionários finais em `./react-intl/messages`. Se seu pipeline CI/CD os regenerar, você pode ignorá-los com segurança; caso contrário, comite-os se precisar deles para implantações em produção.
+[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/ru/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer и i18next
-description: Интегрируйте Intlayer с i18next для оптимальной интернационализации. Сравните два фреймворка и узнайте, как настроить их вместе.
+updatedAt: 2025-10-29
+title: Как автоматизировать ваши JSON-переводы i18next с помощью Intlayer
+description: Автоматизируйте ваши JSON-переводы с помощью Intlayer и i18next для улучшенной интернационализации в JavaScript-приложениях.
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,111 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - Миграция
+  - Интеграция
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Переход на плагин syncJSON
 ---
 
-# Интернационализация с Intlayer и i18next
+# Как автоматизировать ваши JSON-переводы i18next с помощью Intlayer
 
-i18next - это open-source фреймворк интернационализации (i18n), разработанный для JavaScript-приложений. Он широко используется для управления переводами, локализацией и переключением языков в программных проектах. Однако у него есть некоторые ограничения, которые могут усложнить масштабируемость и разработку.
+## Что такое Intlayer?
 
-Intlayer - это другой фреймворк интернационализации, который устраняет эти ограничения, предлагая более гибкий подход к декларации и управлению контентом. Давайте рассмотрим некоторые ключевые отличия между i18next и Intlayer, и как настроить оба для оптимальной интернационализации.
+**Intlayer** — это инновационная, открытая библиотека для интернационализации, созданная для устранения недостатков традиционных решений i18n. Она предлагает современный подход к управлению контентом в JavaScript-приложениях.
 
-## Intlayer против i18next: ключевые отличия
+Смотрите конкретное сравнение с i18next в нашем блоге [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md).
 
-### 1. Декларация контента
+## Почему стоит сочетать Intlayer с i18next?
 
-С помощью i18next словари перевода должны быть объявлены в конкретной папке, что может усложнить масштабируемость приложения. В отличие от этого, Intlayer позволяет объявлять контент в той же директории, что и ваш компонент. Это имеет несколько преимуществ:
+Хотя Intlayer предоставляет отличное самостоятельное решение для i18n (см. наше руководство по интеграции с Next.js [Next.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_nextjs_16.md)), вы можете захотеть сочетать его с i18next по нескольким причинам:
 
-- **Упрощенное редактирование контента**: Пользователям не нужно искать правильный словарь для редактирования, что снижает вероятность ошибок.
-- **Автоматическая адаптация**: Если компонент меняет местоположение или удаляется, Intlayer обнаруживает это и адаптируется автоматически.
+1. **Существующая кодовая база**: У вас уже есть реализованная система i18next, и вы хотите постепенно перейти на улучшенный опыт разработки с Intlayer.
+2. **Требования наследия**: Ваш проект требует совместимости с существующими плагинами или рабочими процессами i18next.
+3. **Знакомство команды**: Ваша команда привыкла к i18next, но хочет улучшить управление контентом.
 
-### 2. Сложность конфигурации
+**Для этого Intlayer может быть реализован как адаптер для i18next, чтобы помочь автоматизировать ваши JSON-переводы в CLI или CI/CD пайплайнах, тестировать переводы и многое другое.**
 
-Настройка i18next может быть сложной, особенно при интеграции с серверными компонентами или настройке middleware для таких фреймворков, как Next.js. Intlayer упрощает этот процесс, предлагая более простую настройку.
+В этом руководстве показано, как использовать превосходную систему декларации контента Intlayer, сохраняя совместимость с i18next.
 
-### 3. Согласованность переводов словарей
+## Содержание
 
-Обеспечение согласованности словарей перевода на разных языках может быть проблематичным с i18next. Эта несогласованность может привести к сбоям приложения, если не обрабатывать это должным образом. Intlayer решает эту проблему, вводя ограничения на переведенный контент, что гарантирует, что ни один перевод не будет пропущен, и что переведенный контент будет точным.
+<TOC/>
 
-### 4. Интеграция с TypeScript
+## Пошаговое руководство по настройке Intlayer с i18next
 
-Intlayer предлагает лучшую интеграцию с TypeScript, позволяя автоматически предлагать контент в вашем коде, тем самым повышая эффективность разработки.
+### Шаг 1: Установка зависимостей
 
-### 5. Обмен контентом между приложениями
+Установите необходимые пакеты:
 
-Intlayer облегчает обмен файлами декларации контента между несколькими приложениями и общими библиотеками. Эта функция упрощает поддержку согласованных переводов в более крупном кодовом базисе.
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-## Как сгенерировать словари i18next с Intlayer
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-### Настройка Intlayer для экспорта словарей i18next
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> Важные заметки
+**Описание пакетов:**
 
-> Экспорт словарей i18next в настоящее время находится в бета-версии и не гарантирует совместимость 1: 1 с другими фреймворками. Рекомендуется придерживаться настройки, основанной на Intlayer, чтобы минимизировать проблемы.
+- **intlayer**: Основная библиотека для управления интернационализацией, декларации контента и сборки
+- **@intlayer/sync-json-plugin**: Плагин для экспорта деклараций контента Intlayer в JSON-формат, совместимый с i18next
 
-Чтобы экспортировать словари i18next, вам нужно соответствующим образом настроить Intlayer. Ниже приведен пример того, как настроить Intlayer для экспорта как словарей Intlayer, так и i18next.
+### Шаг 2: Реализация плагина Intlayer для обертки JSON
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+Создайте файл конфигурации Intlayer для определения поддерживаемых локалей:
 
-const config: IntlayerConfig = {
-  content: {
-    // Укажите, что Intlayer будет экспортировать как словари Intlayer, так и i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Относительный путь от корня проекта к директории, куда будут экспортироваться словари i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+**Если вы хотите также экспортировать JSON-словари для i18next**, добавьте плагин `syncJSON`:
 
-export default config;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Укажите, что Intlayer будет экспортировать как словари Intlayer, так и i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Относительный путь от корня проекта к директории, куда будут экспортироваться словари i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Укажите, что Intlayer будет экспортировать как словари Intlayer, так и i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Относительный путь от корня проекта к директории, куда будут экспортироваться словари i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
-
-module.exports = config;
-```
+Плагин `syncJSON` автоматически обернет JSON. Он будет читать и записывать JSON-файлы без изменения архитектуры контента.
 
-Включив 'i18next' в конфигурацию, Intlayer генерирует специальные словари i18next в дополнение к словарям Intlayer. Обратите внимание, что удаление 'intlayer' из конфигурации может нарушить совместимость с React-Intlayer или Next-Intlayer.
+Если вы хотите, чтобы JSON сосуществовал с файлами декларации контента Intlayer (`.content` файлы), Intlayer будет работать следующим образом:
 
-### Импортирование словарей в вашу конфигурацию i18next
+    1. загрузит как JSON, так и файлы декларации контента и преобразует их в словарь Intlayer.
+    2. если возникают конфликты между JSON и файлами декларации контента, Intlayer выполнит слияние всех словарей. В зависимости от приоритета плагинов и файла декларации контента (все настраивается).
 
-Чтобы импортировать сгенерированные словари в вашу конфигурацию i18next, вы можете использовать 'i18next-resources-to-backend'. Вот пример того, как импортировать ваши словари i18next:
+Если изменения вносятся с помощью CLI для перевода JSON или через CMS, Intlayer обновит JSON-файл с новыми переводами.
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+## Конфигурация Git
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Рекомендуется игнорировать автоматически сгенерированные файлы Intlayer:
 
-i18next
-  // Ваша конфигурация i18next
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Игнорировать файлы, сгенерированные Intlayer
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
-
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Эти файлы могут быть восстановлены во время процесса сборки и не требуют добавления в систему контроля версий.
 
-i18next
-  // Ваша конфигурация i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+### Расширение VS Code
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+Для улучшения опыта разработчика установите официальное **расширение Intlayer для VS Code**:
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next
-  // Ваша конфигурация i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[Установить из магазина расширений VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)