@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/uk/intlayer_with_nextjs_16.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-06
-title: Next.js i18n - Як перекласти додаток Next.js 16 у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на Next.js 16 багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: "Next.js 16 i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js 16. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -70,27 +70,66 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення багатомовної підтримки в сучасних вебдодатках. Intlayer безшовно інтегрується з останнім фреймворком **Next.js 16**, включаючи його потужний **App Router**. Він оптимізований для роботи з **Server Components** для ефективного рендерингу та повністю сумісний з [**Turbopack**](https://nextjs.org/docs/architecture/turbopack).
+Порівняно з основними рішеннями, такими як `next-intl` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Отримувати доступ до перекладів як у клієнтських, так і в серверних компонентах**.
-- **Забезпечити підтримку TypeScript** з автогенерованими типами, покращуючи автодоповнення та виявлення помилок.
-- **Скористатися розширеними функціями**, такими як динамічне визначення та перемикання локалі.
+<Accordion header="Повна підтримка Next.js">
 
-> Intlayer сумісний з Next.js 12, 13, 14 та 16. Якщо ви використовуєте Next.js Page Router, ви можете звернутися до цього [посібника](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_page_router.md).
-> Роутинг на основі локалі корисний для SEO, розміру бандла та продуктивності. Якщо він вам не потрібен, ви можете звернутися до цього [посібника](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_no_locale_path.md).
-> Для Next.js 12, 13, 14 з App Router зверніться до цього [посібника](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_14.md).
+Intlayer оптимізовано для роботи з **компонентами сервера** для ефективного відтворення та повністю сумісно з [**Turbopack**](https://nextjs.org/docs/architecture/turbopack). Він не блокує статичний рендеринг і пропонує проміжне програмне забезпечення, а також усі функції, необхідні для інтернаціоналізації масштабування (i18n).
+
+> Intlayer сумісний із Next.js 12, 13, 14, 15 і 16. Якщо ви використовуєте маршрутизатор сторінок Next.js, ви можете переглянути цей [посібник](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_page_router.md).
+> Локальна маршрутизація корисна для SEO, розміру пакета та продуктивності. Якщо він вам не потрібен, ви можете звернутися до цього [посібника](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md).
+> Щодо Next.js 12, 13, 14 і 15 із маршрутизатором програм див. цей [посібник](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md).
+
+</Accordion>
+
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Покроковий посібник із налаштування Intlayer у додатку Next.js
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -122,7 +161,9 @@ bun x intlayer init
 
   Пакет, який інтегрує Intlayer з Next.js. Він надає провайдери контексту та хуки для інтернаціоналізації в Next.js. Крім того, він включає плагін Next.js для інтеграції Intlayer з [Webpack](https://webpack.js.org/) або [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), а також проксі для визначення пріоритетної локалі користувача, керування файлами cookie та обробки перенаправлення URL.
 
-### Крок 2: Налаштуйте свій проєкт
+</Step>
+
+<Step number={2} title="Налаштуйте свій проєкт">
 
 Ось остаточна структура, яку ми створимо:
 
@@ -174,7 +215,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через проксі, назви файлів cookie, розташування та розширення декларацій вашого контенту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів можна знайти в [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer у конфігурацію Next.js
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer у конфігурацію Next.js">
 
 Налаштуйте Next.js для використання Intlayer:
 
@@ -217,7 +260,9 @@ export default withIntlayer(nextConfig);
 > withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));
 > ```
 
-### Крок 4: Визначте динамічні маршрути локалей
+</Step>
+
+<Step number={4} title="Визначте динамічні маршрути локалей">
 
 Видаліть усе з `RootLayout` і замініть його наступним кодом:
 
@@ -280,7 +325,9 @@ export default LocaleLayout;
 
 > Intlayer працює з `export const dynamic = 'force-static';`, щоб забезпечити попередню збірку сторінок для всіх локалей.
 
-### Крок 5: Оголосіть свій контент
+</Step>
+
+<Step number={5} title="Оголосіть свій контент">
 
 Створюйте декларації контенту та керуйте ними для зберігання перекладів:
 
@@ -326,7 +373,9 @@ export default pageContent;
 
 > Для отримання додаткової інформації зверніться до [документації з декларації контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 6: Використовуйте контент у своєму коді
+</Step>
+
+<Step number={6} title="Використовуйте контент у своєму коді">
 
 Отримуйте доступ до ваших словників контенту по всьому додатку:
 
@@ -415,7 +464,9 @@ export const ServerComponentExample: FC = () => {
 
 > Якщо ваш застосунок уже існує, ви можете скористатися [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) у поєднанні з [командой extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md), щоб перетворити тисячі компонентів за одну секунду.
 
-### (Опціонально) Крок 7: Налаштуйте проксі для виявлення локалі
+</Step>
+
+<Step number={7} title="Налаштуйте проксі для виявлення локалі" isOptional={true}>
 
 Налаштуйте проксі для виявлення бажаної локалі користувача:
 
@@ -439,7 +490,9 @@ import { customProxy } from "@utils/customProxy";
 export const proxy = multipleProxies([intlayerProxy, customProxy]);
 ```
 
-### (Опціонально) Крок 8: Інтернаціоналізація ваших метаданих
+</Step>
+
+<Step number={8} title="Інтернаціоналізація ваших метаданих" isOptional={true}>
 
 У випадку, якщо ви хочете інтернаціоналізувати свої метадані, наприклад заголовок вашої сторінки, ви можете скористатися функцією `generateMetadata`, наданою Next.js. Всередині ви можете отримати контент за допомогою функції `getIntlayer`, щоб перекласти ваші метадані.
 
@@ -574,7 +627,9 @@ export const generateMetadata = async ({
 
 > Дізнайтеся більше про оптимізацію метаданих [в офіційній документації Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata).
 
-### (Опціонально) Крок 9: Інтернаціоналізація ваших sitemap.xml та robots.txt
+</Step>
+
+<Step number={9} title="Інтернаціоналізація ваших sitemap.xml та robots.txt" isOptional={true}>
 
 Щоб інтернаціоналізувати ваші `sitemap.xml` та `robots.txt`, ви можете скористатися функцією `getMultilingualUrls`, наданою Intlayer. Ця функція дозволяє генерувати багатомовні URL-адреси для вашої карти сайту.
 
@@ -637,7 +692,9 @@ export default robots;
 
 > Дізнайтеся більше про оптимізацію карти сайту [в офіційній документації Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap). Дізнайтеся більше про оптимізацію robots.txt [в офіційній документації Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots).
 
-### (Опціонально) Крок 10: Зміна мови вашого контенту
+</Step>
+
+<Step number={10} title="Зміна мови вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту в Next.js, рекомендованим способом є використання компонента `Link` для перенаправлення користувачів на відповідну локалізовану сторінку. Компонент `Link` дозволяє попередньо завантажувати сторінку, що допомагає уникнути повного перезавантаження сторінки.
 
@@ -732,7 +789,9 @@ return (
 > - [атрибут `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - [атрибут `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### (Опціонально) Крок 11: Створення локалізованого компонента Link
+</Step>
+
+<Step number={11} title="Створення локалізованого компонента Link" isOptional={true}>
 
 Щоб навигація вашого додатка відповідала поточній локалі, ви можете створити кастомний компонент `Link`. Цей компонент автоматично додає префікс поточної мови до внутрішніх URL-адрес. Наприклад, коли франкомовний користувач натискає на посилання на сторінку "Про нас", він перенаправляється на `/fr/about` замість `/about`.
 
@@ -800,7 +859,9 @@ export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
 
 Інтегруючи цей компонент `Link` у весь додаток, ви підтримуєте узгоджений та чутливий до мови інтерфейс користувача, а також отримуєте переваги від покращеного SEO та зручності використання.
 
-### (Опціонально) Крок 12: Отримання поточної локалі в Server Actions
+</Step>
+
+<Step number={12} title="Отримання поточної локалі в Server Actions" isOptional={true}>
 
 Якщо вам потрібна активна локаль всередині Server Action (наприклад, для локалізації електронних листів або запуску логіки, залежної від локалі), викличте `getLocale` з `next-intlayer/server`:
 
@@ -825,7 +886,9 @@ export const myServerAction = async () => {
 >
 > Це гарантує вибір найбільш підходящої локалі на основі доступного контексту.
 
-### (Опціонально) Крок 13: Оптимізація розміру вашого бандла
+</Step>
+
+<Step number={13} title="Оптимізація розміру вашого бандла" isOptional={true}>
 
 При використанні `next-intlayer` словники за замовчуванням включаються в бандл для кожної сторінки. Для оптимізації розміру бандла Intlayer надає додатковий плагін SWC, який інтелектуально замінює виклики `useIntlayer` за допомогою макросів. Це гарантує, що словники включаються в бандли тільки для тих сторінок, які їх дійсно використовують.
 
@@ -852,72 +915,9 @@ bun add @intlayer/swc --dev
 > Примітка: Цей пакет не встановлюється за замовчуванням, оскільки плагіни SWC все ще є експериментальними в Next.js. Це може змінитися в майбутньому.
 
 > Примітка: Якщо ви встановите опцію `importMode: 'dynamic'` або `importMode: 'fetch'` (у конфігурації `dictionary`), вона буде покладатися на Suspense, тому вам доведеться обгорнути ваші виклики `useIntlayer` в межу `Suspense`. Це означає, що ви не зможете використовувати `useIntlayer` безпосередньо на верхньому рівні вашого компонента Page / Layout.
+> </Step>
 
-### Відстеження змін словників у Turbopack
-
-При використанні Turbopack як сервера розробки за допомогою команди `next dev` зміни в словниках за замовчуванням не будуть виявлятися автоматично.
-
-Це обмеження виникає через те, що Turbopack не може запускати плагіни webpack паралельно для моніторингу змін у ваших файлах контенту. Щоб обійти це, вам потрібно буде використовувати команду `intlayer watch`, щоб одночасно запустити сервер розробки та спостерігач за збіркою Intlayer.
-
-```json5 fileName="package.json"
-{
-  // ... Ваші існуючі конфігурації package.json
-  "scripts": {
-    // ... Ваші існуючі конфігурації скриптів
-    "dev": "intlayer watch --with 'next dev'",
-  },
-}
-```
-
-> Якщо ви використовуєте next-intlayer@<=6.x.x, вам потрібно залишити прапор `--turbopack`, щоб додаток Next.js 16 коректно працював із Turbopack. Ми рекомендуємо використовувати next-intlayer@>=7.x.x, щоб уникнути цього обмеження.
-
-### Налаштування TypeScript
-
-Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги TypeScript і зробити вашу кодову базу надійнішою.
-
-![Автодоповнення](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Помилка перекладу](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Переконайтеся, що ваша конфігурація TypeScript включає автоматично згенеровані типи.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... Ваші існуючі конфігурації TypeScript
-  "include": [
-    // ... Ваші існуючі конфігурації TypeScript
-    ".intlayer/**/*.ts", // Включити автоматично згенеровані типи
-  ],
-}
-```
-
-### Конфігурація 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).
-
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -1029,6 +1029,73 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Відстеження змін словників у Turbopack
+
+При використанні Turbopack як сервера розробки за допомогою команди `next dev` зміни в словниках за замовчуванням не будуть виявлятися автоматично.
+
+Це обмеження виникає через те, що Turbopack не може запускати плагіни webpack паралельно для моніторингу змін у ваших файлах контенту. Щоб обійти це, вам потрібно буде використовувати команду `intlayer watch`, щоб одночасно запустити сервер розробки та спостерігач за збіркою Intlayer.
+
+```json5 fileName="package.json"
+{
+  // ... Ваші існуючі конфігурації package.json
+  "scripts": {
+    // ... Ваші існуючі конфігурації скриптів
+    "dev": "intlayer watch --with 'next dev'",
+  },
+}
+```
+
+> Якщо ви використовуєте next-intlayer@<=6.x.x, вам потрібно залишити прапор `--turbopack`, щоб додаток Next.js 16 коректно працював із Turbopack. Ми рекомендуємо використовувати next-intlayer@>=7.x.x, щоб уникнути цього обмеження.
+
+### Налаштування TypeScript
+
+Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги TypeScript і зробити вашу кодову базу надійнішою.
+
+![Автодоповнення](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Помилка перекладу](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Переконайтеся, що ваша конфігурація TypeScript включає автоматично згенеровані типи.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Ваші існуючі конфігурації TypeScript
+  "include": [
+    // ... Ваші існуючі конфігурації TypeScript
+    ".intlayer/**/*.ts", // Включити автоматично згенеровані типи
+  ],
+}
+```
+
+### Конфігурація 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).
 
 ### Йдіть далі
 

package/docs/uk/intlayer_with_nextjs_compiler.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-06
-title: Next.js i18n - Перетворення існуючого додатка Next.js на багатомовний додаток у 2026
-description: Дізнайтеся, як зробити ваш існуючий додаток Next.js багатомовним за допомогою Intlayer Compiler. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти ваш додаток за допомогою ШІ.
+updatedAt: 2026-05-31
+title: "Next.js i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Next.js. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -81,7 +81,9 @@ history:
 
 ## Покрокова інструкція з налаштування Intlayer в додатку Next.js
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -117,7 +119,9 @@ bun x intlayer init
 
   Пакет, що інтегрує Intlayer з Next.js. Він надає контекст-провайдери та хуки для інтернаціоналізації Next.js. Крім того, він включає плагін Next.js для інтеграції Intlayer з [Webpack](https://webpack.js.org/) або [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), а також прошарок (middleware) для виявлення бажаної мови користувача, управління файлами cookie та обробки перенаправлення URL.
 
-### Крок 2: Налаштування вашого проєкту
+</Step>
+
+<Step number={2} title="Налаштування вашого проєкту">
 
 Створіть конфігураційний файл, щоб визначити мови вашого додатку:
 
@@ -174,7 +178,9 @@ export default config;
 
 > За допомогою цього конфігураційного файлу ви можете налаштувати локалізовані URL-адреси, проксі-перенаправлення, мапінг файлів cookie, розташування та розширення ваших декларацій контенту, вимкнути логи Intlayer в консолі та багато іншого. Для ознайомлення з повним списком доступних параметрів, перегляньте [документацію до конфігурацій](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer до вашої конфігурації Next.js
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer до вашої конфігурації Next.js">
 
 Налаштуйте ваш Next.js для використання Intlayer:
 
@@ -190,29 +196,9 @@ export default withIntlayer(nextConfig);
 ```
 
 > Плагін Next.js `withIntlayer()` використовується для інтеграції Intlayer із Next.js. Він забезпечує побудову файлів словників і слідкує за ними у режимі dev. Він визначає змінні середовища Intlayer у середовищах [Webpack](https://webpack.js.org/) або [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack). Більше того, він надає псевдоніми для оптимізації продуктивності та повноцінно працює із Серверними Компонентами.
+> </Step>
 
-### Налаштування 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()],
-  ],
-};
-```
-
-### Крок 4: Виявлення мови на ваших сторінках
+<Step number={4} title="Виявлення мови на ваших сторінках">
 
 Очистіть контент `RootLayout` та замініть його прикладом нижче:
 
@@ -255,7 +241,9 @@ const RootLayout = async ({
 export default RootLayout;
 ```
 
-### Крок 5: Декларування вашого контенту (Автоматично)
+</Step>
+
+<Step number={5} title="Декларування вашого контенту">
 
 З увімкненим компілятором вам **більше не потрібно** декларувати словники контенту вручну (наприклад, файли `.content.ts`).
 
@@ -351,7 +339,9 @@ export default async function Page() {
 
   > Layout and page cannot share a common server context because the server context system is based on a per-request data store (via [React's cache](https://react.dev/reference/react/cache) mechanism), causing each "context" to be re-created for different segments of the application. Placing the provider in a shared layout would break this isolation, preventing the correct propagation of the server context values to your server components.
 
-### (Опціонально) Крок 7: Заповнення відсутніх перекладів
+</Step>
+
+<Step number={7} title="Заповнення відсутніх перекладів" isOptional={true}>
 
 Intlayer надає CLI-інструмент, щоб допомогти вам заповнити відсутні переклади. Ви можете використовувати команду `intlayer` для перевірки та заповнення відсутніх перекладів із вашого коду.
 
@@ -389,7 +379,9 @@ bun x intlayer fill         # Заповнити відсутні перекла
 
 > Для отримання більш детальної інформації зверніться до [документації CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/ci.md)
 
-### (Необов'язково) Крок 8: Middleware для проксі-маршрутизації мов
+</Step>
+
+<Step number={8} title="Middleware для проксі-маршрутизації мов" isOptional={true}>
 
 Якщо ви хочете автоматично перенаправляти користувачів на їхню улюблену мову, налаштуйте проксі middleware:
 
@@ -404,7 +396,9 @@ export const config = {
 
 > `intlayerProxy` використовується для виявлення обраної мови користувача та його перенаправлення на відповідну URL-адресу, як це визначено у [файлі конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md). Крім того, це дозволяє зберігати бажану мову користувача у cookie.
 
-### (Необов'язково) Крок 9: Зміна мови контенту
+</Step>
+
+<Step number={9} title="Зміна мови контенту" isOptional={true}>
 
 Найбільш рекомендований спосіб зміни мови контенту в Next.js, використання компонента `Link` для направлення користувача на маршрут з відповідною мовою. Це використовує функцію prefetch фреймворку Next.js і дозволяє уникнути жорсткого перезавантаження сторінки.
 
@@ -454,7 +448,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Альтернативним варіантом є використання функції `setLocale`, яка надається хуком `useLocale`. Ця функція не підтримує prefetch сторінок. Більше деталей дивіться у [документації до хука `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/next-intlayer/useLocale.md).
 
-### (Необов'язково) Крок 10: Оптимізація розміру Bundle
+</Step>
+
+<Step number={10} title="Оптимізація розміру Bundle" isOptional={true}>
 
 При використанні `next-intlayer`, словники за замовчуванням включаються в bundle для кожної сторінки. Для оптимізації розміру bundle Intlayer надає опціональний SWC-плагін, який інтелектуально замінює виклики `useIntlayer` за допомогою макросів. Це гарантує, що словники включаються лише в bundle тих сторінок, які їх дійсно використовують.
 
@@ -481,54 +477,9 @@ bun add @intlayer/swc --dev
 > Примітка: Цей пакет не встановлюється за замовчуванням, оскільки SWC-плагіни все ще експериментальні в Next.js. Це може змінитися в майбутньому.
 
 > Примітка: Якщо ви встановили опцію (у конфігурації словника) `importMode: 'dynamic'` або `importMode: 'fetch'`, вона залежатиме від Suspense, тому вам потрібно буде обгорнути виклики `useIntlayer` у межу `Suspense`. Це означає, що ви не зможете використовувати `useIntlayer` безпосередньо на верхньому рівні ваших компонентів Сторінки / Layout.
+> </Step>
 
-### Конфігурація TypeScript
-
-Intlayer використовує розширення модулів (module augmentation), щоб скористатися перевагами TypeScript і зробити вашу базу коду міцнішою.
-
-![Автодоповнення](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Помилка перекладу](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Переконайтеся, що конфігурація TypeScript включає автоматично згенеровані типи.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... Ваші існуючі конфігурації TypeScript
-  "include": [
-    // ... Ваші існуючі конфігурації TypeScript
-    ".intlayer/**/*.ts", // Включити автоматично згенеровані типи
-  ],
-}
-```
-
-### Конфігурація 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)
-
-Це розширення забезпечує:
-
-- **Автодоповнення** для ключів перекладу.
-- **Виявлення помилок у реальному часі** для відсутніх перекладів.
-- **Вбудований попередній перегляд** перекладеного контенту.
-- **Швидкі дії (Quick actions)** для легкого створення та оновлення перекладів.
-
-Прочитайте [документацію до розширення VS Code Intlayer](https://intlayer.org/doc/vs-code-extension) для отримання детальних інструкцій щодо використання розширення.
-
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -640,6 +591,76 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</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 і зробити вашу базу коду міцнішою.
+
+![Автодоповнення](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Помилка перекладу](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Переконайтеся, що конфігурація TypeScript включає автоматично згенеровані типи.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Ваші існуючі конфігурації TypeScript
+  "include": [
+    // ... Ваші існуючі конфігурації TypeScript
+    ".intlayer/**/*.ts", // Включити автоматично згенеровані типи
+  ],
+}
+```
+
+### Конфігурація 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)
+
+Це розширення забезпечує:
+
+- **Автодоповнення** для ключів перекладу.
+- **Виявлення помилок у реальному часі** для відсутніх перекладів.
+- **Вбудований попередній перегляд** перекладеного контенту.
+- **Швидкі дії (Quick actions)** для легкого створення та оновлення перекладів.
+
+Прочитайте [документацію до розширення VS Code Intlayer](https://intlayer.org/doc/vs-code-extension) для отримання детальних інструкцій щодо використання розширення.
 
 ### Йдемо далі