@intlayer/docs 9.4.4 → 9.5.0

package/blog/uk/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,293 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Як постфактум зробити наявний додаток Next.js багатомовним (i18n посібник 2026)"
+description: "Посібник 2026 року про те, як додати багатомовність (i18n) до наявного додатку Next.js без виснажливого рефакторингу. Автоматичне вилучення, переклад через ШІ та маршрутизація з Intlayer."
+keywords:
+  - Next.js i18n
+  - Інтернаціоналізація
+  - Перекласти наявний додаток Next.js
+  - Next.js 16
+  - Intlayer
+  - Багатомовність
+  - React i18n
+  - Компілятор
+  - ШІ-переклад
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Як постфактум зробити наявний додаток Next.js багатомовним (i18n посібник 2026)
+
+Додати інтернаціоналізацію (i18n) у проєкт Next.js із самого початку відносно легко. Але що робити, коли у вас вже є готовий production-додаток однією мовою, і вам потрібно зробити його багатомовним **постфактум**?
+
+З класичними бібліотеками на кшталт `next-intl` чи `next-i18next` це перетворюється на випробування:
+
+- Пошук захардкодженного тексту в сотнях файлів JSX/TSX.
+- Створення вкладених JSON-словників і вигадування назв ключів (`pages.dashboard.header.title`).
+- Заміна тексту на виклики хуків (`t('...')`).
+- Перебудова всієї папки `app/` на `app/[locale]/...`, що ламає наявні маршрути та індексацію в пошукових системах.
+
+У 2026 році вам не потрібно переписувати код. З **Intlayer** ви можете додати багатомовність за лічені хвилини за допомогою автоматичного вилучення тексту, перекладу за допомогою ШІ та гнучкої маршрутизації.
+
+> Шукаєте повний покроковий посібник для Next.js 16 App Router? Перегляньте нашу документацію: [Переклад Next.js 16 з Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_16.md).
+
+## Зміст
+
+<TOC/>
+
+## Дилема доопрацювання: Чому інтернаціоналізація наявного додатку є складною
+
+Розробники стикаються з трьома проблемами:
+
+1. **Руйнування кодової бази**: Ручне перенесення тексту вимагає змін майже в кожному компоненті.
+2. **Вимоги до маршрутизації**: Необхідність переносити файли в динамічний сегмент `[locale]`.
+3. **Рутинна робота над перекладом**: Копіювання та переклад ключів десятками мов.
+
+Intlayer вирішує це за допомогою **компілятора**, **декларативних словників** і **гнучкої маршрутизації**.
+
+## Автоматичне вилучення контенту (без ручного пошуку)
+
+### Варіант A: CLI-утиліта вилучення (`npx intlayer extract`)
+
+Запустіть утиліту вилучення Intlayer у вашому проєкті:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Команда створить типізовані файли декларацій (`.content.ts`) поруч із кожним компонентом.
+
+### Варіант B: Компілятор Intlayer (Вилучення під час збірки)
+
+Пишіть звичайний текст у компонентах. Компілятор під час збірки автоматично вилучить його і підключить локалізовані дані:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+За лаштунками Intlayer будує словник і пов'язує компонент із локалізованим контентом, повністю усуваючи необхідність ручного рефакторингу.
+
+У цьому випадку буде створено файл `src/app/page.content.ts` із таким вмістом:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## ШІ-переклад із вашою улюбленою мовною моделлю
+
+Перекладайте вміст за секунди за допомогою OpenAI, Anthropic, DeepSeek чи Mistral:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext: "SaaS панель для продуктивності та командної роботи",
+  },
+};
+
+export default config;
+```
+
+Виконання команди `npx intlayer fill` автоматично заповнить перекладами для всіх налаштованих мов ваші файли декларацій `.content.ts`:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      uk: "Ласкаво просимо на нашу платформу",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      uk: "Почніть знайомство з сучасними можливостями вже сьогодні.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Оскільки Intlayer надає високорівневий `applicationContext` для LLM, згенеровані переклади зберігають технічні нюанси, стиль бренду та граматичний контекст значно краще, ніж традиційні інструменти автоматичного перекладу.
+
+Щоб переконатися, що жоден рядок не було пропущено перед виходом у прод:
+
+```bash
+npx intlayer test
+```
+
+## Багатомовна маршрутизація без зміни чинних URL
+
+Intlayer підтримує:
+
+- **Параметри запиту / Cookies (`search-params`)**: Збереження структури `/app/page.tsx` без створення папки `[locale]`.
+- **Префіксний режим (`prefix` / `prefix-all-locales`)**: Зручне налаштування маршрутів для SEO.
+
+Налаштуйте інтеграцію з Next.js за лічені секунди:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Огорніть кореневий layout компонентом `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Багатомовне SEO
+
+Автоматична генерація метаданих і тегів `hreflang` для глобальної видимості:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Поглиблення: Готові до покрокового налаштування?
+
+Повний технічний посібник із налаштування middleware, генерації статичних сторінок (`generateStaticParams`) та Server Components доступний у документації:
+
+👉 **[Повний посібник із перекладу Next.js 16 з Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_16.md)**
+
+## Часті запитання (FAQ)
+
+<FAQ>
+
+<Question title="Чи можу я додати багатомовність без перенесення файлів у app/[locale]?">
+
+Так. Intlayer підтримує `routing.mode: "search-params"` і виявлення через cookies/заголовки, зберігаючи чинну структуру тек.
+
+</Question>
+<Question title="Чи потрібно вручну змінювати всі рядки тексту в проєкті?">
+
+Ні. За допомогою `npx intlayer extract` або компілятора Intlayer тексти вилучаються автоматично.
+
+</Question>
+<Question title="Чому бандл Intlayer менший, ніж у next-intl?">
+
+Завдяки модульній декларації для кожного компонента та оптимізації макросами під час збірки.
+
+</Question>
+<Question title="Чи можна скористатися ШІ для автоматичного перекладу компонентів?">
+
+Так, команда `npx intlayer fill` використовує LLM для перекладу з урахуванням контексту проєкту.
+
+</Question>
+</FAQ>

package/blog/uk/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,358 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Як постфактум зробити наявний додаток Vite і React багатомовним (i18n посібник 2026)"
+description: "Посібник 2026 року про те, як додати багатомовність (i18n) до наявного додатку Vite і React без виснажливого рефакторингу. Автоматичне вилучення, переклад через ШІ та оптимізація бандлу з Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Інтернаціоналізація
+  - Перекласти наявний додаток Vite
+  - Перекласти наявний додаток React
+  - Intlayer
+  - Багатомовність
+  - Компілятор
+  - ШІ-переклад
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+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: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Як постфактум зробити наявний додаток Vite і React багатомовним (i18n посібник 2026)
+
+Додати інтернаціоналізацію (i18n) у проєкт Vite і React із самого початку відносно легко. Але що робити, коли у вас вже є готовий production-додаток однією мовою, і вам потрібно зробити його багатомовним **постфактум**?
+
+З класичними бібліотеками на кшталт `react-i18next` або `react-intl` це перетворюється на виснажливий процес:
+
+- Пошук захардкодженного тексту в сотнях файлів JSX і TSX.
+- Створення вкладених JSON-словників і вигадування довільних ключів перекладу (`components.header.title` тощо).
+- Заміна тексту інтерфейсу на громіздкі виклики хуків (`t('...')`).
+- Перебудова маршрутизації на клієнті, керування станом та логіки перемикання мов.
+
+У 2026 році вам не потрібно переписувати кодову базу. З **Intlayer** ви можете інтегрувати інтернаціоналізацію в наявний додаток Vite і React за кілька хвилин завдяки автоматичному вилученню тексту, перекладу за допомогою ШІ та безшовній інтеграції.
+
+> Шукаєте повний покроковий технічний посібник для Vite і React? Перегляньте нашу документацію: [Переклад Vite і React з Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+react.md).
+
+## Зміст
+
+<TOC/>
+
+## Дилема доопрацювання: Чому інтернаціоналізація наявного додатку є складною
+
+Під час інтернаціоналізації наявного додатку Vite і React розробники стикаються з трьома суттєвими перешкодами:
+
+1. **Порушення кодової бази**: Ручне вилучення рядків у JSON-словники потребує модифікації майже кожного файлу компонента. Це призводить до гігантських Git-diffs, ризиків конфліктів злиття та можливих регресій у верстці.
+2. **Накладні витрати на керування ключами**: Вигадування ключів на кшталт `dashboard.hero.ctaButton` для кожного фрагмента тексту уповільнює розробку та додає когнітивне навантаження при кожній зміні тексту.
+3. **Монотонний переклад**: Після вилучення рядків їх переклад 5, 10 чи 20 мовами вимагає нескінченного копіювання або замовлення дорогих зовнішніх сервісів локалізації.
+
+Intlayer розв'язує ці проблеми на рівні архітектури за допомогою **вилучення на базі компілятора**, **декларативних словників на рівні компонентів** та **нативної інтеграції з Vite**.
+
+## Автоматичне вилучення контенту (без ручного пошуку тексту)
+
+Замість того щоб вручну вилучати кожен рядок із JSX, Intlayer пропонує два прості варіанти:
+
+### Варіант A: Інструмент вилучення CLI (`npx intlayer extract`)
+
+Ви можете запустити інструмент вилучення Intlayer безпосередньо у вашому проєкті:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Ця команда сканує ваші компоненти React, знаходить видимий для користувача текст і автоматично створює файли декларацій контенту (`.content.ts`) поруч із кожним компонентом. Логіка залишається декларативною, зрозумілою та суворо типізованою.
+
+### Варіант B: Компілятор Intlayer (Вилучення під час збирання)
+
+Увімкнувши компілятор Intlayer у конфігурації, ви можете продовжувати писати компоненти зі звичайним текстом вашою стандартною мовою. Під час збирання компілятор вилучає текст і автоматично вставляє локалізований контент:
+
+```tsx fileName="src/App.tsx"
+// Пишіть звичайний React-код. Компілятор автоматично вилучить текст
+export default function App() {
+  return (
+    <section>
+      <h1>Ласкаво просимо на нашу платформу</h1>
+      <p>Почніть відкривати сучасні можливості вже сьогодні.</p>
+    </section>
+  );
+}
+```
+
+У фоновому режимі Intlayer будує словник і пов'язує компонент із локалізованим контентом, повністю виключаючи ручний рефакторинг.
+
+У цьому випадку буде створено файл декларації `src/App.content.ts` із такою структурою:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    laskavoProsymoNaNashuPlatformu: t({
+      uk: "Ласкаво просимо на нашу платформу",
+    }),
+    pochnitVidkryvatySuchasniMozhlyvosti: t({
+      uk: "Почніть відкривати сучасні можливості вже сьогодні.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Переклад за допомогою ШІ та вашої улюбленої LLM
+
+Після вилучення контенту його переклад десятками мов не повинен тривати днями. Intlayer має вбудовану CLI для перекладу через OpenAI, Anthropic, DeepSeek або Mistral за допомогою ваших власних ключів API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Налаштуйте мови та ШІ-провайдера у файлі `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      Locales.UKRAINIAN,
+    ],
+    defaultLocale: Locales.UKRAINIAN,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Сучасний SaaS-додаток і панель керування, створені на базі Vite та React",
+  },
+};
+
+export default config;
+```
+
+Виконання `npx intlayer fill` наповнить ваші файли декларацій якісними перекладами для всіх налаштованих мов:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    laskavoProsymoNaNashuPlatformu: t({
+      uk: "Ласкаво просимо на нашу платформу",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    pochnitVidkryvatySuchasniMozhlyvosti: t({
+      uk: "Почніть відкривати сучасні можливості вже сьогодні.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Оскільки Intlayer передає `applicationContext` моделі, створені переклади зберігають технічний контекст, стилістику бренду та граматичні особливості значно краще за стандартні інструменти.
+
+Щоб перед релізом перевірити, чи не залишилося неперекладених рядків:
+
+```bash
+npx intlayer test
+```
+
+## Інтеграція з Vite та налаштування Provider
+
+Інтеграція Intlayer у Vite потребує лише додавання плагіна у `vite.config.ts` та огортання кореневого компонента в `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Починаючи з Intlayer v9, компілятор включений безпосередньо в плагін `intlayer()` і активується автоматично після налаштування `compiler.enabled` у `intlayer.config.ts`.
+
+Огорніть свій додаток компонентом `IntlayerProvider` у кореневому компоненті:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Динамічне перемикання мови
+
+Легко перемикайте мову в будь-якій частині додатку за допомогою хука `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## Багатомовне SEO (Sitemap та Robots.txt)
+
+Intlayer містить форматери, такі як `generateSitemap` та `getMultilingualUrls`, які генерують оптимізовані для пошукових роботів файли `sitemap.xml` та `robots.txt` для статичних розгортань Vite:
+
+```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 || "https://example.com").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-файли успішно згенеровано.");
+```
+
+Додайте скрипт `prebuild` у ваш `package.json`, щоб запускати його перед `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Докладніше: Готові до повного покрокового впровадження?
+
+Цей посібник надав концептуальний огляд того, як додати інтернаціоналізацію до наявного додатку Vite і React у 2026 році без ускладнень у кодовій базі.
+
+Якщо ви готові налаштувати кожен елемент детально, включаючи сувору типізацію TypeScript, динамічні словники та візуальний редактор, перейдіть до нашого повного посібника:
+
+👉 **[Повний посібник з перекладу Vite і React з Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+react.md)**
+
+## Часті запитання (FAQ)
+
+<FAQ>
+
+<Question title="Чи можу я зробити додаток Vite і React багатомовним без ручного переписування всіх рядків?">
+
+Так. Ви можете використати команду `npx intlayer extract` для автоматичного пошуку та вилучення рядків у файли декларацій, або скористатися компілятором Intlayer, який трансформує компоненти під час збирання, поки ви пишете звичайний JSX.
+
+</Question>
+<Question title="Як Intlayer зменшує розмір бандлу Vite у порівнянні з react-i18next або react-intl?">
+
+Intlayer використовує словники на рівні окремих компонентів та оптимізацію макросами під час збирання. У бандл потрапляють лише ті дані, які необхідні компонентам на поточній сторінці, без завантаження великих JSON-файлів. Динамічні словники також дозволяють завантажувати мови за запитом.
+
+</Question>
+<Question title="Чи можу я використовувати ШІ для перекладу наявних компонентів багатьма мовами?">
+
+Так. CLI Intlayer містить команду `npx intlayer fill`, яка підключається до обраного постачальника ШІ (OpenAI, Anthropic, Mistral, DeepSeek) для генерації контекстних перекладів для всіх налаштованих мов.
+
+</Question>
+<Question title="Чи можу я мігрувати з react-i18next або react-intl без переписування компонентів?">
+
+Так. Intlayer надає адаптери сумісності для `react-i18next` та `react-intl`, а також плагіни для автоматичної синхронізації наявних JSON-файлів перекладу (`sync-json`).
+
+</Question>
+
+</FAQ>