@intlayer/docs 7.0.4-canary.0 → 7.0.5

package/blog/ru/intlayer_with_react-intl.md

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer и react-intl
-description: Интегрируйте Intlayer с react-intl для React-приложения
+updatedAt: 2025-10-29
+title: Как автоматизировать ваши JSON-переводы react-intl с помощью Intlayer
+description: Автоматизируйте ваши JSON-переводы с помощью Intlayer и react-intl для улучшенной интернационализации в React-приложениях.
 keywords:
   - react-intl
   - Intlayer
   - Интернационализация
-  - Документация
-  - Next.js
+  - Блог
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Переход на плагин syncJSON
 ---
 
-# React Internationalization (i18n) с **react-intl** и Intlayer
+# Как автоматизировать ваши JSON-переводы react-intl с помощью Intlayer
 
-Этот гид показывает, как интегрировать **Intlayer** с **react-intl** для управления переводами в приложении React. Вы будете объявлять ваши переводимые данные с помощью Intlayer, а затем использовать эти сообщения с **react-intl**, популярной библиотекой из экосистемы [FormatJS](https://formatjs.io/docs/react-intl).
+## Что такое Intlayer?
 
-## Обзор
+**Intlayer** — это инновационная, открытая библиотека интернационализации, разработанная для устранения недостатков традиционных решений i18n. Она предлагает современный подход к управлению контентом в React-приложениях.
 
-- **Intlayer** позволяет хранить переводы в **файлах декларации контента** уровня компонента (JSON, JS, TS и т.д.) внутри вашего проекта.
-- **react-intl** предоставляет компоненты React и хуки (такие как `<FormattedMessage>` и `useIntl()`) для отображения локализованных строк.
+Смотрите конкретное сравнение с react-intl в нашем блоге [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md).
 
-Настраивая Intlayer на **экспорт** переводов в **формат, совместимый с react-intl**, вы можете автоматически **генерировать** и **обновлять** файлы сообщений, которые требуется `<IntlProvider>` (из react-intl).
+## Почему стоит сочетать Intlayer с react-intl?
 
----
+Хотя Intlayer предоставляет отличное самостоятельное решение для i18n (см. наше [руководство по интеграции с React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_vite+react.md)), вы можете захотеть сочетать его с react-intl по нескольким причинам:
 
-## Почему использовать Intlayer с react-intl?
+1. **Существующая кодовая база**: У вас уже есть реализованная система react-intl, и вы хотите постепенно перейти на улучшенный опыт разработчика с Intlayer.
+2. **Требования наследия**: Ваш проект требует совместимости с существующими плагинами или рабочими процессами react-intl.
+3. **Знакомство команды**: Ваша команда привыкла к react-intl, но хочет улучшить управление контентом.
 
-1. **Декларации контента на уровне компонента**  
-   Файлы декларации контента Intlayer могут находиться рядом с вашими компонентами React, предотвращая «сиротские» переводы, если компоненты перемещаются или удаляются. Например:
+**Для этого Intlayer может быть реализован как адаптер для react-intl, чтобы помочь автоматизировать ваши JSON-переводы в CLI или CI/CD пайплайнах, тестировать переводы и многое другое.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Декларация контента Intlayer
-               └── index.tsx          # Компонент React
-   ```
+Это руководство покажет вам, как использовать превосходную систему декларации контента Intlayer, сохраняя при этом совместимость с react-intl.
 
-2. **Централизованные переводы**  
-   Каждый файл декларации контента собирает все переводы, необходимые для компонента. Это особенно полезно в проектах TypeScript: отсутствующие переводы можно выявить во время **компиляции**.
+## Содержание
 
-3. **Автоматическая сборка и регенерация**  
-   Каждый раз, когда вы добавляете или обновляете переводы, Intlayer регенерирует файлы сообщений JSON. Затем вы можете передать их в `<IntlProvider>` от react-intl.
+<TOC/>
 
----
+## Пошаговое руководство по настройке Intlayer с react-intl
 
-## Установка
+### Шаг 1: Установка зависимостей
 
-В типичном проекте React установите следующее:
+Установите необходимые пакеты:
 
-```bash
-# с npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# с yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# с pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Почему эти пакеты?
+**Описание пакетов:**
 
-- **intlayer**: Основная CLI и библиотека, которая сканирует декларации контента, объединяет их и создает выходные словари.
-- **react-intl**: Основная библиотека от FormatJS, которая предоставляет `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` и другие примитивы интернационализации.
+- **intlayer**: Основная библиотека для управления интернационализацией, декларации контента и сборки
+- **@intlayer/sync-json-plugin**: Плагин для экспорта деклараций контента Intlayer в JSON-формат, совместимый с react-intl
 
-> Если у вас еще не установлен React, вам тоже нужно это сделать (`react` и `react-dom`).
+### Шаг 2: Реализация плагина Intlayer для обёртки JSON
 
-## Настройка Intlayer для экспорта сообщений react-intl
+Создайте конфигурационный файл Intlayer для определения поддерживаемых локалей:
 
-В корне вашего проекта создайте **`intlayer.config.ts`** (или `.js`, `.mjs`, `.cjs`) следующим образом:
+**Если вы также хотите экспортировать JSON-словари для react-intl**, добавьте плагин `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: {
-    // Добавьте столько локалей, сколько хотите
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Указывает Intlayer на генерацию файлов сообщений для react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // Директория, в которую Intlayer будет записывать ваши файлы JSON сообщений
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Примечание**: Для других расширений файлов (`.mjs`, `.cjs`, `.js`) смотрите [документацию Intlayer](https://intlayer.org/ru/doc/concept/configuration) для получения деталей использования.
-
----
-
-## Создание деклараций контента Intlayer
-
-Intlayer сканирует вашу кодовую базу (по умолчанию, в `./src`) на наличие файлов, соответствующих `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Вот пример на **TypeScript**:
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" становится ключом верхнего уровня сообщения в вашем файле JSON react-intl
-  key: "my-component",
-
-  content: {
-    // Каждый вызов t() объявляет переводимое поле
-    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;
-```
-
-Если вы предпочитаете JSON или разные варианты JS (`.cjs`, `.mjs`), структура в значительной степени такая же , смотрите [документацию Intlayer по декларациям контента](https://intlayer.org/ru/doc/concept/content).
-
----
-
-## Сборка сообщений для react-intl
-
-Чтобы сгенерировать фактические файлы JSON сообщений для **react-intl**, выполните:
-
-```bash
-# с npm
-npx intlayer dictionaries build
-
-# с yarn
-yarn intlayer build
-
-# с pnpm
-pnpm intlayer build
-```
-
-Это сканирует все файлы `*.content.*`, компилирует их и записывает результаты в директорию, указанную в вашем **`intlayer.config.ts`** , в этом примере, `./react-intl/messages`.  
-Типичный вывод может выглядеть так:
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-Каждый файл является объектом JSON, верхние ключи которого соответствуют каждому **`content.key`** из ваших деклараций. Подключи (например, `helloWorld`) отражают переводы, объявленные в этом элементе контента.
-
-Например, **en.json** может выглядеть так:
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## Инициализация react-intl в вашем приложении React
-
-### 1. Загрузка сгенерированных сообщений
-
-Где вы настраиваете корневой компонент вашего приложения (например, `src/main.tsx` или `src/index.tsx`), вам нужно:
-
-1. **Импортировать** сгенерированные файлы сообщений (статически или динамически).
-2. **Передать** их в `<IntlProvider>` от `react-intl`.
-
-Простой подход , импортировать их **статически**:
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// Импортировать JSON файлы из выходных данных сборки.
-// Альтернатива: вы можете импортировать динамически в зависимости от выбранной локали пользователем.
-import en from "../react-intl/messages/en.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// Если у вас есть механизм для определения языка пользователя, установите его здесь.
-// Для простоты давайте выберем английский.
-const locale = "en";
-
-// Соберите сообщения в объекте (или выберите их динамически)
-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>
-);
-```
-
-> **Совет**: Для реальных проектов вы можете:
->
-> - Динамически загружать сообщения JSON во время выполнения.
-> - Использовать основанную на окружении, браузере или учетной записи пользователя детекцию локали.
-
-### 2. Используйте `<FormattedMessage>` или `useIntl()`
-
-Как только ваши сообщения загружены в `<IntlProvider>`, любой дочерний компонент может использовать react-intl для доступа к локализованным строкам. Есть два основных подхода:
-
-- **`<FormattedMessage>`** компонент
-- **`useIntl()`** хук
-
----
-
-## Использование переводов в компонентах React
-
-### Подход A: `<FormattedMessage>`
-
-Для быстрого использования в пределах строки:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-export default function MyComponent() {
-  return (
-    <div>
-      <h1>
-        {/* “my-component.helloWorld” ссылается на ключ из en.json, fr.json и т.д. */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> Проп в **`id`** в `<FormattedMessage>` должен соответствовать **ключу верхнего уровня** (`my-component`) плюс любым под-ключам (`helloWorld`).
-
-### Подход B: `useIntl()`
-
-Для более динамичного использования:
-
-```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: "my-component.helloWorld" })}</h1>
-      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
-    </div>
-  );
-}
+export default config;
 ```
 
-Оба подхода допустимы , выбирайте тот стиль, который лучше подходит вашему приложению.
-
----
+Плагин `syncJSON` автоматически обернет JSON. Он будет читать и записывать JSON-файлы без изменения архитектуры контента.
 
-## Обновление или добавление новых переводов
+Если вы хотите, чтобы JSON сосуществовал с файлами декларации контента intlayer (`.content` файлы), Intlayer будет работать следующим образом:
 
-1. **Добавьте или измените** контент в любом файле `*.content.*`.
-2. Повторно выполните `intlayer build`, чтобы регенерировать файлы JSON в `./react-intl/messages`.
-3. React (и react-intl) будут подбирать обновления в следующий раз, когда вы пересоберете или перезагрузите ваше приложение.
+    1. загрузит как JSON, так и файлы декларации контента и преобразует их в словарь intlayer.
+    2. если возникают конфликты между JSON и файлами декларации контента, Intlayer выполнит слияние всех словарей. В зависимости от приоритета плагинов и файла декларации контента (все настраивается).
 
----
+Если изменения вносятся с помощью CLI для перевода JSON или с использованием CMS, Intlayer обновит JSON-файл с новыми переводами.
 
-## Интеграция TypeScript (по желанию)
+Для получения дополнительной информации о плагине `syncJSON` обратитесь к [документации плагина syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/plugins/sync-json.md).
 
-Если вы используете TypeScript, Intlayer может **генерировать определения типов** для ваших переводов.
+## Конфигурация Git
 
-- Убедитесь, что `tsconfig.json` включает вашу папку `types` (или любую другую выходную папку, которую генерирует Intlayer) в массиве `"include"`.
+Рекомендуется игнорировать автоматически сгенерированные файлы Intlayer:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Игнорировать файлы, сгенерированные Intlayer
+.intlayer
 ```
 
-Сгенерированные типы могут помочь выявлять отсутствующие переводы или недействительные ключи в ваших компонентах React на этапе компиляции.
-
----
-
-## Конфигурация Git
+Эти файлы могут быть сгенерированы заново в процессе сборки и не требуют добавления в систему контроля версий.
 
-Обычно **исключаются** внутренние артефакты сборки Intlayer из контроля версий. В вашем `.gitignore` добавьте:
+### Расширение VS Code
 
-```plaintext
-# Игнорировать артефакты сборки intlayer
-.intlayer
-react-intl
-```
+Для улучшения опыта разработчика установите официальное **Расширение Intlayer для VS Code**:
 
-В зависимости от вашего рабочего процесса, вы также можете захотеть игнорировать или коммитить окончательные словари в `./react-intl/messages`. Если ваш CI/CDipeline регенерирует их, их можно безопасно игнорировать; в противном случае коммитите их, если они вам нужны для оберток в производства.
+[Установить из магазина расширений VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/tr/intlayer_with_i18next.md

@@ -1,162 +1,126 @@
 ---
-createdAt: 2025-09-07
-updatedAt: 2025-09-07
-title: Intlayer ve i18next
-description: Optimal uluslararasılaştırma için Intlayer'ı i18next ile entegre edin. İki çerçeveyi karşılaştırın ve birlikte yapılandırmayı öğrenin.
+createdAt: 2024-12-24
+updatedAt: 2025-10-29
+title: i18next JSON çevirilerinizi Intlayer ile nasıl otomatikleştirirsiniz
+description: JavaScript uygulamalarında gelişmiş uluslararasılaştırma için Intlayer ve i18next ile JSON çevirilerinizi otomatikleştirin.
 keywords:
   - Intlayer
   - i18next
-  - Internationalisation
+  - Uluslararasılaştırma
   - i18n
-  - Localisation
-  - Translation
+  - Yerelleştirme
+  - Çeviri
   - React
   - Next.js
   - JavaScript
   - TypeScript
+  - Geçiş
+  - Entegrasyon
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSON eklentisine geçiş
 ---
 
-# Intlayer ve i18next ile Uluslararasılaştırma
+# i18next JSON çevirilerinizi Intlayer ile nasıl otomatikleştirirsiniz
 
-i18next, JavaScript uygulamaları için tasarlanmış açık kaynaklı bir uluslararasılaştırma (i18n) çerçevesidir. Yazılım projelerinde çevirileri, yerelleştirmeyi ve dil değiştirmeyi yönetmek için yaygın olarak kullanılır. Ancak, ölçeklenebilirliği ve geliştirmeyi karmaşıklaştırabilecek bazı sınırlamaları vardır.
+## Intlayer nedir?
 
-Intlayer, bu sınırlamaları ele alan başka bir uluslararasılaştırma çerçevesidir ve içerik beyanı ve yönetimine daha esnek bir yaklaşım sunar. i18next ve Intlayer arasındaki bazı temel farkları keşfedelim ve her ikisini de optimal uluslararasılaştırma için nasıl yapılandıracağımızı görelim.
+**Intlayer**, geleneksel i18n çözümlerinin eksikliklerini gidermek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma kütüphanesidir. JavaScript uygulamalarında içerik yönetimine modern bir yaklaşım sunar.
 
-## Intlayer vs. i18next: Temel Farklılıklar
+i18next ile somut bir karşılaştırma için [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md) blog yazımıza bakabilirsiniz.
 
-### 1. Sözlük
+## Neden Intlayer'ı i18next ile Birleştirmelisiniz?
 
-i18next ile çeviri sözlükleri belirli bir klasörde beyan edilmelidir, bu da uygulama ölçeklenebilirliğini karmaşıklaştırabilir. Aksine, Intlayer içeriğin bileşenle aynı dizinde beyan edilmesine izin verir. Bunun birkaç avantajı vardır:
+Intlayer mükemmel bir bağımsız i18n çözümü sunarken (bakınız [Next.js entegrasyon rehberimiz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_with_nextjs_16.md)), birkaç nedenle i18next ile birleştirmek isteyebilirsiniz:
 
-- **Basitleştirilmiş İçerik Düzenleme**: Kullanıcıların doğru sözlüğü aramak zorunda kalmadan düzenleme yapmaları, hataları azaltır.
-- **Otomatik Uyum**: Bir bileşen konum değiştirirse veya kaldırılırsa, Intlayer bunu algılar ve otomatik olarak uyum sağlar.
+1. **Mevcut kod tabanı**: Yerleşik bir i18next uygulamanız var ve Intlayer'ın geliştirilmiş geliştirici deneyimine kademeli olarak geçmek istiyorsunuz.
+2. **Eski gereksinimler**: Projeniz mevcut i18next eklentileri veya iş akışları ile uyumluluk gerektiriyor.
+3. **Ekip aşinalığı**: Ekibiniz i18next ile rahat ancak daha iyi içerik yönetimi istiyor.
 
-### 2. Yapılandırma Karmaşıklığı
+**Bunun için, Intlayer i18next için bir adaptör olarak uygulanabilir; bu, JSON çevirilerinizi CLI veya CI/CD boru hatlarında otomatikleştirmenize, çevirilerinizi test etmenize ve daha fazlasına yardımcı olur.**
 
-i18next'i yapılandırmak, Next.js gibi çerçevelerde sunucu tarafı bileşenlerle entegrasyon veya ara yazılım yapılandırma sırasında karmaşık olabilir. Intlayer bu süreci basitleştirir, daha basit yapılandırma sunar.
+Bu rehber, Intlayer'ın üstün içerik beyan sistemi avantajlarından yararlanırken i18next ile uyumluluğu nasıl koruyacağınızı gösterir.
 
-### 3. Çeviri Sözlüklerinin Tutarlılığı
+## İçindekiler
 
-i18next ile çeviri sözlüklerinin farklı diller arasında tutarlı olmasını sağlamak zor olabilir. Bu tutarsızlık, düzgün ele alınmazsa uygulama çökmelerine yol açabilir. Intlayer, çevrilmiş içeriğe kısıtlamalar uygulayarak hiçbir çevirinin kaçırılmamasını ve çevrilmiş içeriğin doğru olmasını sağlar.
+<TOC/>
 
-### 4. TypeScript Entegrasyonu
+## Adım Adım Intlayer'ı i18next ile Kurma Rehberi
 
-Intlayer, kodunuzda içeriğin otomatik önerilerini sağlayarak geliştirme verimliliğini artıran daha iyi TypeScript entegrasyonu sunar.
+### Adım 1: Bağımlılıkları Yükleyin
 
-### 5. İçeriği Uygulamalar Arasında Paylaşma
+Gerekli paketleri yükleyin:
 
-Intlayer, içerik beyan dosyalarının birden fazla uygulama ve paylaşılan kütüphane arasında paylaşılmasını kolaylaştırır. Bu özellik, daha büyük bir kod tabanında tutarlı çevirileri korumayı kolaylaştırır.
-
-## Intlayer ile i18next Sözlükleri Nasıl Oluşturulur
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-### i18next Sözlüklerini Dışa Aktarmak İçin Intlayer'ı Yapılandırma
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-> Önemli Notlar
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> i18next sözlüklerinin dışa aktarılması şu anda beta aşamasındadır ve diğer çerçevelerle 1:1 uyumluluk sağlamaz. Sorunları en aza indirmek için Intlayer tabanlı bir yapılandırmaya bağlı kalmak önerilir.
+**Paket açıklamaları:**
 
-i18next sözlüklerini dışa aktarmak için Intlayer'ı uygun şekilde yapılandırmanız gerekir. Aşağıda Intlayer'ı hem Intlayer hem de i18next sözlüklerini dışa aktarmak için nasıl ayarlayacağınızın bir örneği vardır.
+- **intlayer**: Uluslararasılaştırma yönetimi, içerik beyanı ve derleme için temel kütüphane
+- **@intlayer/sync-json-plugin**: Intlayer içerik beyanlarını i18next uyumlu JSON formatına aktarmak için eklenti
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+### Adım 2: JSON'u sarmak için Intlayer eklentisini uygulayın
 
-const config: IntlayerConfig = {
-  content: {
-    // Intlayer'ın hem Intlayer hem de i18next sözlüklerini dışa aktaracağını belirt
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Proje kökünden i18n sözlüklerinin dışa aktarılacağı dizine göreli yol
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+Desteklenen yerel ayarları tanımlamak için bir Intlayer yapılandırma dosyası oluşturun:
 
-export default config;
-```
+**Ayrıca i18next için JSON sözlükleri dışa aktarmak istiyorsanız**, `syncJSON` eklentisini ekleyin:
 
-```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'ın hem Intlayer hem de i18next sözlüklerini dışa aktaracağını belirt
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Proje kökünden i18n sözlüklerinin dışa aktarılacağı dizine göreli yol
-    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'ın hem Intlayer hem de i18next sözlüklerini dışa aktaracağını belirt
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Proje kökünden i18n sözlüklerinin dışa aktarılacağı dizine göreli yol
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
-
-module.exports = config;
-```
+`syncJSON` eklentisi JSON'u otomatik olarak sarar. İçerik mimarisini değiştirmeden JSON dosyalarını okur ve yazar.
 
-Yapılandırmaya 'i18next' dahil ederek, Intlayer Intlayer sözlüklerine ek olarak özel i18next sözlükleri oluşturur. Yapılandırmadan 'intlayer'ı kaldırmanın React-Intlayer veya Next-Intlayer ile uyumluluğu bozabileceğini unutmayın.
+Eğer JSON dosyalarının intlayer içerik beyan dosyaları (`.content` dosyaları) ile birlikte var olmasını istiyorsanız, Intlayer şu şekilde ilerler:
 
-### Sözlükleri i18next Yapılandırmanıza İçe Aktarma
+    1. Hem JSON hem de içerik beyan dosyalarını yükler ve bunları intlayer sözlüğüne dönüştürür.
+    2. JSON ile içerik beyan dosyaları arasında çakışma varsa, Intlayer tüm sözlükleri birleştirme işlemi yapar. Bu, eklentilerin önceliğine ve içerik beyan dosyasının önceliğine bağlıdır (hepsi yapılandırılabilir).
 
-Oluşturulan sözlükleri i18next yapılandırmanıza içe aktarmak için 'i18next-resources-to-backend' kullanabilirsiniz. i18next sözlüklerinizi içe aktarmanın bir örneği burada:
+CLI kullanılarak JSON çevirisi yapılırsa veya CMS kullanılırsa, Intlayer JSON dosyasını yeni çevirilerle günceller.
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+## Git Yapılandırması
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Otomatik oluşturulan Intlayer dosyalarını görmezden gelmeniz önerilir:
 
-i18next
-  // Sizin i18next yapılandırmanız
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Intlayer tarafından oluşturulan dosyaları görmezden gel
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
+Bu dosyalar derleme süreciniz sırasında yeniden oluşturulabilir ve sürüm kontrolüne dahil edilmesi gerekmez.
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+### VS Code Eklentisi
 
-i18next
-  // Sizin i18next yapılandırmanız
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+Geliştirici deneyimini iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyin:
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-const i18next = require("i18next");
-const resourcesToBackend = "i18next-resources-to-backend";
-
-i18next
-  // Sizin i18next yapılandırmanız
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)