@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/uk/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Як перекласти додаток Tanstack Start за допомогою Solid.js у 2026 році
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) до вашого додатка Tanstack Start за допомогою Intlayer та Solid.js. Дотримуйтесь цього вичерпного посібника, щоб зробити свій додаток багатомовним із маршрутизацією, що враховує локаль.
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку TanStack Start + Solid. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -37,17 +37,54 @@ history:
 
 Цей посібник демонструє, як інтегрувати **Intlayer** для безперешкодної інтернаціоналізації в проектах Tanstack Start із Solid.js, маршрутизацією з урахуванням локалі, підтримкою TypeScript та сучасними практиками розробки.
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
+Порівняно з основними рішеннями, такими як `react-i18next` або `i18next`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-З Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані, маршрути та вміст**.
-- **Забезпечити підтримку TypeScript** за допомогою автоматично згенерованих типів, покращуючи автодоповнення та виявлення помилок.
-- **Користуватися розширеними функціями**, такими як динамічне визначення та перемикання локалі.
-- **Увімкнути маршрутизацію з урахуванням локалі** за допомогою файлової системи маршрутизації Tanstack Start.
+<Accordion header="Повна підтримка TanStack Start">
+
+Intlayer оптимізовано для ідеальної роботи з TanStack Start і Solid, пропонуючи **багатомовну маршрутизацію**, **карту сайту** та всі функції, необхідні для масштабування інтернаціоналізації (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>
 
 ---
 
@@ -85,11 +122,15 @@ history:
 
 Перегляньте [Шаблон додатка](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) на GitHub.
 
-### Крок 1: Створення проекту
+<Steps>
+
+<Step number={1} title="Створення проекту">
 
 Спочатку створіть новий проект TanStack Start, дотримуючись посібника [Початок нового проекту](https://tanstack.com/start/latest/docs/framework/solid/quick-start) на вебсайті TanStack Start.
 
-### Крок 2: Встановлення пакетів Intlayer
+</Step>
+
+<Step number={2} title="Встановлення пакетів Intlayer">
 
 Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
 
@@ -127,7 +168,9 @@ bun x intlayer init
 - **vite-intlayer**
   Включає плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також проміжне програмне забезпечення (middleware) для визначення бажаної локалі користувача, керування файлами cookie та обробки перенаправлення URL-адрес.
 
-### Крок 3: Конфігурація вашого проекту
+</Step>
+
+<Step number={3} title="Конфігурація вашого проекту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
@@ -148,7 +191,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації можна налаштувати локалізовані URL-адреси, перенаправлення через middleware, назви файлів cookie, розташування та розширення ваших декларацій вмісту, вимкнути логи Intlayer у консолі тощо. Повний список доступних параметрів див. у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 4: Інтеграція Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={4} title="Інтеграція Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer у вашу конфігурацію:
 
@@ -176,7 +221,9 @@ export default defineConfig({
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує збірку файлів декларації вмісту та моніторить їх у режимі розробки. Він визначає змінні середовища Intlayer у додатку Vite. Крім того, він надає псевдоніми (aliases) для зменшення накладних витрат на продуктивність.
 
-### Крок 5: Створення кореневого макета (Root Layout)
+</Step>
+
+<Step number={5} title="Створення кореневого макета">
 
 Налаштуйте свій кореневий макет для підтримки інтернаціоналізації, використовуючи `useParams` для визначення поточної локалі та встановлюючи атрибути `lang` і `dir` на тегу `html`.
 
@@ -217,7 +264,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Крок 6: Створення макета локалі (опціонально)
+</Step>
+
+<Step number={6} title="Створення макета локалі">
 
 Створіть макет, який обробляє префікс локалі та виконує валідацію. Цей макет гарантуватиме, що обробляються лише дійсні локалі.
 
@@ -252,7 +301,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Для режиму `'prefix-all'` ви можете віддати перевагу перемиканню слота на `$locale`.
 > Для режиму `'no-prefix'` або `'search-params'` ви можете повністю видалити цей слот.
 
-### Крок 7: Декларування вмісту
+</Step>
+
+<Step number={7} title="Декларування вмісту">
 
 Створюйте декларації вмісту та керуйте ними для зберігання перекладів:
 
@@ -298,7 +349,9 @@ export default appContent;
 
 > Докладнішу інформацію див. у [документації з декларування вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 8: Використання компонентів та хуків з урахуванням локалі
+</Step>
+
+<Step number={8} title="Використання компонентів та хуків з урахуванням локалі">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -377,7 +430,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 9: Використання Intlayer на ваших сторінках
+</Step>
+
+<Step number={9} title="Використання Intlayer на ваших сторінках">
 
 Отримуйте доступ до своїх словників вмісту в усьому додатку:
 
@@ -420,7 +475,9 @@ function RouteComponent() {
 >
 > Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/solid-intlayer/useIntlayer.md).
 
-### Крок 10: Створення компонента перемикання локалі
+</Step>
+
+<Step number={10} title="Створення компонента перемикання локалі">
 
 Створіть компонент, який дозволить користувачам змінювати мову:
 
@@ -464,7 +521,9 @@ export default LocaleSwitcher;
 >
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/solid-intlayer/useLocale.md).
 
-### Крок 11: Керування атрибутами HTML
+</Step>
+
+<Step number={11} title="Керування атрибутами HTML">
 
 Як було показано на кроці 5, ви можете керувати атрибутами `lang` і `dir` тегу `html`, використовуючи `useParams` у вашому кореневому компоненті. Це гарантує, що правильні атрибути встановлено як на сервері, так і на клієнті.
 
@@ -483,7 +542,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Крок 12: Додавання Middleware (опціонально)
+</Step>
+
+<Step number={12} title="Додавання Middleware">
 
 Ви також можете використовувати `intlayerProxy`, щоб додати маршрутизацію на стороні сервера до вашого додатка. Цей плагін автоматично визначатиме поточну локаль на основі URL-адреси та встановлюватиме відповідний файл cookie локалі. Якщо локаль не вказано, плагін визначить найбільш підходящу локаль на основі налаштувань мови браузера користувача. Якщо локаль не виявлено, він перенаправить на локаль за замовчуванням.
 
@@ -514,7 +575,9 @@ export default defineConfig({
 
 ---
 
-### Крок 13: Інтернаціоналізація ваших метаданих (опціонально)
+</Step>
+
+<Step number={13} title="Інтернаціоналізація ваших метаданих">
 
 Ви також можете використовувати функцію `getIntlayer`, щоб отримати доступ до ваших словників вмісту в завантажувачі `head` для метаданих з урахуванням локалі:
 
@@ -561,7 +624,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Крок 14: Отримання локалі у ваших діях на сервері (опціонально)
+</Step>
+
+<Step number={14} title="Отримання локалі у ваших діях на сервері">
 
 Ви можете захотіти отримати доступ до поточної локалі з ваших серверних дій (server actions) або кінцевих точок API.
 Ви можете зробити це за допомогою допоміжної функції `getLocale` з `intlayer`.
@@ -598,7 +663,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Крок 15: Керування сторінками "не знайдено" (404) (опціонально)
+</Step>
+
+<Step number={15} title="Керування сторінками &quot;не знайдено&quot; (404)" isOptional={true}>
 
 Коли користувач відвідує неіснуючу сторінку, ви можете відобразити власну сторінку "не знайдено", і префікс локалі може вплинути на те, як ця сторінка запускається.
 
@@ -672,11 +739,13 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Опціонально) Крок 16: Вилучення вмісту з ваших компонентів
+</Step>
+
+<Step number={16} title="Вилучення вмісту з ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, трансформація тисяч файлів може зайняти багато часу.
 
-Щоб полегшити цей процес, Intlayer пропонує [компілятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) / [екстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md) для трансформації ваших компонентів та вилучення вмісту.
+Щоб полегшити цей процес, Intlayer пропонує [компілятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) / [екстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md) для трансформації ваших компонентів та екстракція вмісту.
 
 Щоб налаштувати його, ви можете додати розділ `compiler` у свій файл `intlayer.config.ts`:
 
@@ -785,7 +854,9 @@ bun run build # Або bun run dev
 
 ---
 
-### Крок 17: Конфігурація TypeScript (опціонально)
+</Step>
+
+<Step number={17} title="Конфігурація TypeScript">
 
 Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги TypeScript і зміцнити вашу кодову базу.
 
@@ -803,6 +874,10 @@ Intlayer використовує розширення модулів (module au
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Конфігурація Git
 
 Ми рекомендуємо ігнорувати файли, згенеровані Intlayer. Це дозволяє уникнути їх фіксації (commit) у вашому репозиторії Git.

package/docs/uk/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Як перекласти додаток Tanstack Start у 2026
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) до вашого застосунку Tanstack Start за допомогою Intlayer. Дотримуйтесь цього вичерпного посібника, щоб зробити ваш додаток багатомовним із маршрутизацією з урахуванням локалі.
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - Повний посібник з перекладу вашого застосунку"
+description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку TanStack Start. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -54,17 +54,54 @@ history:
 
 Цей посібник демонструє, як інтегрувати **Intlayer** для плавної інтернаціоналізації в проєктах Tanstack Start з маршрутизацією, що враховує локаль, підтримкою TypeScript та сучасними практиками розробки.
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна open-source бібліотека для інтернаціоналізації (i18n), призначена для спрощення підтримки кількох мов у сучасних вебзастосунках.
+Порівняно з основними рішеннями, такими як `react-i18next` або `use-intl` або `paraglide`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автозаповнення та виявлення помилок.
-- **Скористатися розширеними можливостями**, такими як динамічне визначення локалі та її перемикання.
-- **Увімкніть маршрутизацію з урахуванням локалі** за допомогою файлової системи маршрутизації Tanstack Start.
+<Accordion header="Повна підтримка TanStack Start">
+
+Intlayer повністю оптимізовано для TanStack Start, забезпечуючи **багатомовну маршрутизацію**, **керування файлами cookie**, **генерацію карти сайту**, **динамічне завантаження вмісту** та всі функції, необхідні для масштабування ваших зусиль з інтернаціоналізації (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>
 
 ---
 
@@ -102,11 +139,15 @@ history:
 
 Перегляньте [Шаблон додатка](https://github.com/aymericzip/intlayer-tanstack-start-template) на GitHub.
 
-### Крок 1: Створіть проект
+<Steps>
+
+<Step number={1} title="Створіть проект">
 
 Почніть зі створення нового проєкту TanStack Start, дотримуючись інструкції [Створення нового проєкту](https://tanstack.com/start/latest/docs/framework/react/quick-start) на сайті TanStack Start.
 
-### Крок 2: Встановіть пакети Intlayer
+</Step>
+
+<Step number={2} title="Встановіть пакети Intlayer">
 
 Встановіть необхідні пакети, використовуючи обраний менеджер пакетів:
 
@@ -144,7 +185,9 @@ bun x intlayer init
 - **vite-intlayer**
   Містить плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також middleware для визначення пріоритетної локалі користувача, керування cookie та обробки перенаправлень URL.
 
-### Крок 3: Конфігурація вашого проєкту
+</Step>
+
+<Step number={3} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
@@ -165,7 +208,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, імена cookie, розташування та розширення декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 4: Інтегруйте Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={4} title="Інтегруйте Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer до вашої конфігурації:
 
@@ -195,7 +240,9 @@ export default config;
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-застосунку. Додатково він надає аліаси для оптимізації продуктивності.
 
-### Крок 5: Створіть кореневий Layout
+</Step>
+
+<Step number={5} title="Створіть кореневий Layout">
 
 Налаштуйте кореневий layout для підтримки інтернаціоналізації, використовуючи `useParams` для визначення поточної локалі та встановлення атрибутів `lang` і `dir` на тезі `html`.
 
@@ -255,7 +302,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Крок 6: Створіть Locale Layout
+</Step>
+
+<Step number={6} title="Створіть Locale Layout">
 
 Створіть layout, який обробляє префікс локалі та виконує валідацію.
 
@@ -287,7 +336,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > У режимі `'prefix-all'` можливо краще змінити слот на `$locale`.
 > У режимах `'no-prefix'` або `'search-params'` ви можете повністю видалити слот.
 
-### Крок 7: Оголосіть ваш контент
+</Step>
+
+<Step number={7} title="Оголосіть ваш контент">
 
 Створюйте й керуйте деклараціями контенту для зберігання перекладів:
 
@@ -333,7 +384,9 @@ export default appContent;
 
 > Для детальнішої інформації зверніться до [документації з оголошення вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 8: Створіть компоненти та хуки, що враховують локаль
+</Step>
+
+<Step number={8} title="Створіть компоненти та хуки, що враховують локаль">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -437,7 +490,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 9: Використовуйте Intlayer на ваших сторінках
+</Step>
+
+<Step number={9} title="Використовуйте Intlayer на ваших сторінках">
 
 Отримуйте доступ до словників контенту по всьому застосунку:
 
@@ -485,7 +540,9 @@ function RouteComponent() {
 
 > Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md).
 
-### Крок 10: Створіть компонент перемикача локалі
+</Step>
+
+<Step number={10} title="Створіть компонент перемикача локалі">
 
 Створіть компонент, щоб дозволити користувачам змінювати мову:
 
@@ -546,7 +603,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
-### Крок 11: Керування атрибутами HTML
+</Step>
+
+<Step number={11} title="Керування атрибутами HTML">
 
 Як показано в Кроці 5, ви можете керувати атрибутами `lang` і `dir` тега `html`, використовуючи `useParams` у вашому кореневому компоненті. Це забезпечує правильне встановлення атрибутів на сервері та клієнті.
 
@@ -565,7 +624,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Крок 12: Додати middleware (необов'язково)
+</Step>
+
+<Step number={12} title="Додати middleware">
 
 Ви також можете використовувати `intlayerProxy` для додавання маршрутизації на стороні сервера у вашому додатку. Цей плагін автоматично визначатиме поточну локаль на основі URL і встановлюватиме відповідний cookie з локаллю. Якщо локаль не вказана, плагін визначить найбільш підходящу локаль на основі мовних налаштувань браузера користувача. Якщо локаль не буде виявлена, відбудеться перенаправлення на локаль за замовчуванням.
 
@@ -596,7 +657,9 @@ export default defineConfig({
 
 ---
 
-### Крок 13: Інтернаціоналізуйте свої метадані (необов'язково)
+</Step>
+
+<Step number={13} title="Інтернаціоналізуйте свої метадані">
 
 Ви також можете використовувати хук `getIntlayer`, щоб отримувати ваші словники контенту по всьому застосунку:
 
@@ -643,7 +706,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Крок 14: Отримання локалі у серверних діях (Необов'язково)
+</Step>
+
+<Step number={14} title="Отримання локалі у серверних діях">
 
 Можливо, ви захочете отримувати поточну локаль всередині серверних дій або API-ендпоїнтів.
 Ви можете зробити це за допомогою хелпера `getLocale` з `intlayer`.
@@ -680,7 +745,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Крок 15: Керування сторінками «Не знайдено» (необов'язково)
+</Step>
+
+<Step number={15} title="Керування сторінками «Не знайдено»">
 
 Коли користувач переходить на неіснуючу сторінку, ви можете відобразити власну сторінку «не знайдено», і префікс локалі може впливати на те, як ця сторінка викликається.
 
@@ -756,7 +823,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Крок 16: Налаштування TypeScript (необов'язково)
+</Step>
+
+<Step number={16} title="Налаштування TypeScript">
 
 Intlayer використовує module augmentation, щоб отримати переваги TypeScript і зміцнити ваш codebase.
 
@@ -774,7 +843,9 @@ Intlayer використовує module augmentation, щоб отримати
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -872,6 +943,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Налаштування Git
 
 Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволить уникнути їх коміту в ваш Git-репозиторій.