@intlayer/docs 8.11.2 → 8.11.3

package/docs/uk/intlayer_with_create_react_app.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
-title: Create React App i18n - Як перекласти додаток React у 2026
-description: Дізнайтеся, як зробити ваш вебсайт на Create React App (CRA) багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: Create React App i18n - Повний посібник з перекладу React
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Create React App сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -53,7 +53,9 @@ history:
 
 ## Покроковий посібник з налаштування Intlayer у React-додатку
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -89,7 +91,9 @@ bun x intlayer init
 
 Містить команди та плагіни `react-scripts-intlayer` для інтеграції Intlayer у застосунок на базі Create React App. Ці плагіни базуються на [craco](https://craco.js.org/) і включають додаткову конфігурацію для бандлера [Webpack](https://webpack.js.org/).
 
-### Крок 2: Налаштування вашого проекту
+</Step>
+
+<Step number={2} title="Налаштування вашого проекту">
 
 Створіть файл конфігурації для налаштування мов вашого застосунку:
 
@@ -113,7 +117,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, імена cookie, розташування та розширення ваших декларацій контенту, вимкнути логи Intlayer у консолі та інше. Для повного переліку доступних параметрів зверніться до [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Інтегруйте Intlayer у конфігурацію CRA
+</Step>
+
+<Step number={3} title="Інтегруйте Intlayer у конфігурацію CRA">
 
 Змініть ваші скрипти, щоб використовувати react-intlayer
 
@@ -127,7 +133,9 @@ export default config;
 
 > `react-scripts-intlayer` scripts are based on [CRACO](https://craco.js.org/). You can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
 
-### Крок 4: Оголосіть свій вміст
+</Step>
+
+<Step number={4} title="Оголосіть свій вміст">
 
 Create and manage your content declarations to store translations:
 
@@ -187,7 +195,9 @@ export default appContent;
 
 > Якщо ваш файл контенту містить код TSX, слід розглянути імпорт `import React from "react";` у вашому файлі контенту.
 
-### Крок 5: Використання Intlayer у вашому коді
+</Step>
+
+<Step number={5} title="Використання Intlayer у вашому коді">
 
 Отримуйте доступ до словників контенту у всьому застосунку:
 
@@ -236,7 +246,9 @@ export default App;
 
 > Щоб дізнатися більше про хук `useIntlayer`, перегляньте [документацію](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md).
 
-### (Необов'язково) Крок 6: Зміна мови вашого контенту
+</Step>
+
+<Step number={6} title="Зміна мови вашого контенту" isOptional={true}>
 
 Щоб змінити мову контенту, ви можете використати функцію `setLocale`, що надається хуком `useLocale`. Ця функція дозволяє встановити locale застосунку та відповідно оновити контент.
 
@@ -257,7 +269,9 @@ const LocaleSwitcher = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
-### (Необов'язково) Крок 7: Додайте локалізовану маршрутизацію до вашого додатку
+</Step>
+
+<Step number={7} title="Додайте локалізовану маршрутизацію до вашого додатку" isOptional={true}>
 
 Мета цього кроку, створити унікальні маршрути для кожної мови. Це корисно для SEO та SEO-дружніх URL-адрес.
 Приклад:
@@ -403,7 +417,9 @@ const App: FC = () => (
 );
 ```
 
-### (Необов'язково) Крок 8: Змінити URL при зміні локалі
+</Step>
+
+<Step number={8} title="Змінити URL при зміні локалі" isOptional={true}>
 
 Щоб змінювати URL при зміні локалі, ви можете використовувати проп `onLocaleChange`, що надається хуком `useLocale`. Паралельно можна використовувати хуки `useLocation` та `useNavigate` з `react-router-dom` для оновлення шляху URL.
 
@@ -483,7 +499,9 @@ const LocaleSwitcher: FC = () => {
 > - [Атрибут `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)
 
-### (Необов'язково) Крок 9: Змінити атрибути мови та напрямку HTML
+</Step>
+
+<Step number={9} title="Змінити атрибути мови та напрямку HTML" isOptional={true}>
 
 Коли ваш застосунок підтримує кілька мов, важливо оновлювати атрибути `lang` та `dir` тега `<html>`, щоб вони відповідали поточній локалі. Це забезпечує:
 
@@ -603,3 +621,7 @@ Intlayer використовує module augmentation для отримання
 ### Піти далі
 
 Щоб піти далі, ви можете реалізувати [візуальний редактор](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).
+
+</Step>
+
+</Steps>

package/docs/uk/intlayer_with_express.md

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

package/docs/uk/intlayer_with_fastify.md

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

package/docs/uk/intlayer_with_hono.md

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

package/docs/uk/intlayer_with_lynx+react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-09
-updatedAt: 2026-05-06
-title: Lynx + React i18n - Як перекласти додаток Lynx у 2026
-description: Дізнайтеся, як зробити ваш мобільний додаток Lynx і React багатомовним. Дотримуйтеся документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: Lynx + React i18n - Повний посібник з перекладу Lynx
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Lynx and React мобільний застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -40,16 +40,47 @@ history:
   loading="lazy"
 />
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна, відкрита бібліотека для інтернаціоналізації (i18n), яка спрощує багатомовну підтримку в сучасних застосунках. Вона працює в багатьох JavaScript/TypeScript середовищах, **включно з Lynx** (через пакет `react-intlayer`).
+Порівняно з основними рішеннями, такими як `react-native-localize` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка Lynx">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Забезпечити підтримку TypeScript** завдяки автогенерованим типам.
-- **Динамічно локалізувати** контент, включно з **рядками інтерфейсу** (а в React для web це також може локалізувати HTML-метадані тощо).
-- **Користуватися розширеними можливостями**, такими як динамічне визначення локалі та її перемикання.
+Intlayer оптимізовано для ідеальної роботи з Lynx і React, пропонуючи **визначення вмісту на рівні компонентів**, **підтримку TypeScript** і всі функції, необхідні для інтернаціоналізації масштабування (i18n).
+
+</Accordion>
+<Accordion header="Розмір бандлу">
+
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
+
+</Accordion>
+<Accordion header="Підтримуваність">
+
+Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
+
+</Accordion>
+<Accordion header="Агент AI">
+
+Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
+
+</Accordion>
+<Accordion header="Автоматизація">
+
+Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
+
+</Accordion>
+<Accordion header="Продуктивність">
+
+Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
+
+</Accordion>
+<Accordion header="Співпраця з не-розробниками">
+
+Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 

package/docs/uk/intlayer_with_nestjs.md

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

package/docs/uk/intlayer_with_next-i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-10-05
-updatedAt: 2025-10-05
-title: next-i18next - Як перекласти додаток Next.js (i18n) у 2026 році
-description: Практичне керівництво, готове до продакшену, з інтернаціоналізації застосунку Next.js 15 (App Router) за допомогою i18next/next-i18next та покращення його за допомогою Intlayer.
+updatedAt: 2026-05-31
+title: next-i18next - Повний посібник з перекладу Next.js
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Next.js 15 App Router сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація

package/docs/uk/intlayer_with_next-intl.md

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

package/docs/uk/intlayer_with_nextjs_14.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-06
-title: Next.js i18n - Як перекласти додаток Next.js 14 у 2026
-description: Дізнайтеся, як зробити ваш сайт на Next.js 14 з App Router багатомовним. Дотримуйтесь документації, щоб інтернаціоналізувати (i18n) та перекласти його.
+updatedAt: 2026-05-31
+title: Next.js i18n - Повний посібник з перекладу Next.js 14
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Next.js 14 сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -72,19 +72,51 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна відкрита бібліотека інтернаціоналізації (i18n), створена для спрощення підтримки кількох мов у сучасних вебзастосунках. Intlayer безшовно інтегрується з останнім фреймворком **Next.js 14**, включаючи його потужний **App Router**. Вона оптимізована для роботи з **Server Components** для ефективного рендерингу і повністю сумісна з [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) (з Next.js >= 15).
+Порівняно з основними рішеннями, такими як `next-intl` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-With Intlayer, you can:
+<AccordionGroup>
+<Accordion header="Повна підтримка Next.js">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Отримувати доступ до перекладів як у клієнтських (client-side), так і у серверних (server-side) компонентах**.
-- **Забезпечте підтримку TypeScript** за допомогою автогенерованих типів, що покращує автозаповнення та виявлення помилок.
-- **Отримайте користь від розширених можливостей**, таких як динамічне виявлення локалі та її перемикання.
+Intlayer оптимізовано для роботи з **компонентами сервера** для ефективного відтворення та повністю сумісно з [**Turbopack**](https://nextjs.org/docs/architecture/turbopack). Він не блокує статичний рендеринг і пропонує проміжне програмне забезпечення, а також усі функції, необхідні для інтернаціоналізації масштабування (i18n).
 
-> Intlayer сумісний з Next.js 12, 13, 14 та 15. Якщо ви використовуєте Next.js Page Router, ви можете ознайомитися з цим [посібником](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_page_router.md). Для Next.js 15 з turbopack або без нього див. цей [посібник](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_15.md).
+> 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>
 
 ---
 
@@ -92,7 +124,9 @@ With Intlayer, you can:
 
 Дивіться [Шаблон додатку](https://github.com/aymericzip/intlayer-next-14-template) на GitHub.
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -124,7 +158,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 для визначення переважної локалі користувача, керування cookies та обробки перенаправлень URL.
 
-### Крок 2: Налаштуйте свій проєкт
+</Step>
+
+<Step number={2} title="Налаштуйте свій проєкт">
 
 Here is the final structure that we will make:
 
@@ -176,7 +212,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення в middleware, імена 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:
 
@@ -200,7 +238,9 @@ export default withIntlayer(nextConfig);
 > export default nextConfigWithOtherPlugins;
 > ```
 
-### Крок 4: Налаштування middleware для виявлення локалі
+</Step>
+
+<Step number={4} title="Налаштування middleware для виявлення локалі">
 
 Налаштуйте middleware, щоб виявляти переважну локаль користувача:
 
@@ -232,7 +272,9 @@ export const middleware = multipleMiddlewares([
 ]);
 ```
 
-### Крок 5: Визначте динамічні маршрути локалі
+</Step>
+
+<Step number={5} title="Визначте динамічні маршрути локалі">
 
 Видаліть усе з `RootLayout` та замініть наступним кодом:
 
@@ -299,7 +341,9 @@ export default LocaleLayout;
 
 > `generateStaticParams` гарантує, що ваш застосунок попередньо збудує необхідні сторінки для всіх локалей (locales), зменшуючи обчислення під час виконання і покращуючи досвід користувача. Для детальнішої інформації зверніться до [документації Next.js щодо generateStaticParams](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params).
 
-### Крок 6: Оголосіть ваш контент
+</Step>
+
+<Step number={6} title="Оголосіть ваш контент">
 
 Створіть і керуйте деклараціями контенту, щоб зберігати переклади:
 
@@ -355,7 +399,9 @@ export default pageContent;
 
 > Для докладніших відомостей зверніться до [документації щодо декларацій контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 7: Використання контенту у вашому коді
+</Step>
+
+<Step number={7} title="Використання контенту у вашому коді">
 
 Отримуйте доступ до своїх словників контенту в усьому застосунку:
 
@@ -436,7 +482,9 @@ const ServerComponentExample: FC = () => {
 
 > Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/next-intlayer/useIntlayer.md).
 
-### (Необов'язково) Крок 8: Інтернаціоналізація метаданих
+</Step>
+
+<Step number={8} title="Інтернаціоналізація метаданих" isOptional={true}>
 
 Якщо ви хочете інтернаціоналізувати свої метадані, наприклад заголовок сторінки, ви можете використати функцію `generateMetadata`, надану Next.js. Всередині ви можете отримати контент за допомогою функції `getIntlayer`, щоб перекласти метадані.
 
@@ -574,7 +622,9 @@ export const generateMetadata = ({
 
 > Дізнайтеся більше про оптимізацію метаданих в офіційній документації Next.js: [on the official Next.js documentation](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-адреси для вашого sitemap.
 
@@ -637,7 +687,9 @@ export default robots;
 
 > Дізнайтеся більше про оптимізацію sitemap у [офіційній документації 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` дозволяє попередньо завантажувати сторінку (prefetch), що допомагає уникнути повного перезавантаження сторінки.
 
@@ -731,7 +783,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-адрес, так що. Наприклад, коли франкомовний користувач натисне на посилання на сторінку "About", він буде перенаправлений на `/fr/about` замість `/about`.
 
@@ -800,7 +854,9 @@ Link.displayName = "Link";
 
 Інтегруючи цей компонент `Link` по всьому застосунку, ви забезпечуєте послідовний і орієнтований на мову користувацький досвід, а також отримуєте переваги покращеного SEO та зручності використання.
 
-### (Необов'язково) Крок 12: Отримати поточну локаль у Server Actions
+</Step>
+
+<Step number={12} title="Отримати поточну локаль у Server Actions" isOptional={true}>
 
 Якщо вам потрібна активна локаль всередині Server Action (наприклад, щоб локалізувати електронні листи або виконувати логіку, залежну від локалі), викличте `getLocale` з `next-intlayer/server`:
 
@@ -825,7 +881,9 @@ export const myServerAction = async () => {
 >
 > Це гарантує, що буде обрана найбільш відповідна локаль на основі доступного контексту.
 
-### (Необов'язково) Крок 13: Оптимізуйте розмір бандла
+</Step>
+
+<Step number={13} title="Оптимізуйте розмір бандла" isOptional={true}>
 
 При використанні `next-intlayer` словники за замовчуванням включаються в бандл для кожної сторінки. Щоб оптимізувати розмір бандла, Intlayer надає необов'язковий плагін SWC, який інтелектуально замінює виклики `useIntlayer` за допомогою макросів. Це гарантує, що словники включатимуться лише в бандли для сторінок, які їх фактично використовують.
 
@@ -902,3 +960,7 @@ Intlayer використовує module augmentation, щоб скористат
 ### Подальші кроки
 
 Щоб піти далі, ви можете реалізувати [візуальний редактор](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).
+
+</Step>
+
+</Steps>