@intlayer/docs 8.11.2 → 8.11.3

package/docs/uk/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-09-27
+updatedAt: 2026-05-31
 title: Переваги Intlayer
 description: Відкрийте для себе переваги та користь використання Intlayer у ваших проектах. Зрозумійте, чому Intlayer виділяється серед інших фреймворків.
 keywords:
@@ -13,6 +13,9 @@ slugs:
   - doc
   - why
 history:
+  - version: 8.11.2
+    date: 2026-05-31
+    changes: "Додайте чому Intlayer поверх альтернативного розділу"
   - version: 7.3.1
     date: 2025-11-27
     changes: "Випуск Компілятора"
@@ -26,197 +29,52 @@ history:
 
 # Чому варто розглянути Intlayer?
 
-## Що таке Intlayer?
-
-**Intlayer** - це бібліотека інтернаціоналізації, розроблена спеціально для розробників JavaScript. Вона дозволяє оголошувати ваш вміст у будь-якому місці вашого коду. Вона перетворює оголошення багатомовного вмісту на структуровані словники для легкої інтеграції у ваш код. Використовуючи TypeScript, **Intlayer** робить вашу розробку більш надійною та ефективною.
-
-## Чому був створений Intlayer?
-
-Intlayer був створений для вирішення спільної проблеми, яка зачіпає всі популярні бібліотеки i18n, такі як `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` та `vue-i18n`.
-
-Усі ці рішення використовують централізований підхід для перерахування та управління вашим вмістом. Наприклад:
-
-```bash
-.
-├── locales
-│   ├── en.json
-│   ├── es.json
-│   └── fr.json
-├── i18n.ts
-└── src
-    └── components
-        └── MyComponent
-            └── index.tsx
-```
-
-Або тут з використанням просторів назв (namespaces):
-
-```bash
-.
-├── locales
-│   ├── en
-│   │  ├── footer.json
-│   │  └── navbar.json
-│   ├── fr
-│   │  ├── footer.json
-│   │  └── navbar.json
-│   └── es
-│      ├── footer.json
-│      └── navbar.json
-├── i18n.ts
-└── src
-    └── components
-        └── MyComponent
-            └── index.tsx
-```
-
-Такий тип архітектури уповільнює процес розробки та ускладнює підтримку кодової бази з кількох причин:
-
-1. **Для кожного нового створеного компонента ви повинні:**
-   - Створити новий ресурс/простір назв у папці `locales`
-   - Не забути імпортувати новий простір назв на вашій сторінці
-   - Перекласти ваш вміст (часто робиться вручну шляхом копіювання/вставлення від постачальників ШІ)
-
-2. **Для будь-якої зміни у ваших компонентах ви повинні:**
-   - Шукати пов’язаний ресурс/простір назв (далеко від компонента)
-   - Перекласти ваш вміст
-   - Переконатися, що ваш вміст актуальний для будь-якої мови
-   - Перевірити, чи ваш простір назв не містить невикористаних ключів/значень
-   - Переконатися, що структура ваших JSON-файлів однакова для всіх мов
-
-У професійних проектах, які використовують ці рішення, часто застосовуються платформи локалізації для управління перекладом вмісту. Однак для великих проектів це може швидко стати дорогим.
-
-Щоб вирішити цю проблему, Intlayer використовує підхід, який обмежує область дії вашого вмісту кожним компонентом і тримає ваш вміст поруч із вашим компонентом, як ми часто робимо з CSS (`styled-components`), типами, документацією (`storybook`) або юніт-тестами (`jest`).
-
-```bash codeFormat="typescript"
-.
-└── components
-    └── MyComponent
-        ├── index.content.ts
-        ├── index.test.tsx
-        ├── index.stories.tsx
-        └── index.tsx
-```
-
-```bash codeFormat="commonjs"
-.
-└── components
-    └── MyComponent
-        ├── index.content.cjs
-        ├── index.test.mjs
-        ├── index.stories.mjs
-        └── index.tsx
-```
-
-```bash codeFormat="esm"
-.
-└── components
-    └── MyComponent
-        ├── index.content.mjs
-        ├── index.test.mjs
-        ├── index.stories.mjs
-        └── index.tsx
-```
-
-```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const componentExampleContent = {
-  key: "component-example",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-} satisfies Dictionary;
-
-export default componentExampleContent;
-```
-
-```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
-import { useIntlayer } from "react-intlayer";
-
-export const ComponentExample = () => {
-  const { myTranslatedContent } = useIntlayer("component-example");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Цей підхід дозволяє вам:
-
-1. **Збільшити швидкість розробки**
-   - Файли `.content.{{ts|mjs|cjs|json}}` можна створювати за допомогою розширення VSCode
-   - Інструменти автозаповнення ШІ у вашій IDE (наприклад, GitHub Copilot) можуть допомогти вам оголосити вміст, зменшуючи кількість копіювання/вставлення
-
-2. **Очистити вашу кодову базу**
-   - Зменшити складність
-   - Покращити підтримку
-
-3. **Легше дублювати компоненти та пов’язаний з ними вміст (Приклад: компоненти входу/реєстрації тощо)**
-   - Обмежуючи ризик впливу на вміст інших компонентів
-   - Копіюючи/вставляючи ваш вміст з одного додатка в інший без зовнішніх залежностей
-
-4. **Уникнути забруднення кодової бази невикористаними ключами/значеннями для невикористаних компонентів**
-   - Якщо ви не використовуєте компонент, Intlayer не імпортуватиме пов’язаний з ним вміст
-   - Якщо ви видалите компонент, вам буде легше згадати про видалення пов’язаного з ним вмісту, оскільки він буде знаходитися в тій же папці
-
-5. **Зменшити когнітивне навантаження на ШІ-агентів для оголошення вашого багатомовного вмісту**
-   - ШІ-агенту не доведеться сканувати всю кодову базу, щоб дізнатися, де реалізувати ваш вміст
-   - Переклади можна легко виконати за допомогою інструментів автозаповнення ШІ у вашій IDE (наприклад, GitHub Copilot)
-
-6. **Оптимізувати продуктивність завантаження**
-   - Якщо компонент завантажується ледаче (lazy-loaded), пов’язаний з ним вміст завантажуватиметься одночасно
-
-## Додаткові функції Intlayer
-
-| Функція                                                                                                                   | Опис                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Функція](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Підтримка різних фреймворків**<br><br>Intlayer сумісний з усіма основними фреймворками та бібліотеками, включаючи Next.js, React, Vite, Vue.js, Nuxt, Preact, Express та інші.                                                                                                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Управління вмістом на основі JavaScript**<br><br>Використовуйте гнучкість JavaScript для ефективного визначення та управління вашим вмістом. <br><br> - [Оголошення вмісту](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                     |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Функція" width="700">  | **Компілятор**<br><br>Компілятор Intlayer автоматично витягує вміст із компонентів і генерує файли словників.<br><br> - [Компілятор](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Файл оголошення вмісту для кожної мови**<br><br>Прискорте розробку, оголосивши вміст один раз перед автоматичною генерацією.<br><br> - [Файл оголошення вмісту для кожної мови](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Середовище Type-Safe**<br><br>Використовуйте TypeScript, щоб переконатися, що ваші визначення вмісту та код не містять помилок, а також користуйтеся перевагами автозаповнення IDE.<br><br> - [Конфігурація TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Спрощене налаштування**<br><br>Швидко розпочніть роботу з мінімальною конфігурацією. Легко налаштовуйте параметри інтернаціоналізації, маршрутизації, ШІ, збірки та обробки вмісту. <br><br> - [Дослідіть інтеграцію Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Спрощене отримання вмісту**<br><br>Не потрібно викликати функцію `t` для кожного елемента вмісту. Отримуйте весь вміст безпосередньо за допомогою одного хука.<br><br> - [Інтеграція React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Узгоджена реалізація Server Component**<br><br>Ідеально підходить для серверних компонентів Next.js, використовуйте ту саму реалізацію для клієнтських і серверних компонентів, не потрібно передавати функцію `t` через кожен серверний компонент. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Організована кодова база**<br><br>Тримайте кодову базу більш організованою: 1 компонент = 1 словник у тій же папці. Переклади поруч із їхніми відповідними компонентами покращують підтримку та чіткість. <br><br> - [Як працює Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Покращена маршрутизація**<br><br>Повна підтримка маршрутизації додатків, що плавно адаптується до складних структур додатків для Next.js, React, Vite, Vue.js тощо.<br><br> - [Дослідіть інтеграцію Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                 |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Підтримка Markdown**<br><br>Імпортуйте та інтерпретуйте локальні файли та віддалений Markdown для багатомовного вмісту, такого як політики конфіденційності, документація тощо. Інтерпретуйте та робіть метадані Markdown доступними у вашому коді.<br><br> - [Файли вмісту](https://intlayer.org/doc/concept/content/file)                                                                                               |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Безкоштовний візуальний редактор та CMS**<br><br>Для авторів вмісту доступний безкоштовний візуальний редактор та CMS, що усуває потребу в платформі локалізації. Синхронізуйте свій вміст за допомогою Git або повністю або частково винесіть його на аутсорс за допомогою CMS.<br><br> - [Редактор Intlayer](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Вміст типу Tree-shakable**<br><br>Вміст типу tree-shakable, що зменшує розмір кінцевого пакета. Завантажує вміст на рівні компонента, виключаючи будь-який невикористаний вміст із вашого пакета. Підтримує ледаче завантаження для підвищення ефективності завантаження додатка. <br><br> - [Оптимізація збірки додатка](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Статичний рендеринг**<br><br>Не блокує статичний рендеринг. <br><br> - [Інтеграція Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                  |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Переклад на основі ШІ**<br><br>Перетворіть свій веб-сайт на 231 мову лише одним кліком за допомогою розширених інструментів перекладу на основі ШІ від Intlayer, використовуючи власного постачальника ШІ/ключ API. <br><br> - [Інтеграція CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Автозаповнення](https://intlayer.org/doc/concept/auto-fill) |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Інтеграція з сервером MCP**<br><br>Забезпечує сервер MCP (Model Context Protocol) для автоматизації IDE, дозволяючи безперешкодне управління вмістом та робочі процеси i18n безпосередньо у вашому середовищі розробки. <br><br> - [Сервер MCP](https://github.com/aymericzip/intlayer/blob/main/docs/uk/mcp_server.md)                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Розширення VSCode**<br><br>Intlayer надає розширення VSCode, яке допоможе вам керувати вмістом і перекладами, створювати словники, перекладати вміст тощо. <br><br> - [Розширення VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Взаємосумісність**<br><br>Дозволяє взаємосумісність з react-i18next, next-i18next, next-intl та react-intl. <br><br> - [Intlayer та react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer та next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer та next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                             |
-| Тестування відсутніх перекладів (CLI/CI)                                                                                  | ✅ CLI: npx intlayer content test (аудит, сумісний з CI)                                                                                                                                                                                                                                                                                                                                                                    |
-
-## Порівняння Intlayer з іншими рішеннями
-
-| Функція                                            | `intlayer`                                                                                                                           | `react-i18next`                                                                                          | `react-intl` (FormatJS)                                                                                                     | `lingui`                                                          | `next-intl`                                                                                      | `next-i18next`                                                                                   | `vue-i18n`                                                        |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
-| **Переклади поруч із компонентами**                | ✅ Так, вміст розміщено разом із кожним компонентом                                                                                  | ❌ Ні                                                                                                    | ❌ Ні                                                                                                                       | ❌ Ні                                                             | ❌ Ні                                                                                            | ❌ Ні                                                                                            | ✅ Так - за умови використання `Single File Components` (SFCs)    |
-| **Інтеграція TypeScript**                          | ✅ Просунута, автоматично згенеровані строгі типи                                                                                    | ⚠️ Базова; потрібна додаткова конфігурація для безпеки                                                   | ✅ Добре, але менш строго                                                                                                   | ⚠️ Типізація, потрібна конфігурація                               | ✅ Добре                                                                                         | ⚠️ Базова                                                                                        | ✅ Добре (типи доступні; безпека ключів потребує налаштування)    |
-| **Виявлення відсутніх перекладів**                 | ✅ Підсвічування помилок TypeScript та помилки/попередження під час збірки                                                           | ⚠️ Переважно рядки відкату (fallback) під час виконання                                                  | ⚠️ Рядки відкату                                                                                                            | ⚠️ Потрібна додаткова конфігурація                                | ⚠️ Відкат під час виконання                                                                      | ⚠️ Відкат під час виконання                                                                      | ⚠️ Відкат/попередження під час виконання (можна налаштувати)      |
-| **Багатий вміст (JSX/Markdown/компоненти)**        | ✅ Пряма підтримка                                                                                                                   | ⚠️ Обмежено / лише інтерполяція                                                                          | ⚠️ Синтаксис ICU, не справжній JSX                                                                                          | ⚠️ Обмежено                                                       | ❌ Не розраховано на багаті вузли                                                                | ⚠️ Обмежено                                                                                      | ⚠️ Обмежено (компоненти через `<i18n-t>`, Markdown через плагіни) |
-| **Переклад на основі ШІ**                          | ✅ Так, підтримує кількох постачальників ШІ. Можна використовувати з власними ключами API. Враховує контекст додатка та обсяг вмісту | ❌ Ні                                                                                                    | ❌ Ні                                                                                                                       | ❌ Ні                                                             | ❌ Ні                                                                                            | ❌ Ні                                                                                            | ❌ Ні                                                             |
-| **Візуальний редактор**                            | ✅ Так, локальний візуальний редактор + опціональна CMS; може виносити вміст кодової бази на аутсорс; вбудовуваний                   | ❌ Ні / доступно через зовнішні платформи локалізації                                                    | ❌ Ні / доступно через зовнішні платформи локалізації                                                                       | ❌ Ні / доступно через зовнішні платформи локалізації             | ❌ Ні / доступно через зовнішні платформи локалізації                                            | ❌ Ні / доступно через зовнішні платформи локалізації                                            | ❌ Ні / доступно через зовнішні платформи локалізації             |
-| **Локалізована маршрутизація**                     | ✅ Так, підтримує локалізовані шляхи "з коробки" (працює з Next.js та Vite)                                                          | ⚠️ Немає вбудованої, потрібні плагіни (наприклад, `next-i18next`) або власна конфігурація маршрутизатора | ❌ Ні, лише форматування повідомлень, маршрутизація має бути ручною                                                         | ⚠️ Немає вбудованої, потрібні плагіни або ручне налаштування      | ✅ Вбудовано, App Router підтримує сегмент `[locale]`                                            | ✅ Вбудовано                                                                                     | ✅ Вбудовано                                                      |
-| **Динамічне генерування маршрутів**                | ✅ Так                                                                                                                               | ⚠️ Плагін/екосистема або ручне налаштування                                                              | ❌ Не надається                                                                                                             | ⚠️ Плагін/вручну                                                  | ✅ Так                                                                                           | ✅ Так                                                                                           | ❌ Не надається (надає Nuxt i18n)                                 |
-| **Множина**                                        | ✅ Шаблони на основі перерахувань (enums)                                                                                            | ✅ Можна налаштувати (плагіни, такі як i18next-icu)                                                      | ✅ (ICU)                                                                                                                    | ✅ (ICU/messageformat)                                            | ✅ Добре                                                                                         | ✅ Добре                                                                                         | ✅ Вбудовані правила множини                                      |
-| **Форматування (дати, числа, валюти)**             | ✅ Оптимізовані форматувальники (Intl під капотом)                                                                                   | ⚠️ Через плагіни або власне використання Intl                                                            | ✅ Форматувальники ICU                                                                                                      | ✅ Хелпери ICU/CLI                                                | ✅ Добре (хелпери Intl)                                                                          | ✅ Добре (хелпери Intl)                                                                          | ✅ Вбудовані форматувальники дат/чисел (Intl)                     |
-| **Формат вмісту**                                  | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml в роботі)                                                                                | ⚠️ .json                                                                                                 | ✅ .json, .js                                                                                                               | ⚠️ .po, .json                                                     | ✅ .json, .js, .ts                                                                               | ⚠️ .json                                                                                         | ✅ .json, .js                                                     |
-| **Підтримка ICU**                                  | ⚠️ В роботі                                                                                                                          | ⚠️ Через плагін (i18next-icu)                                                                            | ✅ Так                                                                                                                      | ✅ Так                                                            | ✅ Так                                                                                           | ⚠️ Через плагін (`i18next-icu`)                                                                  | ⚠️ Через власний форматувальник/компілятор                        |
-| **Хелпери SEO (hreflang, sitemap)**                | ✅ Вбудовані інструменти: хелпери для sitemap, robots.txt, метаданих                                                                 | ⚠️ Плагіни спільноти / вручну                                                                            | ❌ Не є основним                                                                                                            | ❌ Не є основним                                                  | ✅ Добре                                                                                         | ✅ Добре                                                                                         | ❌ Не є основним (надає хелпери Nuxt i18n)                        |
-| **Екосистема / Спільнота**                         | ⚠️ Менша, але швидко зростає та чуйно реагує                                                                                         | ✅ Найбільша та зріла                                                                                    | ✅ Велика                                                                                                                   | ⚠️ Менша                                                          | ✅ Середнього розміру, зосереджена на Next.js                                                    | ✅ Середнього розміру, зосереджена на Next.js                                                    | ✅ Велика в екосистемі Vue                                        |
-| **Server-side Rendering та Server Components**     | ✅ Так, спрощено для SSR / React Server Components                                                                                   | ⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів         | ⚠️ Підтримується на рівні сторінки з додатковим налаштуванням, але потрібно передавати t-функції вниз по дереву компонентів | ✅ Підтримується, потрібне налаштування                           | ⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів | ⚠️ Підтримується на рівні сторінки, але потрібно передавати t-функції вниз по дереву компонентів | ✅ SSR через Nuxt/Vue SSR (без RSC)                               |
-| **Tree-shaking (завантаження лише використаного)** | ✅ Так, для кожного компонента під час збірки через плагіни Babel/SWC                                                                | ⚠️ Зазвичай завантажує все (можна покращити через простори назв / code-splitting)                        | ⚠️ Зазвичай завантажує все                                                                                                  | ❌ Не типово                                                      | ⚠️ Частково                                                                                      | ⚠️ Частково                                                                                      | ⚠️ Частково (з code-splitting / ручним налаштуванням)             |
-| **Ледаче завантаження (Lazy loading)**             | ✅ Так, для кожної мови / для кожного словника                                                                                       | ✅ Так (наприклад, бекенди/простори назв за запитом)                                                     | ✅ Так (розділення мовних пакетів)                                                                                          | ✅ Так (динамічний імпорт каталогів)                              | ✅ Так (на маршрут / на мову), потрібне управління просторами назв                               | ✅ Так (на маршрут / на мову), потрібне управління просторами назв                               | ✅ Так (асинхронні мовні повідомлення)                            |
-| **Очищення невикористаного вмісту**                | ✅ Так, для кожного словника під час збірки                                                                                          | ❌ Ні, лише через ручне розділення просторів назв                                                        | ❌ Ні, усі оголошені повідомлення пакуються                                                                                 | ✅ Так, невикористані ключі виявляються та видаляються при збірці | ❌ Ні, можна керувати вручну за допомогою управління просторами назв                             | ❌ Ні, можна керувати вручну за допомогою управління просторами назв                             | ❌ Ні, можливо лише через ручне ледаче завантаження               |
-| **Управління великими проектами**                  | ✅ Заохочує модульність, підходить для дизайн-систем                                                                                 | ⚠️ Потрібна хороша дисципліна файлів                                                                     | ⚠️ Центральні каталоги можуть стати великими                                                                                | ⚠️ Може стати складним                                            | ✅ Модульно з налаштуванням                                                                      | ✅ Модульно з налаштуванням                                                                      | ✅ Модульно з налаштуванням Vue Router/Nuxt i18n                  |
+## Чому варто обрати Intlayer, а не альтернативи?
+
+Порівняно з основними рішеннями, такими як `next-intl` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
+
+<AccordionGroup>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Функція">
+
+Intlayer пропонує низку додаткових функцій, яких немає в інших рішеннях i18n, як-от [підтримка Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [отримання зовнішніх вміст](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md), [завантаження вмісту файлу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md), [живий вміст оновлення](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md), [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) тощо.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+<Accordion header="Крос фреймворк дизайн">
+
+Якщо ви використовуєте різні фреймворки для різних частин вашої програми (наприклад, React, React-native, Vue, Angular, Svelte тощо), Intlayer надає спосіб **використовувати загальний синатаксис і реалізацію в усіх основних інтерфейсних фреймворках**. Ви також зможете поділитися своєю декларацією вмісту у своїй системі дизайну, програмах, серверній частині тощо.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 

package/docs/uk/intlayer_with_adonisjs.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
-title: AdonisJS i18n - Як перекласти додаток AdonisJS у 2026
-description: Дізнайтеся, як зробити ваш бекенд AdonisJS багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: AdonisJS i18n - Повний посібник з перекладу AdonisJS
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть AdonisJS бекенд багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація

package/docs/uk/intlayer_with_analog.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Analog i18n - Як перекласти додаток Analog у 2026
-description: Дізнайтеся, як зробити свій додаток Analog багатомовним. Дотримуйтесь документації для інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: Analog i18n - Повний посібник з перекладу Analog
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Analog застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -56,16 +56,47 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення багатомовної підтримки в сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `ngx-translate` або `angular-l10n`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повне аналогове покриття">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та вміст.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автодоповнення та виявлення помилок.
-- **Скористатися розширеними функціями**, такими як динамічне визначення та перемикання мови.
+Intlayer оптимізовано для ідеальної роботи з Analog, пропонуючи **багатомовну маршрутизацію**, **підтримку SSR** і всі функції, необхідні для інтернаціоналізації масштабування (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -73,7 +104,9 @@ history:
 
 Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-analog-template) на GitHub.
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -107,7 +140,9 @@ bun x intlayer init
 - **vite-intlayer**
   Пакет, який інтегрує Intlayer з Vite. Він надає плагін для обробки файлів декларації вмісту та налаштовує аліаси для оптимальної продуктивності.
 
-### Крок 2: Конфігурація вашого проекту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проекту">
 
 Створіть файл конфігурації для налаштування мов вашого додатка:
 
@@ -131,7 +166,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви кукі, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Щоб інтегрувати Intlayer з Analog, вам потрібно використовувати плагін `vite-intlayer`.
 
@@ -153,7 +190,9 @@ export default defineConfig(() => ({
 
 > Плагін `intlayer()` налаштовує Vite для роботи з Intlayer. Він обробляє файли декларації вмісту та налаштовує аліаси для оптимальної продуктивності.
 
-### Крок 4: Декларування вашого вмісту
+</Step>
+
+<Step number={4} title="Декларування вашого вмісту">
 
 Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
 
@@ -185,7 +224,9 @@ export default appContent;
 
 > Докладнішу інформацію дивіться у [документації з декларації вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Щоб використовувати функції інтернаціоналізації Intlayer у вашому додатку Analog, вам потрібно надати Intlayer у конфігурації вашого додатка.
 
@@ -223,7 +264,9 @@ export default class HomeComponent {
 
 Вміст Intlayer повертається як `Signal`, тому ви отримуєте доступ до значень, викликаючи сигнал: `content().title`.
 
-### (Опціонально) Крок 6: Зміна мови вашого вмісту
+</Step>
+
+<Step number={6} title="Зміна мови вашого вмісту" isOptional={true}>
 
 Щоб змінити мову вашого вмісту, ви можете використовувати функцію `setLocale`, яку надає функція `useLocale`. Це дозволяє вам встановлювати локаль додатка та відповідним чином оновлювати вміст.
 
@@ -329,3 +372,7 @@ Intlayer використовує розширення модулів (module au
 - **Швидкі дії** для легкого створення та оновлення перекладів.
 
 Докладнішу інформацію про використання розширення дивіться в [документації розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+
+</Step>
+
+</Steps>