@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/uk/interest_of_intlayer.md

@@ -30,6 +30,10 @@ author: aymericzip
 
 # Чому варто розглянути Intlayer?
 
+## Що таке Intlayer?
+
+**Intlayer** — це бібліотека інтернаціоналізації, розроблена спеціально для розробників JavaScript. Вона дозволяє оголошувати вашу контент будь-де у вашому коді. Вона перетворює оголошення багатомовного контенту на структуровані словники для легкої інтеграції у ваш код. Використовуючи TypeScript, **Intlayer** робить вашу розробку сильнішою та ефективнішою.
+
 ## Чому варто обрати Intlayer, а не альтернативи?
 
 Порівняно з основними рішеннями, такими як `next-intl` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
@@ -87,6 +91,196 @@ 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
+```
+
+Або тут з використанням простору імен:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Цей тип архітектури сповільнює процес розробки та ускладнює підтримку codebase з кількох причин:
+
+1. **Для кожного нового створеного компонента ви повинні:**
+   - Створити новий ресурс/простір імен в папці `locales`
+   - Пам'ятати про імпорт нового простору імен на вашій сторінці
+   - Перекласти ваш контент (часто робиться вручну через копіювання від постачальників AI)
+
+2. **Для будь-яких змін, внесених у ваші компоненти, ви повинні:**
+   - Шукати пов'язаний ресурс/простір імен (далеко від компонента)
+   - Перекласти ваш контент
+   - Переконатися, що ваш контент актуальний для будь-якої локалі
+   - Перевірити, що ваш простір імен не містить невикористаних ключів/значень
+   - Переконатися, що структура ваших JSON файлів однакова для всіх локалей
+
+На професійних проектах, які використовують ці рішення, часто використовуються платформи локалізації для керування перекладом вашого контенту. Однак це може швидко стати дорогим для великих проектів.
+
+Для вирішення цієї проблеми Intlayer використовує підхід, який обмежує ваш контент на компонент і зберігає ваш контент близько до компонента, як ми часто робимо з CSS (`styled-components`), типами, документацією (`storybook`) або unit тестами (`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({
+      uk: "Привіт Світ",
+      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
+   - Інструменти автодоповнення AI в вашій IDE (такі як GitHub Copilot) можуть допомогти вам оголосити ваш контент, зменшуючи копіювання/вставлення
+
+2. **Очистити ваш codebase**
+   - Зменшити складність
+   - Підвищити підтримуваність
+
+3. **Дублювати ваші компоненти та їх пов'язаний контент більш легко (Приклад: компоненти входу/реєстрації тощо)**
+   - Обмежуючи ризик впливу на контент інших компонентів
+   - Копіюючи/вставляючи ваш контент з однієї програми в іншу без зовнішніх залежностей
+
+4. **Уникнути забруднення вашого codebase невикористаними ключами/значеннями для невикористаних компонентів**
+   - Якщо ви не використовуєте компонент, Intlayer не буде імпортувати його пов'язаний контент
+   - Якщо ви видалите компонент, вам буде легше пам'ятати про видалення його пов'язаного контенту, оскільки він буде присутній у тій самій папці
+
+5. **Зменшити витрати обробки для AI агентів при оголошенні вашого багатомовного контенту**
+   - AI агент не потребуватиме сканування всього вашого codebase, щоб знати, де реалізувати ваш контент
+   - Переклади можна легко робити за допомогою інструментів автодоповнення AI в вашій IDE (такі як GitHub Copilot)
+
+6. **Оптимізувати продуктивність завантаження**
+   - Якщо компонент ліниво завантажується, його пов'язаний контент буде завантажено одночасно
+
+## Додаткові можливості Intlayer
+
+| Функція                                                                                                                   | Опис                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](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="Feature" 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)                      | **Середовище з безпекою типів**<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)                    | **Послідовна реалізація серверних компонентів**<br><br>Ідеально підходить для серверних компонентів Next.js, використовуйте одну й ту саму реалізацію для клієнтських та серверних компонентів, без необхідності передавати вашу функцію `t` через кожен серверний компонент. <br><br> - [Серверні компоненти](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> - [Redactor Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Вміст, придатний до Tree-shaking**<br><br>Вміст, придатний до tree-shaking, що зменшує розмір остаточного пакету. Завантажує контент для кожного компонента, виключаючи будь-який невикористаний контент з вашого пакету. Підтримує ледачого завантаження для підвищення ефективності завантаження додатку. <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> - [CLI Intlayer](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 Server**<br><br>Надає MCP (Model Context Protocol) сервер для автоматизації IDE, що дозволяє безперешкодне управління контентом та робочі процеси i18n безпосередньо в вашому середовищі розробки. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/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 та помилка/попередження на етапі збірки                                                                       | ⚠️ Переважно резервні рядки під час виконання                                                                                | ⚠️ Резервні рядки                                                                                                                                       | ⚠️ Потрібен додатковий конфіг                                     | ⚠️ Резервне значення під час виконання                                                                                       | ⚠️ Резервне значення під час виконання                                                                                       | ⚠️ Резервне значення/попередження під час виконання (можна налаштувати) |
+| **Багатий вміст (JSX/Markdown/компоненти)**                 | ✅ Прямої підтримці                                                                                                                 | ⚠️ Обмежена / тільки інтерполяція                                                                                            | ⚠️ ICU синтаксис, не справжній JSX                                                                                                                      | ⚠️ Обмежена                                                       | ❌ Не розроблено для багатих вузлів                                                                                          | ⚠️ Обмежена                                                                                                                  | ⚠️ Обмежена (компоненти через `<i18n-t>`, Markdown через плагіни)       |
+| **Переклад на базі AI**                                     | ✅ Так, підтримує кілька постачальників AI. Використовується з вашими ключами API. Враховує контекст вашої програми та обсяг вмісту | ❌ Ні                                                                                                                        | ❌ Ні                                                                                                                                                   | ❌ Ні                                                             | ❌ Ні                                                                                                                        | ❌ Ні                                                                                                                        | ❌ Ні                                                                   |
+| **Візуальний редактор**                                     | ✅ Так, локальний візуальний редактор + опціональна CMS; можна зовнішнє розміщення вмісту codebase; вбудовуваний                    | ❌ Ні / доступна через зовнішні платформи локалізації                                                                        | ❌ Ні / доступна через зовнішні платформи локалізації                                                                                                   | ❌ Ні / доступна через зовнішні платформи локалізації             | ❌ Ні / доступна через зовнішні платформи локалізації                                                                        | ❌ Ні / доступна через зовнішні платформи локалізації                                                                        | ❌ Ні / доступна через зовнішні платформи локалізації                   |
+| **Локалізований маршрутинг**                                | ✅ Так, підтримує локалізовані шляхи (працює з Next.js та Vite)                                                                     | ⚠️ Немає вбудованого, потребує плагінів (наприклад `next-i18next`) або власне налаштування маршрутизатора                    | ❌ Ні, тільки форматування повідомлень, маршрутизація має бути ручною                                                                                   | ⚠️ Немає вбудованого, потребує плагінів або ручного налаштування  | ✅ Вбудований, App Router підтримує сегмент `[locale]`                                                                       | ✅ Вбудований                                                                                                                | ✅ Вбудований                                                           |
+| **Динамічна генерація маршрутів**                           | ✅ Так                                                                                                                              | ⚠️ Плагін/екосистема або ручне налаштування                                                                                  | ❌ Не передбачено                                                                                                                                       | ⚠️ Плагін/ручне                                                   | ✅ Так                                                                                                                       | ✅ Так                                                                                                                       | ❌ Не передбачено (Nuxt i18n надає)                                     |
+| **Плюралізація**                                            | ✅ Шаблони на основі перелічення                                                                                                    | ✅ Можна налаштовувати (плагіни як i18next-icu)                                                                              | ✅ (ICU)                                                                                                                                                | ✅ (ICU/messageformat)                                            | ✅ Хороша                                                                                                                    | ✅ Хороша                                                                                                                    | ✅ Вбудовані правила плюралізації                                       |
+| **Форматування (дати, числа, валюти)**                      | ✅ Оптимізовані форматери (Intl під капотом)                                                                                        | ⚠️ Через плагіни або власне використання Intl                                                                                | ✅ ICU форматери                                                                                                                                        | ✅ ICU/CLI помічники                                              | ✅ Хороша (помічники Intl)                                                                                                   | ✅ Хороша (помічники Intl)                                                                                                   | ✅ Вбудовані форматери дат/чисел (Intl)                                 |
+| **Формат вмісту**                                           | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                    | ⚠️ .json                                                                                                                     | ✅ .json, .js                                                                                                                                           | ⚠️ .po, .json                                                     | ✅ .json, .js, .ts                                                                                                           | ⚠️ .json                                                                                                                     | ✅ .json, .js                                                           |
+| **Підтримка ICU**                                           | ⚠️ WIP                                                                                                                              | ⚠️ Через плагін (i18next-icu)                                                                                                | ✅ Так                                                                                                                                                  | ✅ Так                                                            | ✅ Так                                                                                                                       | ⚠️ Через плагін (`i18next-icu`)                                                                                              | ⚠️ Через власний форматер/компілятор                                    |
+| **SEO помічники (hreflang, sitemap)**                       | ✅ Вбудовані інструменти: помічники для sitemap, robots.txt, метаданих                                                              | ⚠️ Плагіни спільноти/ручне                                                                                                   | ❌ Не основне                                                                                                                                           | ❌ Не основне                                                     | ✅ Хороша                                                                                                                    | ✅ Хороша                                                                                                                    | ❌ Не основне (Nuxt i18n надає помічники)                               |
+| **Екосистема / Спільнота**                                  | ⚠️ Менша, але швидко зростає та реактивна                                                                                           | ✅ Найбільша та зріла                                                                                                        | ✅ Велика                                                                                                                                               | ⚠️ Менша                                                          | ✅ Середня, сфокусована на Next.js                                                                                           | ✅ Середня, сфокусована на Next.js                                                                                           | ✅ Велика в екосистемі Vue                                              |
+| **Рендеринг на сервері та серверні компоненти**             | ✅ Так, оптимізовано для SSR / React Server Components                                                                              | ⚠️ Підтримується на рівні сторінки, але потребує передачі t-функцій по дереву компонентів для дочірніх серверних компонентів | ⚠️ Підтримується на рівні сторінки з додатковим налаштуванням, але потребує передачі t-функцій по дереву компонентів для дочірніх серверних компонентів | ✅ Підтримується, потребує налаштування                           | ⚠️ Підтримується на рівні сторінки, але потребує передачі t-функцій по дереву компонентів для дочірніх серверних компонентів | ⚠️ Підтримується на рівні сторінки, але потребує передачі t-функцій по дереву компонентів для дочірніх серверних компонентів | ✅ SSR через Nuxt/Vue SSR (без RSC)                                     |
+| **Tree-shaking (завантаження тільки використаного вмісту)** | ✅ Так, за компонентом під час збірки через плагіни Babel/SWC                                                                       | ⚠️ Зазвичай завантажує все (можна поліпшити з namespace/кодом розділення)                                                    | ⚠️ Зазвичай завантажує все                                                                                                                              | ❌ За замовчуванням ні                                            | ⚠️ Часткова                                                                                                                  | ⚠️ Часткова                                                                                                                  | ⚠️ Часткова (з розділенням коду/ручним налаштуванням)                   |
+| **Ледача завантаження**                                     | ✅ Так, за локалею / за словником                                                                                                   | ✅ Так (наприклад, backends/namespaces за запитом)                                                                           | ✅ Так (розділені пакети локалей)                                                                                                                       | ✅ Так (динамічне імпортування каталогу)                          | ✅ Так (за маршрутом/локалю), потрібне управління namespace                                                                  | ✅ Так (за маршрутом/локалю), потрібне управління namespace                                                                  | ✅ Так (асинхронні повідомлення локалей)                                |
+| **Очищення невикористаного вмісту**                         | ✅ Так, за словником під час збірки                                                                                                 | ❌ Ні, тільки через ручне розділення namespace                                                                               | ❌ Ні, всі оголошені повідомлення включені в bundle                                                                                                     | ✅ Так, невикористовані ключі виявлені та видалені під час збірки | ❌ Ні, можна керувати вручну з управлінням namespace                                                                         | ❌ Ні, можна керувати вручну з управлінням namespace                                                                         | ❌ Ні, можливо тільки через ручне ледаче завантаження                   |
+| **Управління великими проектами**                           | ✅ Заохочує модульну структуру, підходить для дизайн-системи                                                                        | ⚠️ Потрібна хороша дисципліна у файлах                                                                                       | ⚠️ Центральні каталоги можуть стати великими                                                                                                            | ⚠️ Може стати складною                                            | ✅ Модульна з налаштуванням                                                                                                  | ✅ Модульна з налаштуванням                                                                                                  | ✅ Модульна з Vue Router/Nuxt i18n налаштуванням                        |
+
 ## Зірки на GitHub
 
 Зірки на GitHub є потужним індикатором популярності проекту, довіри спільноти та довгострокової актуальності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проект корисним, стежать за його розвитком і, ймовірно, впровадять його. Для оцінки цінності проекту зірки допомагають порівняти інтерес до альтернатив і дають уявлення про зростання екосистеми.

package/docs/uk/intlayer_with_analog.md

@@ -400,3 +400,7 @@ Intlayer використовує розширення модулів (module au
 - **Швидкі дії** для легкого створення та оновлення перекладів.
 
 Докладнішу інформацію про використання розширення дивіться в [документації розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+
+### Йдіть далі
+
+Щоб розширити функціональність, ви можете імплементувати [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або екстерналізувати ваш контент за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).

package/docs/uk/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -317,7 +317,134 @@ const { title } = getIntlayer('app');
 
 </Step>
 
-<Step number={7} title="Продовжуйте використовувати ваш улюблений фреймворк">
+<Step number={7} title="Додавання перемикача мов">
+
+Щоб користувачі могли перемикатися між мовами, ви можете створити компонент `LocaleSwitcher`. Цей компонент має відображати список усіх підтримуваних мов та посилатися на ту саму сторінку кожною мовою.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Примітка щодо збереження налаштувань:**
+> Використання `setLocaleInStorageClient` у клієнтському скрипті гарантує, що мовні уподобання користувача зберігаються у кукі. Це дозволяє проміжному ПЗ Intlayer запам'ятати вибір і автоматично перенаправляти користувача на бажану мову при наступних візитах.
+
+</Step>
+
+<Step number={8} title="Sitemap та Robots.txt">
+
+Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.
+
+#### Sitemap
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+Створіть `src/pages/sitemap.xml.ts` для генерації карти сайту, що охоплює всі ваші локалізовані маршрути.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Створіть `src/pages/robots.txt.ts` для керування скануванням пошуковими системами.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="Продовжуйте використовувати ваш улюблений фреймворк">
 
 Продовжуйте будувати свій додаток, використовуючи фреймворк за вашим вибором.
 
@@ -328,7 +455,7 @@ const { title } = getIntlayer('app');
 - Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+preact.md)
   </Step>
 
-<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
+<Step number={15} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 

package/docs/uk/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Lit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Preact i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Preact. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + React. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Solid i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Solid. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Svelte i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Svelte. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vanilla JS i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Vanilla JS. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vue i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Vue. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js 14. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nextjs_15.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-10-25
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 15 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js 15. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js 16. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -612,27 +612,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### Налаштування Babel
-
-Компілятор Intlayer вимагає Babel для витягування та оптимізації вашого контенту. Оновіть ваш `babel.config.js` (або `babel.config.json`), щоб додати плагіни Intlayer:
-
-```typescript fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  intlayerOptimizeBabelPlugin,
-  getExtractPluginOptions,
-  getOptimizePluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
-  ],
-};
-```
-
 ### Конфігурація TypeScript
 
 Intlayer використовує розширення модулів (module augmentation), щоб скористатися перевагами TypeScript і зробити вашу базу коду міцнішою.

package/docs/uk/intlayer_with_nextjs_no_locale_path.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js 16. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js Page Router. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:

package/docs/uk/intlayer_with_nuxt.md

@@ -641,33 +641,6 @@ export default aboutPageContent;
 
 </Steps>
 
-### (Необов'язково) Крок 6b: Створіть layout з навігацією
-
-Nuxt layouts дозволяють визначити спільну структуру для ваших сторінок. Створіть default layout, який включає locale switcher та навігацію:
-
-```vue fileName="layouts/default.vue"
-<script setup lang="ts">
-import Links from "~/components/Links.vue";
-import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
-</script>
-
-<template>
-  <div>
-    <header>
-      <LocaleSwitcher />
-    </header>
-    <main>
-      <slot />
-    </main>
-
-    <Links href="/">Головна</Links>
-    <Links href="/about">Про нас</Links>
-  </div>
-</template>
-```
-
-Компонент `Links` (показаний нижче) забезпечує автоматичну локалізацію внутрішніх навігаційних посилань.
-
 ### Конфігурація Git
 
 Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх коміту в ваш репозиторій Git.