@intlayer/docs 7.5.11 → 7.5.13

package/blog/uk/index.md

@@ -0,0 +1,69 @@
+---
+createdAt: 2024-24-12
+updatedAt: 2025-06-29
+title: Блог
+description: Дізнайтеся про всі теми, пов'язані з Intlayer, інтернаціоналізацією та іншим
+keywords:
+  - Intlayer
+  - Інтернаціоналізація
+  - Блог
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - search
+---
+
+# Інтернаціоналізація в JavaScript: розширення глобального охоплення та SEO
+
+Ласкаво просимо до нашого блогу, присвяченого всьому, що стосується **інтернаціоналізації** для застосунків на JavaScript! Тут ми розглядаємо найкращі практики, стратегії та інструменти, які допомагають розробникам масштабувати свої цифрові продукти по всьому світу.
+
+---
+
+## Чому інтернаціоналізація (i18n) важлива
+
+У сьогоднішньому взаємозв’язаному світі користувачі очікують безшовного, локалізованого досвіду. Інтернаціоналізація (i18n) забезпечує можливість адаптації вашого веб-застосунку до різних мов і культурних особливостей. Впроваджуючи практики i18n з самого початку, ви відкриваєте для себе численні переваги, такі як:
+
+1. **Покращений користувацький досвід:** Користувачам зручніше взаємодіяти з контентом рідною мовою.
+2. **Ширше проникнення на ринку:** Наявність кількох мов допомагає виходити на нові регіони та розширювати базу користувачів.
+3. **Покращена доступність:** Добре структурована i18n часто відповідає стандартам доступності, роблячи ваш додаток більш інклюзивним.
+4. **Покращені SEO-показники:** Локалізований контент може підвищити вашу видимість у регіональних результатах пошуку.
+
+---
+
+## Open-Source рішення для інтернаціоналізації
+
+Створення інтернаціоналізованого додатка не має бути складним. Спільнота open-source пропонує багато потужних, добре підтримуваних інструментів і бібліотек, які спрощують локалізацію. Популярні рішення, такі як **react-intl**, **i18next** та **FormatJS**, надають гнучкі API та просту інтеграцію з сучасними JavaScript-фреймворками, такими як React, Vue і Angular.
+
+### Ключові переваги open-source рішень
+
+- **Гнучкість:** Бібліотеки, керовані спільнотою, швидко розвиваються і додають оновлення та нові функції відповідно до потреб.
+- **Економія коштів:** Відсутність ліцензійних платежів, що спрощує тестування та масштабування вашого додатка.
+- **Підтримка спільноти:** Великі спільноти зазвичай означають більше навчальних матеріалів, документації та готових плагінів.
+
+---
+
+## Оголошення та наступні кроки
+
+Ми з радістю оголошуємо про майбутні підручники, найкращі практики та **кейси**, які покажуть, як оптимізувати ваші JavaScript-застосунки для глобальної аудиторії. Ось короткий огляд:
+
+- **Поради з просунутої локалізації:** відточення pluralization, форматування дати/часу та динамічного контенту.
+- **Оптимізація продуктивності:** мінімізація розмірів бандлів при підтримці кількох локалей.
+- **Кейси від спільноти:** демонстрація реальних прикладів успішних i18n-реалізацій.
+
+Слідкуйте за цими оновленнями та іншими матеріалами!
+
+---
+
+## Долучайтеся до нашого блогу!
+
+Ми віримо в обмін знаннями, який ініціюється спільнотою. Якщо у вас є чудова ідея для публікації в блозі, пов'язана з інтернаціоналізацією, **SEO** або будь-якою іншою релевантною темою, нам буде приємно її почути. Ви можете надіслати Pull Request, додавши свою пропоновану статтю до нашого репозиторію на GitHub:
+
+[**Надішліть свою публікацію тут**](https://github.com/aymericzip/intlayer/blob/main/docs/blog)
+
+Ваші внески допомагають збагачувати цю платформу та розширювати можливості розробників у всьому світі.
+
+---
+
+**Дякуємо за увагу, і ласкаво просимо до нашої i18n-спільноти!** Слідкуйте за оновленнями, щоб отримувати більше ідей, порад і кращих практик щодо того, як вивести ваші JavaScript-застосунки на міжнародний рівень.

package/blog/uk/internationalization_and_SEO.md

@@ -0,0 +1,273 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-06-29
+title: SEO та інтернаціоналізація
+description: Дізнайтеся, як оптимізувати ваш багатомовний вебсайт для пошукових систем та покращити SEO.
+keywords:
+  - SEO
+  - Intlayer
+  - Інтернаціоналізація
+  - Блог
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - SEO-and-i18n
+---
+
+# SEO та I18n: остаточний посібник зі створення багатомовного вебсайту
+
+Хочете охопити більше користувачів у світі? Зробити ваш вебсайт багатомовним — один із найкращих способів розширити аудиторію та покращити SEO (Search Engine Optimization). У цьому дописі блогу ми розкладемо по поличках основи міжнародного SEO, часто званого **i18n** (скорочення від "internationalization"), простими та зрозумілими словами. Ви дізнаєтеся про ключові рішення, які потрібно прийняти, як використовувати технічні елементи, такі як `hreflang`, і чому інструменти на кшталт **Intlayer** можуть спростити ваші багатомовні проєкти на Next.js.
+
+---
+
+## 1. Що означає зробити ваш вебсайт багатомовним?
+
+Багатомовний вебсайт пропонує свій вміст більш ніж однією мовою. Наприклад, у вас може бути англомовна версія (`example.com/en/`), франкомовна версія (`example.com/fr/`) та іспаномовна версія (`example.com/es/`). Такий підхід дозволяє пошуковим системам відображати користувачам відповідну мовну версію на основі їхніх уподобань або географічного розташування.
+
+Коли зробити це правильно, ви створите значно зручніший досвід для користувачів, які не говорять англійською, що призведе до кращого залучення, вищих показників конверсії та покращення SEO в різних регіонах.
+
+---
+
+## 2. Вибір правильної структури URL-адрес
+
+Якщо ви вирішите мати кілька мовних версій, вам знадобиться чіткий і послідовний спосіб організувати URL-адреси сайту. Кожна мова (або регіон) повинна мати власну унікальну "адресу" в інтернеті. Нижче наведено три поширені способи структурування багатомовних сайтів:
+
+1. Національні домени верхнього рівня (ccTLDs)
+   - Example: `example.fr`, `example.de`
+   - **Переваги:** Надсилає чіткий сигнал пошуковим системам щодо країни, на яку націлено вміст (наприклад, `.fr` = Франція).
+   - **Недоліки:** Управління кількома доменами може бути дорожчим і складнішим.
+
+2. **Піддомени**
+   - **Example:** `fr.example.com`, `de.example.com`
+   - **Переваги:** Кожна мова "мешкає" на власному піддомені, що робить додавання або видалення мов відносно простим.
+   - **Недоліки:** Пошукові системи іноді трактують субдомени як окремі сайти, тому це може розпорошувати авторитет вашого головного домену.
+
+3. **Підкаталоги (підпапки)**
+   - **Приклад:** `example.com/fr/`, `example.com/de/`
+   - **Переваги:** Легко керувати, і весь трафік спрямовується на один основний домен.
+   - **Недоліки:** Менш сильний сигнал для локального SEO порівняно з ccTLD (хоча за правильної реалізації це все одно ефективно).
+
+> **Порада:** Якщо у вас глобальний бренд і ви хочете спростити управління, підкаталоги зазвичай працюють найкраще. Якщо ж ви орієнтуєтесь лише на одну-дві країни і хочете максимально підкреслити кожну з них, варто розглянути ccTLD.
+
+---
+
+## 3. Опановування таргетування мов за допомогою Hreflang
+
+### 3.1. Що таке Hreflang?
+
+Коли у вас є ідентичний або дуже схожий вміст кількома мовами, пошукові системи, такі як Google, можуть заплутатися щодо того, яку версію показувати користувачеві. **Hreflang** — це атрибут HTML, який вказує пошуковим системам, для якої мови (та регіону) призначена конкретна сторінка, а також які альтернативні мовні/регіональні сторінки існують.
+
+### 3.2. Чому це важливо?
+
+1. Це запобігає проблемам з **дублюванням контенту** (коли пошукові системи вважають, що ви публікуєте один і той же вміст кілька разів).
+2. Це гарантує, що **франкомовні користувачі бачать французьку версію**, **іспаномовні користувачі бачать іспанську версію** та інші відповідні варіанти.
+3. Це покращує загальний досвід користувача — підвищує залученість і покращує позиції в пошуковій видачі.
+
+### 3.3. Як використовувати Hreflang у тегу `<head>`
+
+У вашому HTML ви додасте щось на кшталт:
+
+```html
+<link rel="alternate" hreflang="en" href="https://example.com/en" />
+<link rel="alternate" hreflang="fr" href="https://example.com/fr" />
+<link rel="alternate" hreflang="es" href="https://example.com/es" />
+<link rel="alternate" hreflang="x-default" href="https://example.com/en" />
+```
+
+- **`hreflang="en"`**: Вказує на англомовну версію сторінки.
+- **`hreflang="fr"`**: Вказує на французьку версію сторінки.
+- **`hreflang="es"`**: Вказує на іспаномовну версію сторінки.
+- **`hreflang="x-default"`**: «fallback» — запасна мова або URL за замовчуванням, коли жодна з інших мов не відповідає вподобанням користувача.
+
+> **Коротке зауваження:** Переконайтеся, що URL-адреси в цих тегах ведуть безпосередньо на фінальну сторінку, без будь-яких додаткових редиректів.
+
+---
+
+## 4. Робити контент справді «локальним» (не тільки перекладеним)
+
+### 4.1. Локалізація vs. Переклад
+
+- **Переклад** означає перетворення тексту з однієї мови на іншу дослівно.
+- **Локалізація** означає адаптацію формату контенту, валюти, одиниць виміру та культурних відсилань для місцевої аудиторії. Наприклад, якщо ви орієнтуєтеся на Францію, ви використаєте `€` замість `$`, і, можливо, згадаєте місцеві свята чи регіонально-специфічні деталі.
+
+### 4.2. Уникнення дубльованого контенту
+
+Навіть за наявності якісних перекладів пошукові системи можуть позначити ваш сайт як такий, що містить дубльований контент, якщо сторінки надто схожі за структурою. hreflang допомагає пояснити, що ці сторінки не є дублікатами, а відрізняються мовною версією.
+
+---
+
+## 5. Необхідні технічні елементи SEO
+
+### 5.1. Оголошення мови (`lang` і `dir`)
+
+У тегові <html> ви можете вказати мову так:
+
+```html
+<html lang="en"></html>
+```
+
+- **`lang="en"`** допомагає браузерам та засобам доступності розпізнати мову.
+
+Для мов, що пишуться справа наліво (наприклад, арабська або іврит), додайте:
+
+```html
+<html dir="rtl" lang="ar"></html>
+```
+
+- **`dir="rtl"`** задає напрямок тексту справа наліво.
+
+### 5.2. Канонічні теги
+
+Канонічні теги вказують пошуковим системам, яка сторінка є «оригіналом» або основною версією, якщо у вас є майже ідентичні сторінки. Зазвичай для мультимовних сайтів ви використовуєте **self-referencing** канонічний тег.
+
+```html
+<link rel="canonical" href="https://example.com/fr/produits" />
+```
+
+---
+
+## 6. On-Page SEO у кількох мовах
+
+### 6.1. Title & Meta Descriptions
+
+- **Перекладені та оптимізовані** для кожної мови.
+- Виконайте **дослідження ключових слів** для кожного ринку, оскільки те, що люди шукають англійською, може відрізнятися від пошукових запитів французькою чи іспанською.
+
+### 6.2. Headers (H1, H2, H3)
+
+Ваші заголовки мають відображати **локальні фрази** або **ключові слова** для кожного регіону. Не обмежуйтеся простим перекладом оригінального англійського заголовка через Google Translate.
+
+### 6.3. Images & Media
+
+- Локалізуйте alt-текст, підписи та імена файлів за потреби.
+- Використовуйте візуальні матеріали, які резонують із цільовою культурою.
+
+---
+
+## 7. Language Switching & User Experience
+
+### 7.1. Auto-Redirect or a Language Selector?
+
+- **Автоматичне перенаправлення** (на основі IP або налаштувань браузера) може бути зручним, але воно може направляти мандрівників або користувачів із VPN на неправильну версію.
+- **Селектор мови** часто є більш прозорим — користувачі можуть самі вибрати свою мову, якщо автоматично визначена мова неправильна.
+
+Ось спрощений приклад Next.js + Intlayer:
+
+```tsx
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Locales,
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+} from "intlayer";
+import { useLocale } from "react-intlayer";
+import { type FC } from "react";
+
+const LocaleSwitcher: FC = () => {
+  const { pathname, search } = useLocation(); // Отримати поточний шлях URL. Приклад: /fr/about?foo=bar
+  const navigate = useNavigate();
+
+  const { locale, availableLocales, setLocale } = useLocale({
+    onLocaleChange: (locale) => {
+      // Побудувати URL з оновленою локаллю
+      // Приклад: /es/about?foo=bar
+      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);
+
+      // Update the URL path
+      navigate(pathWithLocale);
+    },
+  });
+
+  return (
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <a
+            href={getLocalizedUrl(location.pathname, localeItem)}
+            hrefLang={locale === localeItem ? "x-default" : localeItem}
+            aria-current={locale === localeItem ? "page" : undefined}
+            onClick={(e) => {
+              e.preventDefault();
+              setLocale(localeItem);
+            }}
+          >
+            <span>
+              {/* Локаль — наприклад FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Назва мови у власній локалі — наприклад Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Мова у поточній локалі — наприклад «Francés», коли поточна локаль встановлена на Locales.SPANISH */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Мова англійською — наприклад «French» */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </a>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+### 7.2. Збереження уподобань
+
+- Зберігайте вибір мови користувача в **cookie** або **session**.
+- Наступного разу, коли вони відвідають ваш сайт, ви можете автоматично завантажити їхню уподобану мову.
+
+---
+
+## 8. Створення локальних зворотних посилань
+
+**Зворотні посилання (backlinks)** (посилання з зовнішніх сайтів на ваш сайт) залишаються важливим фактором SEO. Коли ви керуєте багатомовним сайтом, врахуйте:
+
+- Налагодьте контакти з місцевими новинними сайтами, блогами або форумами. Наприклад, домен `.fr`, що вказує на вашу французьку піддиректорію, може підсилити локальне французьке SEO.
+- Моніторте зворотні посилання за мовами, щоб визначити, які регіони потребують більше PR/маркетингових зусиль.
+
+---
+
+## 9. Моніторинг і підтримка вашого багатомовного сайту
+
+### 9.1. Google Analytics і Search Console
+
+- Розбивайте дані за кожним мовним каталогом (`/en/`, `/fr/`, `/es/`).
+- Слідкуйте за **crawl errors**, **duplicate content flags** та **indexing issues** для кожної мови.
+
+### 9.2. Регулярні оновлення контенту
+
+- Підтримуйте переклади в актуальному стані. Якщо ви змінюєте опис продукту англійською, оновіть його французькою, іспанською тощо.
+- Застарілі переклади можуть збивати з пантелику клієнтів і підривати довіру користувачів.
+
+---
+
+## 10. Поширені помилки, яких слід уникати
+
+1. **Машинний переклад**
+   Автоматичні переклади без людської перевірки можуть містити численні помилки.
+
+2. **Неправильні або відсутні теги `hreflang`**
+   Пошукові системи не зможуть визначити мовні версії самостійно, якщо ваші теги неповні або містять неправильні коди.
+
+3. **Перемикання мови лише через `JavaScript`**
+   Якщо Google не може просканувати унікальні URL для кожної мови, ваші сторінки можуть не з'являтися у відповідних локальних результатах пошуку.
+
+4. **Ігнорування культурних нюансів**
+   Жарт або фраза, що працює в одній країні, може бути образливою або беззмістовною в іншій.
+
+---
+
+## Підсумок
+
+Створення багатомовного вебсайту — це не лише переклад тексту. Йдеться про ефективну структуру URL-адрес, використання тегів `hreflang`, щоб допомогти пошуковим системам показувати правильну версію, і забезпечення відмінного користувацького досвіду з локалізованими візуалами, селекторами мови та послідовною навігацією. Дотримання цих найкращих практик підготує вас до успіху на світових ринках, підвищить задоволеність користувачів і, зрештою, покращить SEO-показники в різних регіонах.
+
+Якщо ви використовуєте Next.js (особливо App Router у Next.js 13+), інструмент на кшталт **Intlayer** може оптимізувати увесь цей процес. Він допомагає з усього — від генерації локалізованих sitemaps до автоматичного керування `hreflang` лінками, визначення мови та іншого, щоб ви могли зосередитися на створенні якісного багатомовного контенту.
+
+**Готові вийти на глобальний рівень?** Почніть впроваджувати ці стратегії SEO та i18n вже зараз і спостерігайте, як нові відвідувачі з усього світу знаходять і взаємодіють з вашим сайтом!

package/blog/uk/intlayer_with_i18next.md

@@ -0,0 +1,211 @@
+---
+createdAt: 2024-12-24
+updatedAt: 2025-11-06
+title: Як автоматизувати JSON-переклади i18next за допомогою Intlayer
+description: Автоматизуйте ваші JSON-переклади за допомогою Intlayer та i18next для покращеної інтернаціоналізації в JavaScript-додатках.
+keywords:
+  - Intlayer
+  - i18next
+  - Інтернаціоналізація
+  - i18n
+  - Локалізація
+  - Переклад
+  - React
+  - Next.js
+  - JavaScript
+  - TypeScript
+  - Міграція
+  - Інтеграція
+slugs:
+  - blog
+  - intlayer-with-i18next
+youtubeVideo: https://www.youtube.com/watch?v=MpGMxniDHNg
+history:
+  - version: 7.5.0
+    date: 2025-12-13
+    changes: Додано підтримку формату i18next
+  - version: 7.0.7
+    date: 2025-11-06
+    changes: Додано документацію щодо підтримки AI-провайдера
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Додано плагін loadJSON
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin
+---
+
+# Як автоматизувати ваші JSON-переклади i18next за допомогою Intlayer
+
+<iframe title="Як автоматизувати ваші JSON-переклади i18next за допомогою Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+## Зміст
+
+<TOC/>
+
+## Що таке Intlayer?
+
+**Intlayer** — інноваційна open-source бібліотека для інтернаціоналізації, створена для вирішення недоліків традиційних i18n-рішень. Вона пропонує сучасний підхід до керування контентом у JavaScript-додатках.
+
+Дивіться конкретне порівняння з i18next у нашому дописі в блозі «next-i18next vs. next-intl vs. Intlayer»: https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/next-i18next_vs_next-intl_vs_intlayer.md
+
+## Чому поєднувати Intlayer з i18next?
+
+Хоча Intlayer пропонує відмінне автономне i18n-рішення (див. наш посібник з інтеграції Next.js: https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_16.md), ви можете захотіти поєднати його з i18next з кількох причин.
+
+Intlayer пропонує широкий набір розширених функцій, що виходять за межі традиційних i18n-інструментів. Він допомагає вам:
+
+- **Автоматично виявляти та заповнювати відсутні переклади**, щоб спростити локалізацію.
+- **Тестувати та перевіряти ваші переклади** безпосередньо у ваших робочих процесах розробки або CI/CD.
+- **Керувати контентом на рівні компонентів**, що дозволяє отримати чисту, масштабовану та легку в підтримці структуру в усьому вашому додатку.
+- **Виносити контент за межі коду**, роблячи його простим для редагування всією вашою командою (розробники, перекладачі та контент-менеджери).
+
+Однак, **i18next** залишається відмінним і широко застосовуваним рішенням для i18n завдяки своїй **дозрілій екосистемі**, **широкій підтримці спільноти** та **широкій сумісності з плагінами**.
+
+Поєднавши **Intlayer** з **i18next**, ви отримуєте найкраще з обох світів — стабільність і зрілість екосистеми i18next разом із сучасним керуванням контентом, автоматизацією та покращенням developer experience від Intlayer.
+
+Цей посібник пояснює, як використовувати Intlayer як **адаптер для i18next**, що дозволяє вам:
+
+- Поступово мігрувати з i18next на Intlayer.
+- Зберігайте існуючі плагіни та робочі процеси i18next.
+- Автоматизуйте ваші JSON-переклади у CLI або в CI/CD конвеєрах.
+- Тестуйте, синхронізуйте та керуйте перекладами ефективніше.
+
+## Зміст
+
+<TOC/>
+
+## Покроковий посібник із налаштування Intlayer з i18next
+
+### Крок 1: Встановлення залежностей
+
+Встановіть необхідні пакети:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin --save-dev
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin --dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin --dev
+bunx intlayer init
+```
+
+**Опис пакетів:**
+
+- **intlayer**: Базова бібліотека для управління інтернаціоналізацією, декларації контенту та побудови
+- **@intlayer/sync-json-plugin**: Плагін для експорту декларацій контенту Intlayer у формат JSON, сумісний з i18next
+
+### Крок 2: Реалізуйте плагін Intlayer для обгортання JSON
+
+Створіть файл конфігурації Intlayer, щоб визначити підтримувані локалі:
+
+**Якщо ви також хочете експортувати JSON-словники для i18next**, додайте плагін `syncJSON`:
+
+```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,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Плагін `syncJSON` автоматично обгортає JSON. Він читає та записує JSON-файли, не змінюючи архітектуру їхнього вмісту.
+
+Якщо ви хочете, щоб ці JSON-файли співіснували з файлами декларацій контенту Intlayer (`.content` файли), Intlayer оброблятиме їх таким чином:
+
+    1. завантажить як JSON, так і файли декларацій контенту і перетворить їх на словник Intlayer.
+    2. якщо виникають конфлікти між JSON та файлами декларацій контенту, Intlayer виконає злиття всіх словників. Результат залежатиме від пріоритету плагінів і пріоритету файлів декларацій контенту (усі параметри можна налаштувати).
+
+Якщо зміни вносяться за допомогою CLI для перекладу JSON або через CMS, Intlayer оновить JSON-файл з новими перекладами.
+
+Щоб дізнатися більше про плагін `syncJSON`, див. [документацію плагіна syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-json.md).
+
+### Крок 4: Налаштування AI-провайдера
+
+Intlayer надає набір просунутих автоматизаційних та дружніх до розробника функцій для вашого робочого процесу i18next.
+
+- **Автоматичне виявлення та заповнення відсутніх перекладів**: Intlayer сканує ваші JSON-словники, знаходить неперекладені або відсутні ключі і перекладає лише їх, тож 99% вашого JSON залишається незмінним.
+- **Поблочний переклад великих JSON-файлів**: Коли ваші файли перекладу дуже великі, Intlayer автоматично розбиває обробку на керовані блоки, перекладаючи їх незалежно, щоб уникнути обмежень API та проблем з пам’яттю.
+- **Паралелізація просторів імен (namespaces)**: Якщо у вас сотні просторів імен (або файлів), Intlayer паралелізує задачі перекладу, ефективно прискорюючи ваші CI/CD або масові операції перекладу.
+- **Гнучка підтримка AI-провайдерів**: Обирайте улюбленого AI-провайдера (наприклад, OpenAI, Claude, Gemini), просто налаштувавши облікові дані. Використовуйте власний API-ключ і за потреби перемикайте провайдерів.
+- **Стійка обробка відповідей AI**: Intlayer може обробляти крайові випадки, коли ваш AI-провайдер повертає текст або як рядок, або як об’єкт, навіть автоматично повторюючи спроби, якщо формат є непослідовним.
+- Готовий для CLI та CI/CD: запускайте перевірки Intlayer і автозаповнення безпосередньо у ваших тестах або пайплайнах, роблячи процес локалізації надійним та автоматизованим.
+- Інтегрується поверх наявної конфігурації: вам не потрібно змінювати i18next або основу Next.js. Intlayer працює як додатковий плагін до вашої поточної установки, надаючи всі ці переваги з мінімальною міграцією.
+
+Ось приклад того, як налаштувати AI-провайдера:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-5-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Потім ви можете виконати наступну команду, щоб заповнити переклади:
+
+```bash
+npx intlayer fill
+```
+
+Це заповнить ваші переклади за допомогою AI-провайдера, якого ви налаштували.
+
+> Перегляньте всіх доступних AI-провайдерів у [документації з конфігурації Intlayer AI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md#ai-configuration).
+> Перегляньте всі доступні команди в [документації Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
+
+---
+
+## Налаштування Git
+
+Рекомендується ігнорувати автоматично згенеровані файли Intlayer:
+
+```plaintext fileName=".gitignore"
+# Ігнорувати файли, згенеровані Intlayer
+.intlayer
+```
+
+Ці файли можуть бути повторно згенеровані під час збірки і їх не потрібно додавати до системи контролю версій.
+
+### Розширення для VS Code
+
+Для покращення досвіду розробника встановіть офіційне **Intlayer VS Code Extension**:
+
+[Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)