@intlayer/docs 9.4.4 → 9.5.0

package/docs/uk/intlayer_with_vite+react_compiler.md

@@ -1,652 +0,0 @@
----
-createdAt: 2024-03-07
-updatedAt: 2026-06-23
-title: "Vite + React i18n - Повний посібник з перекладу вашого застосунку"
-description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Vite + React. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
-keywords:
-  - Інтернаціоналізація
-  - Документація
-  - Intlayer
-  - Vite
-  - React
-  - Компілятор
-  - ШІ
-slugs:
-  - doc
-  - environment
-  - vite-and-react
-  - compiler
-applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
-applicationShowcase: https://intlayer-vite-react-template.vercel.app
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
-history:
-  - version: 8.9.0
-    date: 2026-05-04
-    changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
-  - version: 8.2.0
-    date: 2026-03-09
-    changes: "Update compiler options, add FilePathPattern support"
-  - version: 8.1.6
-    date: 2026-02-23
-    changes: "Початковий реліз"
-author: aymericzip
----
-
-# Як зробити багатомовним (i18n) існуючий додаток Vite та React згодом (посібник з i18n 2026)
-
-<Tabs defaultTab="video">
-  <Tab label="Відео" value="video">
-
-<iframe title="Найкраще рішення i18n для Vite та React? Відкрийте для себе Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-  </Tab>
-  <Tab label="Код" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-vite-react-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Демо CodeSandbox - Як інтернаціоналізувати ваш додаток за допомогою Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Демо" value="demo">
-
-<iframe
-  src="https://intlayer-vite-react-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Демо - intlayer-vite-react-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-Дивіться [Шаблон додатка](https://github.com/aymericzip/intlayer-vite-react-template) на GitHub.
-
-## Зміст
-
-<TOC/>
-
-## Чому важко інтернаціоналізувати існуючий додаток?
-
-Якщо ви коли-небудь пробували додати підтримку кількох мов у додаток, створений лише для однієї, ви знаєте цей біль. Це не просто «важко», це нудно. Вам доводиться перебирати кожен окремий файл, вишукувати кожен рядок тексту і переносити їх в окремі файли словників.
-
-Потім настає ризикована частина: заміна всього цього тексту програмними хуками без порушення макета чи логіки. Це та робота, яка зупиняє розробку нових функцій на тижні і здається нескінченним рефакторингом.
-
-## Що таке Intlayer Compiler?
-
-**Intlayer Compiler** був створений, щоб пропустити цю ручну рутинну роботу. Замість того, щоб ви вручну витягували рядки, компілятор робить це за вас. Сканує ваш код, знаходить текст і використовує ШІ для створення словників у фоновому режимі.
-Потім він змінює ваш код під час збірки, щоб вставити необхідні хуки i18n. По суті, ви продовжуєте писати свій додаток так, ніби він одномовний, а компілятор автоматично обробляє багатомовну трансформацію.
-
-> Документація компілятора: [https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md)
-
-### Обмеження
-
-Оскільки компілятор виконує аналіз і трансформацію кода (вставку хуків і генерацію словників) під час **компіляції**, це може **сповільнити процес збірки** вашого додатка.
-
-Щоб пом'якшити цей вплив під час розробки, ви можете налаштувати компілятор для роботи в режимі [`'build-only'`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) або вимкнути його, коли він не потрібен.
-
----
-
-## Покроковий посібник з налаштування Intlayer у додатку Vite та React
-
-<Steps>
-
-<Step number={1} title="Встановлення залежностей">
-
-Встановіть необхідні пакети за допомогою npm:
-
-```bash packageManager="npm"
-npx intlayer init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer init --interactive
-```
-
-> прапорець `--interactive` не є обов'язковим. Використовуйте `intlayer-cli init`, якщо ви є ШІ-агентом.
-
-> Ця команда виявить ваше середовище та встановить необхідні пакети. Наприклад:
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add vite-intlayer --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-```
-
-- **intlayer**
-  Основний пакет, який надає інструменти інтернаціоналізації для керування конфігурацією, перекладу, [декларації вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), транспіляції та [команд CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
-
-- **react-intlayer**
-  Пакет, який інтегрує Intlayer з додатком React. Він надає провайдери контексту та хуки для інтернаціоналізації React.
-
-- **vite-intlayer**
-  Включає плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення для визначення бажаної мови користувача, керування файлами cookie та обробки перенаправлення URL-адрес.
-
-</Step>
-
-<Step number={2} title="Налаштування вашого проєкту">
-
-Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.UKRAINIAN, Locales.FRENCH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  compiler: {
-    /**
-     * Вказує, чи має бути увімкнено компілятор.
-     */
-    enabled: true,
-
-    /**
-     * Вихідний каталог для оптимізованих словників.
-     */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
-
-    /**
-     * Вставте лише вміст у згенерований файл, без ключа.
-     */
-    noMetadata: false,
-
-    /**
-     * Префікс ключа словника
-     */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * Вказує, чи мають компоненти зберігатися після трансформації.
-     * Таким чином компілятор можна запустити лише один раз для трансформації додатка, а потім видалити.
-     */
-    saveComponents: false,
-  },
-  ai: {
-    provider: "openai",
-    model: "gpt-5-mini",
-    apiKey: process.env.OPEN_AI_API_KEY,
-    applicationContext: "Цей додаток, це карта", // Примітка: ви можете налаштувати цей опис додатка
-  },
-};
-
-export default config;
-```
-
-> **Примітка**: Переконайтеся, що ваш `OPEN_AI_API_KEY` встановлений у змінних середовища.
-
-> Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення проміжного програмного забезпечення, назви файлів cookie, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі тощо. Повний список доступних параметрів дивіться в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
-
-</Step>
-
-<Step number={3} title="Інтеграція Intlayer у вашу конфігурацію Vite">
-
-Додайте плагін intlayer у вашу конфігурацію.
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-> Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує збірку файлів декларації вмісту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у додатку Vite. Крім того, він надає аліаси для оптимізації продуктивності.
-
-> Плагін Vite `intlayerCompiler()` використовується для витягування вмісту з компонентів і запису файлів `.content`.
-
-> З версії Intlayer v9 компілятор включений безпосередньо в плагін `intlayer()` і активується автоматично, коли встановлено `compiler.enabled` з шляхом `compiler.output`. Реєстрація `intlayerCompiler()` окремо, як показано нижче, тепер необов'язкова — вона дедублює себе, якщо також додана. Див. [примітки до випуску v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/releases/v9.md).
-
-</Step>
-
-<Step number={4} title="Компіляція вашого коду">
-
-Просто пишіть свої компоненти з жорстко закодованими рядками вашою мовою за замовчуванням. Компілятор зробить усе інше.
-
-Приклад того, як може виглядати ваша сторінка:
-
-<Tabs>
- <Tab value="Код">
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
- <Tab value="Результат">
-
-```ts fileName="i18n/app-content.content.json"
-{
-  key: "app-content",
-  content: {
-    nodeType: "translation",
-    translation: {
-      en: {
-        viteLogo: "Vite logo",
-        reactLogo: "React logo",
-        title: "Vite + React",
-        countButton: "count is",
-        editMessage: "Edit",
-        hmrMessage: "and save to test HMR",
-        readTheDocs: "Click on the Vite and React logos to learn more",
-      },
-      uk: {
-        viteLogo: "Логотип Vite",
-        reactLogo: "Логотип React",
-        title: "Vite + React",
-        countButton: "рахунок дорівнює",
-        editMessage: "Редагувати",
-        hmrMessage: "і зберегти для перевірки HMR",
-        readTheDocs: "Натисніть на логотипи Vite та React, щоб дізнатися більше",
-      },
-    }
-  }
-}
-```
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-  const content = useIntlayer("app-content");
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img
-            src={reactLogo}
-            className="logo react"
-            alt={content.reactLogo.value}
-          />
-        </a>
-      </div>
-      <h1>{content.title}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          {content.countButton} {count}
-        </button>
-        <p>
-          {content.editMessage} <code>src/App.tsx</code> {content.hmrMessage}
-        </p>
-      </div>
-      <p className="read-the-docs">{content.readTheDocs}</p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
-</Tabs>
-
-- **`IntlayerProvider`** використовується для надання локалі вкладеним компонентам.
-
-</Step>
-
-<Step number={6} title="Зміна мови вашого вмісту" isOptional={true}>
-
-Щоб змінити мови вашого вмісту, ви можете використовувати функцію `setLocale`, яку надає хук `useLocale`. Ця функція дозволяє встановити локаль додатка та відповідним чином оновити вміст.
-
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import type { FC } from "react";
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher: FC = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.English)}>
-      Змінити мову на англійську
-    </button>
-  );
-};
-```
-
-> Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={7} title="Заповнити відсутні переклади" isOptional={true}>
-
-Intlayer надає інструмент CLI, щоб допомогти вам заповнити відсутні переклади. Ви можете використовувати команду `intlayer` для тестування та заповнення відсутніх перекладів у вашому коді.
-
-```bash packageManager="npm"
-npx intlayer test         # Перевірити, чи є відсутні переклади
-```
-
-```bash packageManager="yarn"
-yarn intlayer test         # Перевірити, чи є відсутні переклади
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer test         # Перевірити, чи є відсутні переклади
-```
-
-```bash packageManager="bun"
-bun x intlayer test         # Перевірити, чи є відсутні переклади
-```
-
-```bash packageManager="npm"
-npx intlayer fill         # Заповнити відсутні переклади
-```
-
-```bash packageManager="yarn"
-yarn intlayer fill         # Заповнити відсутні переклади
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer fill         # Заповнити відсутні переклади
-```
-
-```bash packageManager="bun"
-bun x intlayer fill         # Заповнити відсутні переклади
-```
-
-> Для отримання більш детальної інформації зверніться до [документації CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/ci.md)
-
-</Step>
-
-</Steps>
-
-### (Опційно) Sitemap і robots.txt (генерація під час збірки)
-
-Intlayer надає `generateSitemap` і `getMultilingualUrls` - утиліти для формування багатомовних `sitemap.xml` і `robots.txt` для краулерів та автоматичного запису в `public/`. Зазвичай запускають невеликий Node-скрипт **перед** Vite (наприклад, npm-хуки `predev` / `prebuild`).
-
-#### Sitemap
-
-Генератор sitemap враховує локалі й додає метадані для краулерів.
-
-> Підтримується простір імен `xhtml:link` (hreflang). Замість плоского списку URL Intlayer пов’язує всі мовні версії сторінки в обидва боки (наприклад `/about`, `/fr/about` або `/about?lang=fr` залежно від режиму маршрутизації).
-
-#### Robots.txt
-
-Використовуйте `getMultilingualUrls`, щоб правила `Disallow` покривали всі локалізовані варіанти шляхів.
-
-#### 1. Файл `generate-seo.mjs` у корені проєкту
-
-```javascript fileName="generate-seo.mjs"
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import { generateSitemap, getMultilingualUrls } from "intlayer";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
-  /\/$/,
-  ""
-);
-
-const pathList = [
-  { path: "/", changefreq: "daily", priority: 1.0 },
-  { path: "/about", changefreq: "monthly", priority: 0.7 },
-];
-
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
-fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
-
-const getAllMultilingualUrls = (urls) =>
-  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
-
-const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
-
-const robotsTxt = [
-  "User-agent: *",
-  "Allow: /",
-  ...disallowedPaths.map((path) => `Disallow: ${path}`),
-  "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
-].join("\n");
-
-fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
-
-console.log("SEO files generated successfully.");
-```
-
-Пакет `intlayer` має бути встановлений. У продакшені задайте `SITE_URL` у середовищі (наприклад у CI).
-
-> Для Node ESM краще `generate-seo.mjs`. Для `generate-seo.js` додайте `"type": "module"` у `package.json` або ввімкніть ESM інакше.
-
-#### 2. Запуск скрипта перед Vite
-
-```json fileName="package.json"
-{
-  "scripts": {
-    "dev": "vite",
-    "prebuild": "node generate-seo.mjs",
-    "build": "vite build",
-    "preview": "vite preview"
-  }
-}
-```
-
-Підлаштуйте команди для pnpm або yarn. Можна викликати скрипт із CI.
-
-### Конфігурація Git
-
-Рекомендується ігнорувати файли, створені Intlayer. Це дозволяє уникнути їхнього коміту у ваш Git-репозиторій.
-
-Для цього ви можете додати наступні інструкції до вашого файлу `.gitignore`:
-
-```plaintext fileName=".gitignore"
-# Ігнорувати файли, створені Intlayer
-.intlayer
-```
-
-### Розширення VS Code
-
-Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне **розширення Intlayer для VS Code**.
-
-[Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Це розширення надає:
-
-- **Автодоповнення** для ключів перекладу.
-- **Виявлення помилок у реальному часі** для відсутніх перекладів.
-- **Вбудований попередній перегляд** перекладеного вмісту.
-- **Швидкі дії** для легкого створення та оновлення перекладів.
-
-Для отримання додаткової інформації про те, як користуватися розширенням, зверніться до [документації розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
-
-### Йти далі
-
-Щоб піти далі, ви можете впровадити [візуальний редактор](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).
-
-## Часто задавані запитання
-
-<FAQ>
-
-<Question title="Які є різні рішення для інтернаціоналізації додатків Vite та React?">
-
-- **`react-i18next`**: завантаження JSON під час виконання.
-- **`react-intl`**: формат ICU.
-- **`Intlayer`**: автоматичне вилучення рядків під час збирання, підтримка HMR, типізація TypeScript та AI переклад.
-
-Див. [чому Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/interest_of_intlayer.md).
-
-</Question>
-
-<Question title="Скільки i18n додає до розміру бандла Vite?">
-
-Компілятор включає лише ті рядки, які реально використовує компонент, зберігаючи мінімальний розмір коду. Див. [оптимізацію бандла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md).
-
-</Question>
-
-<Question title="Чи можу я мігрувати з react-i18next або react-intl без переписування моїх компонентів?">
-
-Так, за допомогою адаптерів сумісності або безпосереднього ввімкнення компілятора у вашому проекті.
-
-</Question>
-
-<Question title="Чи можу я зберігати мої існуючі JSON файли перекладів?">
-
-Так. [sync JSON плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-json.md) зберігає ваші файли `/messages/{locale}/{namespace}.json` як джерело істини та генерує словники Intlayer з них в обох напрямках. [sync PO плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-po.md) робить те ж саме для gettext каталогів, а [файли для окремих локалей](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/per_locale_file.md) дозволяють розділити контент за мовами замість групування всіх перекладів в один файл.
-
-</Question>
-
-<Question title="Чи потрібно переносити вміст ключ за ключем?">
-
-Ні. Запустіть `npx intlayer extract`, і Intlayer прочитає ваші вихідні файли, витягне призначені для користувача рядки і створить файл `.content` поруч із кожним компонентом, завдяки чому ви переглядаєте diff замість копіювання рядків у каталог вручну. Див. [команду extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md).
-
-Варто знати два обмеження. Компілятор працює за допомогою статичного аналізу, тому рядки, які існують лише під час виконання, такі як коди помилок API або поля CMS, залишаються недосяжними і все ще потребують оголошеного словника. І він повинен відрізняти текст для користувача від логіки додатка, як-от `className="active"` або код статусу, що вимагає кількох анотацій у великій кодовій базі.
-
-Для повної автоматизації [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) робить те саме під час збирання для коду JSX, TSX, Vue та Svelte, генеруючи словники під час кожної зміни без необхідності підтримувати ключі вручну. Оскільки він працює на основі статичного аналізу, динамічні рядки середовища виконання залишаються поза його межами.
-
-</Question>
-
-<Question title="Які інструменти для редактора та AI агентів доступні?">
-
-П'ять інструментів, усі опціональні:
-
-- **[Розширення VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/vs_code_extension.md)**: перехід від ключа `useIntlayer` до файлу контенту, вилучення рядків із компонента та запуск build, fill, test, push і pull із палітри команд або вкладки Intlayer.
-- **[LSP сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/lsp.md)**: та сама функціональність у будь-якому редакторі з підтримкою LSP, включно з переходом до визначення, переглядом перекладеного значення під час наведення та автодоповненням ключів. Також підтримує виклики `i18next`, `react-i18next`, `next-intl` та `use-intl`.
-- **[MCP сервер](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/mcp_server.md)**: надає документацію та CLI Intlayer для Cursor, VS Code, Claude Desktop, Claude Code та ChatGPT.
-- **[Навички агента (Agent skills)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/agent_skills.md)**: спеціалізовані навички `intlayer-config`, `intlayer-cli` та `intlayer-content`.
-- **[Плагін ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/eslint.md)**: правило `no-raw-text` відстежує жорстко закодовані рядки.
-
-</Question>
-
-<Question title="Чи слід мені використовувати компілятор, чи оголошувати вміст самостійно?">
-
-Для швидкої розробки компілятор підходить ідеально. Для складних форм множини або нестандартної логіки явні файли вмісту дають більше гнучкості.
-
-</Question>
-
-<Question title="Що відбувається з рядками, які компілятор не може виявити?">
-
-Динамічні рядки середовища виконання обробляються викликом `t()` або звичайними файлами `.content`.
-
-</Question>
-
-<Question title="Як компілятор визначає, що є призначеним для користувача текстом?">
-
-Він орієнтується на текстові вузли JSX та стандартні атрибути на зразок `aria-label` або `placeholder`, виключаючи системні ідентифікатори.
-
-</Question>
-
-<Question title="Як заповнити відсутні переклади?">
-
-Крок 7 описує це. Команда `npx intlayer fill` передає вилучений контент обраній LLM, а прапорець `--git-diff` обмежує зміни поточною гілкою.
-
-</Question>
-
-<Question title="Як змінити мову під час виконання?">
-
-Крок 6 описує це. Хук `useLocale` надає активну мову, список мов та функцію для перемикання; компоненти перерендериваються без перезавантаження сторінки.
-
-</Question>
-
-<Question title="Чи підтримує Intlayer форми множини, стать та форматований текст (rich text)?">
-
-Так: [форми множини](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/plurial.md), [контент з урахуванням статі](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/gender.md), умови, [вставки (insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/markdown.md) та [форматування](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/formatters.md) для чисел, дат і валют.
-
-</Question>
-
-<Question title="Як перекладачі можуть редагувати вміст без втручання в код?">
-
-Через [візуальний редактор](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), яка відокремлює вміст і дозволяє оновлювати його без повторного розгортання коду.
-
-</Question>
-
-<Question title="Чи є Intlayer безкоштовним та відкритим кодом?">
-
-Так, під ліцензією Apache 2.0, включно з комерційним використанням. Хмарна CMS - це додаткова платна послуга, яку також можна [розгорнути самостійно (self-host)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/self_hosting.md).
-
-</Question>
-
-</FAQ>