@intlayer/docs 8.11.2 → 8.11.3

package/docs/ru/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:
   - Интернационализация
   - Документация
@@ -52,25 +52,59 @@ history:
 
 Смотрите [шаблон приложения](https://github.com/aymericzip/intlayer-next-14-template) на GitHub.
 
-## Что такое 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 представляет собой решение со встроенными оптимизациями, такими как:
 
-С помощью Intlayer вы можете:
+<AccordionGroup>
+<Accordion header="Полное покрытие Next.js">
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Получать доступ к переводам как в компонентах на стороне клиента, так и на стороне сервера**.
-- **Обеспечить поддержку 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/ru/intlayer_with_nextjs_page_router.md). Для Next.js 15 с Turbopack или без него, обратитесь к этому [руководству](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/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 с App Router обратитесь к этому [руководству] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
+
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
+
+</Accordion>
+<Accordion header="Агент ИИ">
+
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (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="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](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:
 
@@ -102,7 +136,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:
 
@@ -154,7 +190,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL, перенаправления middleware, имена cookies, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в конфигурацию Next.js
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в конфигурацию Next.js">
 
 Настройте ваш проект Next.js для использования Intlayer:
 
@@ -169,7 +207,9 @@ export default withIntlayer(nextConfig);
 
 > Плагин `withIntlayer()` для Next.js используется для интеграции Intlayer с Next.js. Он обеспечивает создание файлов декларации контента и их мониторинг в режиме разработки. Он определяет переменные окружения Intlayer в средах [Webpack](https://webpack.js.org/) или [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack). Кроме того, он предоставляет алиасы для оптимизации производительности и обеспечивает совместимость с серверными компонентами.
 
-### Шаг 4: Настройка Middleware для определения локали
+</Step>
+
+<Step number={4} title="Настройка Middleware для определения локали">
 
 Настройте middleware для определения предпочтительной локали пользователя:
 
@@ -186,7 +226,9 @@ export const config = {
 
 > Адаптируйте параметр `matcher` для соответствия маршрутам вашего приложения. Для получения дополнительной информации обратитесь к [документации Next.js по настройке matcher](https://nextjs.org/docs/app/building-your-application/routing/middleware).
 
-### Шаг 5: Определите динамические маршруты локали
+</Step>
+
+<Step number={5} title="Определите динамические маршруты локали">
 
 Удалите все из `RootLayout` и замените следующим кодом:
 
@@ -248,7 +290,9 @@ export default LocaleLayout;
 
 > `generateStaticParams` гарантирует, что ваше приложение предварительно создает необходимые страницы для всех локалей, уменьшая вычисления во время выполнения и улучшая пользовательский опыт. Для получения дополнительной информации обратитесь к [документации 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="Объявите ваш контент">
 
 Создайте и управляйте вашими декларациями контента для хранения переводов:
 
@@ -302,7 +346,9 @@ export default pageContent;
 
 > Ваши декларации контента могут быть определены в любом месте вашего приложения, если они включены в каталог `contentDir` (по умолчанию, `./src`) и соответствуют расширению файла декларации контента (по умолчанию, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`). Для получения дополнительной информации обратитесь к [документации по декларации контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 7: Используйте контент в вашем коде
+</Step>
+
+<Step number={7} title="Используйте контент в вашем коде">
 
 Получите доступ к словарям контента в вашем приложении:
 
@@ -380,7 +426,9 @@ const ServerComponentExample: FC = () => {
 
 > Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useIntlayer.md).
 
-### (Опционально) Шаг 8: Интернационализация ваших метаданных
+</Step>
+
+<Step number={8} title="Интернационализация ваших метаданных" isOptional={true}>
 
 Если вы хотите интернационализировать ваши метаданные, такие как заголовок вашей страницы, вы можете использовать функцию `generateMetadata`, предоставляемую Next.js. Внутри функции используйте функцию `getTranslation` для перевода ваших метаданных.
 
@@ -541,7 +589,9 @@ module.exports.generateMetadata = ({ params: { locale } }) => {
 
 > Узнайте больше об оптимизации метаданных [в официальной документации 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 для вашего sitemap.
 
@@ -647,7 +697,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` позволяет предварительно загружать страницу, что помогает избежать полной перезагрузки страницы.
 
@@ -715,7 +767,9 @@ const LocaleSwitcher: FC = () => {
 > - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### (Опционально) Шаг 11: Создание локализованного компонента ссылки
+</Step>
+
+<Step number={11} title="Создание локализованного компонента ссылки" isOptional={true}>
 
 Чтобы обеспечить, что навигация вашего приложения учитывает текущую локаль, вы можете создать пользовательский компонент `Link`. Этот компонент автоматически добавляет префикс к внутренним URL-адресам с текущим языком. Например, когда пользователь, говорящий на французском, нажимает на ссылку на страницу "О нас", он перенаправляется на `/fr/about` вместо `/about`.
 
@@ -784,7 +838,9 @@ Link.displayName = "Link";
 
 Интегрируя этот компонент `Link` в ваше приложение, вы поддерживаете согласованный и языково-осведомленный пользовательский опыт, а также улучшаете SEO и удобство использования.
 
-### (Опционально) Шаг 12: Оптимизация размера вашего бандла
+</Step>
+
+<Step number={12} title="Оптимизация размера вашего бандла" isOptional={true}>
 
 При использовании `next-intlayer` словари по умолчанию включаются в бандл для каждой страницы. Чтобы оптимизировать размер бандла, Intlayer предоставляет опциональный SWC плагин, который интеллектуально заменяет вызовы `useIntlayer` с помощью макросов. Это гарантирует, что словари включаются только в бандлы тех страниц, которые их действительно используют.
 
@@ -842,3 +898,7 @@ Intlayer использует расширение модулей для пол
 ```
 
 ### Дальнейшие шаги
+
+</Step>
+
+</Steps>

package/docs/ru/intlayer_with_nextjs_15.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-06
-title: Next.js i18n - Как перевести приложение Next.js 15 в 2026
-description: Узнайте, как сделать ваш сайт на Next.js 15 многоязычным. Следуйте документации для интернационализации (i18n) и перевода.
+updatedAt: 2026-05-31
+title: Next.js i18n - Полное руководство по переводу Next.js 15
+description: Лучшее решение для размера бандла, SEO, производительности & поддерживаемости. Сделайте Next.js 15 сайт многоязычным в 2026, перевод LLM, Agent Skills & MCP.
 keywords:
   - Интернационализация
   - Документация
@@ -62,29 +62,61 @@ history:
   </Tab>
 </Tabs>
 
-<iframe title="Лучшее решение i18n для Next.js? Откройте для себя Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
 Смотрите [Шаблон приложения](https://github.com/aymericzip/intlayer-next-15-template) на GitHub.
 
-## Что такое Intlayer?
+## Почему Intlayer лучше альтернатив?
+
+По сравнению с основными решениями, такими как next-intl или i18next, Intlayer представляет собой решение со встроенными оптимизациями, такими как:
+
+<AccordionGroup>
+<Accordion header="Полное покрытие Next.js">
+
+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 с App Router обратитесь к этому [руководству] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md).
+
+</Accordion>
+<Accordion header="Размер бандла">
+
+Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает **уменьшить размер бандла и страниц до 50 %**.
+
+</Accordion>
+<Accordion header="Удобство обслуживания">
 
-**Intlayer** - это инновационная, открытая библиотека интернационализации (i18n), разработанная для упрощения поддержки многоязычности в современных веб-приложениях. Intlayer бесшовно интегрируется с последним фреймворком **Next.js 15**, включая его мощный **App Router**. Она оптимизирована для работы с **Server Components** для эффективного рендеринга и полностью совместима с [**Turbopack**](https://nextjs.org/docs/architecture/turbopack).
+Определение области содержимого вашего приложения **облегчает обслуживание** крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer **полностью типизирован**, что обеспечивает точность вашего контента.
 
-С помощью Intlayer вы можете:
+</Accordion>
+<Accordion header="Агент ИИ">
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
-- **Динамически локализовать метаданные**, маршруты и контент.
-- **Получать доступ к переводам как в клиентских, так и в серверных компонентах**.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автозаполнение и обнаружение ошибок.
-- **Воспользуйтесь расширенными возможностями**, такими как динамическое определение и переключение локали.
+Совместное размещение контента **уменьшает контекст, необходимый** для моделей большого языка (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) еще более удобной для агентов ИИ.
 
-> Intlayer совместим с Next.js 12, 13, 14 и 15. Если вы используете Next.js Page Router, вы можете обратиться к этому [руководству](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_nextjs_page_router.md). Для Next.js 12, 13, 14 с App Router смотрите это [руководство](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_with_nextjs_14.md).
+</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="Масштабирование с помощью не-разработчиками">
+
+Intlayer — это больше, чем просто решение i18n. Он предоставляет **автономный [визуальный редактор](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:
 
@@ -116,7 +148,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="Настройте ваш проект">
 
 Here is the final structure that we will make:
 
@@ -168,7 +202,9 @@ export default config;
 
 > С помощью этого файла конфигурации вы можете настроить локализованные URL-адреса, перенаправление через middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Next.js
+</Step>
+
+<Step number={3} title="Интеграция Intlayer в вашу конфигурацию Next.js">
 
 Настройте ваш Next.js для использования Intlayer:
 
@@ -185,7 +221,9 @@ export default withIntlayer(nextConfig);
 
 > Плагин Next.js `withIntlayer()` используется для интеграции Intlayer с Next.js. Он обеспечивает сборку файлов деклараций контента и их мониторинг в режиме разработки. Он определяет переменные окружения Intlayer в средах [Webpack](https://webpack.js.org/) или [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack). Кроме того, он предоставляет алиасы для оптимизации производительности и обеспечивает совместимость с серверными компонентами.
 
-### Шаг 4: Определение динамических маршрутов локалей
+</Step>
+
+<Step number={4} title="Определение динамических маршрутов локалей">
 
 Удалите всё из `RootLayout` и замените следующим кодом:
 
@@ -244,7 +282,9 @@ export default LocaleLayout;
 
 > `generateStaticParams` гарантирует, что ваше приложение предварительно собирает необходимые страницы для всех локалей, уменьшая вычисления во время выполнения и улучшая опыт пользователя. Для получения дополнительной информации обратитесь к [документации Next.js по generateStaticParams](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params).
 
-### Шаг 5: Объявите Ваш Контент
+</Step>
+
+<Step number={5} title="Объявите Ваш Контент">
 
 Создайте и управляйте объявлениями контента для хранения переводов:
 
@@ -292,7 +332,9 @@ export default pageContent;
 
 > Для получения дополнительной информации обратитесь к [документации по объявлениям контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-### Шаг 6: Использование контента в вашем коде
+</Step>
+
+<Step number={6} title="Использование контента в вашем коде">
 
 Получайте доступ к вашим словарям контента по всему приложению:
 
@@ -382,7 +424,9 @@ export const ServerComponentExample: FC = () => {
 
 > Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useIntlayer.md).
 
-### (Необязательно) Шаг 7: Настройка Middleware для определения локали
+</Step>
+
+<Step number={7} title="Настройка Middleware для определения локали" isOptional={true}>
 
 Настройте middleware для определения предпочитаемой пользователем локали:
 
@@ -397,7 +441,9 @@ export const config = {
 
 > Для получения дополнительной информации о хуке `useIntlayer` обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useIntlayer.md).
 
-### (Необязательно) Шаг 7: Настройка Middleware для определения локали
+</Step>
+
+<Step number={7} title="Настройка Middleware для определения локали" isOptional={true}>
 
 Настройте middleware для определения предпочтительной локали пользователя:
 
@@ -412,7 +458,9 @@ export const config = {
 
 > `intlayerMiddleware` используется для определения предпочтительной локали пользователя и перенаправления его на соответствующий URL, как указано в [конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md). Кроме того, он позволяет сохранять предпочтительную локаль пользователя в cookie.
 
-### (Необязательно) Шаг 8: Интернационализация ваших метаданных
+</Step>
+
+<Step number={8} title="Интернационализация ваших метаданных" isOptional={true}>
 
 В случае, если вы хотите интернационализировать ваши метаданные, такие как заголовок страницы, вы можете использовать функцию `generateMetadata`, предоставляемую Next.js. Внутри вы можете получить содержимое из функции `getIntlayer` для перевода ваших метаданных.
 
@@ -551,7 +599,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 для вашего sitemap.
 
@@ -614,7 +664,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` позволяет предварительно загружать страницу, что помогает избежать полной перезагрузки страницы.
 
@@ -709,7 +761,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`.
 
@@ -777,7 +831,9 @@ export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
 
 Интегрируя этот компонент `Link` по всему вашему приложению, вы поддерживаете последовательный и ориентированный на язык пользовательский опыт, а также получаете преимущества улучшенного SEO и удобства использования.
 
-### (Необязательно) Шаг 12: Оптимизация размера бандла
+</Step>
+
+<Step number={12} title="Оптимизация размера бандла" isOptional={true}>
 
 При использовании `next-intlayer` словари по умолчанию включаются в бандл для каждой страницы. Чтобы оптимизировать размер бандла, Intlayer предоставляет необязательный плагин SWC, который интеллектуально заменяет вызовы `useIntlayer` с помощью макросов. Это гарантирует, что словари включаются в бандлы только для тех страниц, которые действительно их используют.
 
@@ -852,3 +908,7 @@ Intlayer использует расширение модулей (module augmen
 ### Продвинутые возможности
 
 Для расширения возможностей вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент с помощью [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
+
+</Step>
+
+</Steps>