@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/pt/i18n_using_next-i18next.md

@@ -81,6 +81,7 @@ Antes de mergulharmos na implementação, aqui estão algumas práticas que voc
   title="Demo CodeSandbox - Como Internacionalizar sua aplicação usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Veja [Application Template](https://github.com/aymericzip/next-i18next-template) no GitHub.
 
@@ -117,7 +118,9 @@ Aqui está a estrutura do projeto que vamos criar:
         └── ServerComponent.tsx
 ```
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -137,7 +140,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Bindings do React para i18next que fornecem hooks como `useTranslation` para componentes cliente.
 - **i18next-resources-to-backend**: Um plugin que permite o carregamento dinâmico dos arquivos de tradução, permitindo carregar apenas os namespaces que você precisa.
 
-### Passo 2: Configure Seu Projeto
+</Step>
+
+<Step number={2} title="Configure Seu Projeto">
 
 Crie um arquivo de configuração para definir os seus locales suportados, o locale padrão e funções auxiliares para a localização de URLs. Este arquivo serve como a fonte única de verdade para a sua configuração i18n e garante segurança de tipos em toda a sua aplicação.
 
@@ -190,7 +195,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Passo 3: Centralizar Namespaces de Tradução
+</Step>
+
+<Step number={3} title="Centralizar Namespaces de Tradução">
 
 Crie uma fonte única de verdade para cada namespace que sua aplicação expõe. Reutilizar essa lista mantém o código do servidor, cliente e ferramentas sincronizados e desbloqueia a tipagem forte para os helpers de tradução.
 
@@ -200,7 +207,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Passo 4: Tipar Fortemente as Chaves de Tradução com TypeScript
+</Step>
+
+<Step number={4} title="Tipar Fortemente as Chaves de Tradução com TypeScript">
 
 Aumente o `i18next` para apontar para seus arquivos de idioma canônicos (geralmente em inglês). O TypeScript então infere as chaves válidas por namespace, assim as chamadas para `t()` são verificadas de ponta a ponta.
 
@@ -238,7 +247,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Passo 5: Configurar a Inicialização do i18n no Lado do Servidor
+</Step>
+
+<Step number={5} title="Configurar a Inicialização do i18n no Lado do Servidor">
 
 Crie uma função de inicialização do lado do servidor que carrega traduções para componentes do servidor. Esta função cria uma instância separada do i18next para renderização do lado do servidor, garantindo que as traduções sejam carregadas antes da renderização.
 
@@ -293,7 +304,9 @@ export async function initI18next(
 }
 ```
 
-### Passo 6: Criar o Provedor i18n no Lado do Cliente
+</Step>
+
+<Step number={6} title="Criar o Provedor i18n no Lado do Cliente">
 
 Crie um componente provedor no cliente que envolva sua aplicação com o contexto do i18next. Este provedor recebe traduções pré-carregadas do servidor para evitar o flash de conteúdo não traduzido (FOUC) e evitar buscas duplicadas.
 
@@ -376,7 +389,9 @@ export default function I18nProvider({
 }
 ```
 
-### Passo 7: Definir Rotas Dinâmicas por Locale
+</Step>
+
+<Step number={7} title="Definir Rotas Dinâmicas por Locale">
 
 Configure o roteamento dinâmico para os locales criando um diretório `[locale]` na sua pasta app. Isso permite que o Next.js gerencie o roteamento baseado em locale, onde cada locale se torna um segmento da URL (ex.: `/en/about`, `/fr/about`).
 
@@ -428,7 +443,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Passo 8: Crie Seus Arquivos de Tradução
+</Step>
+
+<Step number={8} title="Crie Seus Arquivos de Tradução">
 
 Crie arquivos JSON para cada locale e namespace. Essa estrutura permite organizar as traduções de forma lógica e carregar apenas o que você precisa para cada página.
 
@@ -482,7 +499,9 @@ Organizar traduções por namespace (por exemplo, `common.json`, `about.json`) p
 }
 ```
 
-### Passo 9: Utilize Traduções nas Suas Páginas
+</Step>
+
+<Step number={9} title="Utilize Traduções nas Suas Páginas">
 
 Crie um componente de página que inicialize o i18next no servidor e passe as traduções tanto para os componentes do servidor quanto para os do cliente. Isso garante que as traduções sejam carregadas antes da renderização e evita o piscar de conteúdo.
 
@@ -542,7 +561,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 10: Usar Traduções em Componentes Cliente
+</Step>
+
+<Step number={10} title="Usar Traduções em Componentes Cliente">
 
 Componentes cliente podem usar o hook `useTranslation` para acessar traduções. Este hook fornece acesso à função de tradução e à instância i18n, permitindo traduzir conteúdo e acessar informações de locale.
 
@@ -593,7 +614,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Passo 11: Usar Traduções em Componentes de Servidor
+</Step>
+
+<Step number={11} title="Usar Traduções em Componentes de Servidor">
 
 Componentes server não podem usar React hooks, então eles recebem traduções via props de seus componentes pai. Essa abordagem mantém os componentes server síncronos e permite que sejam aninhados dentro de componentes client.
 
@@ -639,9 +662,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Opcional) Passo 12: Alterar o idioma do seu conteúdo
+<Step number={12} title="Alterar o idioma do seu conteúdo" isOptional={true}>
 
 Para alterar o idioma do seu conteúdo no Next.js, a forma recomendada é usar URLs prefixadas com o locale e links do Next.js. O exemplo abaixo lê o locale atual da rota, remove-o do pathname e renderiza um link para cada locale disponível.
 
@@ -713,7 +736,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcional) Passo 13: Construir um componente Link localizado
+</Step>
+
+<Step number={13} title="Construir um componente Link localizado" isOptional={true}>
 
 Reutilizar URLs localizadas em toda a sua aplicação mantém a navegação consistente e otimizada para SEO. Envolva o `next/link` em um pequeno helper que prefixa rotas internas com o locale ativo, enquanto deixa URLs externas intactas.
 
@@ -764,7 +789,9 @@ export default function LocalizedLink({
 
 > Dica: Como `LocalizedLink` é um substituto direto, faça a migração gradualmente trocando os imports e deixando o componente lidar com URLs específicas de locale.
 
-### (Opcional) Passo 14: Acessar o locale ativo dentro das Server Actions
+</Step>
+
+<Step number={14} title="Acessar o locale ativo dentro das Server Actions" isOptional={true}>
 
 Server Actions frequentemente precisam do locale atual para emails, logs ou integrações com terceiros. Combine o cookie de locale definido pelo seu proxy com o cabeçalho `Accept-Language` como fallback.
 
@@ -802,7 +829,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Como o helper depende dos cookies e headers do Next.js, ele funciona em Route Handlers, Server Actions e outros contextos exclusivos do servidor.
 
-### (Opcional) Passo 15: Internacionalize Seus Metadados
+</Step>
+
+<Step number={15} title="Internacionalize Seus Metadados" isOptional={true}>
 
 Traduzir o conteúdo é importante, mas o principal objetivo da internacionalização é tornar seu site mais visível para o mundo. I18n é uma alavanca incrível para melhorar a visibilidade do seu site por meio de SEO adequado.
 
@@ -869,7 +898,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Opcional) Passo 16: Internacionalize seu Sitemap
+</Step>
+
+<Step number={16} title="Internacionalize seu Sitemap" isOptional={true}>
 
 Gere um sitemap que inclua todas as versões de locale das suas páginas. Isso ajuda os motores de busca a descobrir e indexar todas as versões linguísticas do seu conteúdo.
 
@@ -923,7 +954,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcional) Passo 17: Internacionalize seu robots.txt
+</Step>
+
+<Step number={17} title="Internacionalize seu robots.txt" isOptional={true}>
 
 Crie um arquivo robots.txt que gerencie corretamente todas as versões de locale das suas rotas protegidas. Isso garante que os motores de busca não indexem páginas de administração ou dashboard em nenhum idioma.
 
@@ -954,7 +987,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcional) Passo 18: Configurar Middleware para Roteamento de Locale
+</Step>
+
+<Step number={18} title="Configurar Middleware para Roteamento de Locale" isOptional={true}>
 
 Crie um proxy para detectar automaticamente o locale preferido do usuário e redirecioná-lo para a URL apropriada com prefixo de locale. Isso melhora a experiência do usuário ao mostrar o conteúdo no idioma preferido.
 
@@ -1043,7 +1078,9 @@ export const config = {
 };
 ```
 
-### (Opcional) Passo 19: Automatize Suas Traduções Usando o Intlayer
+</Step>
+
+<Step number={19} title="Automatize Suas Traduções Usando o Intlayer" isOptional={true}>
 
 Intlayer é uma biblioteca **gratuita** e **open-source** projetada para auxiliar o processo de localização na sua aplicação. Enquanto o i18next gerencia o carregamento e a gestão das traduções, o Intlayer ajuda a automatizar o fluxo de trabalho das traduções.
 
@@ -1073,3 +1110,7 @@ O Intlayer permite que você:
   Intlayer oferece um editor visual gratuito para editar seu conteúdo usando um editor visual. Saiba mais sobre [edição visual das suas traduções](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md).
 
 E mais. Para descobrir todos os recursos fornecidos pelo Intlayer, consulte a [documentação Interesse do Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/pt/i18n_using_next-intl.md

@@ -109,7 +109,9 @@ Aqui está a estrutura do projeto que iremos criar:
         └── ServerComponent.tsx
 ```
 
-### Passo 1: Instalar Dependências
+<Steps>
+
+<Step number={1} title="Instalar Dependências">
 
 Instale os pacotes necessários usando npm:
 
@@ -127,7 +129,9 @@ yarn add next-intl
 
 - **next-intl**: A biblioteca principal de internacionalização para o Next.js App Router que fornece hooks, funções no servidor e provedores no cliente para gerenciar traduções.
 
-### Passo 2: Configure seu Projeto
+</Step>
+
+<Step number={2} title="Configure seu Projeto">
 
 Crie um arquivo de configuração que defina os seus locales suportados e configure a request do next-intl. Este arquivo serve como a fonte única de verdade para a sua configuração i18n e garante segurança de tipos em toda a sua aplicação.
 
@@ -212,7 +216,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Passo 3: Definir Rotas Dinâmicas por Locale
+</Step>
+
+<Step number={3} title="Definir Rotas Dinâmicas por Locale">
 
 Configure o roteamento dinâmico para locais criando um diretório `[locale]` na sua pasta de app. Isso permite que o Next.js gerencie o roteamento baseado em localidade, onde cada localidade se torna um segmento da URL (por exemplo, `/en/about`, `/fr/about`).
 
@@ -300,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 4: Crie Seus Arquivos de Tradução
+</Step>
+
+<Step number={4} title="Crie Seus Arquivos de Tradução">
 
 Crie arquivos JSON para cada locale e namespace. Essa estrutura permite organizar as traduções de forma lógica e carregar apenas o que você precisa para cada página.
 
@@ -342,7 +350,9 @@ Organizar as traduções por namespace (por exemplo, `common.json`, `about.json`
 }
 ```
 
-### Passo 5: Utilize as Traduções nas Suas Páginas
+</Step>
+
+<Step number={5} title="Utilize as Traduções nas Suas Páginas">
 
 Crie um componente de página que carregue as traduções no servidor e as passe para componentes tanto do servidor quanto do cliente. Isso garante que as traduções sejam carregadas antes da renderização e evita o flashing de conteúdo.
 
@@ -393,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 6: Usar Traduções em Componentes Client
+</Step>
+
+<Step number={6} title="Usar Traduções em Componentes Client">
 
 Componentes client podem usar os hooks `useTranslations` e `useFormatter` para acessar traduções e funções de formatação. Esses hooks leem do contexto `NextIntlClientProvider`.
 
@@ -429,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Passo 7: Usar Traduções em Componentes de Servidor
+</Step>
+
+<Step number={7} title="Usar Traduções em Componentes de Servidor">
 
 Componentes de servidor não podem usar hooks do React, então eles recebem traduções e formatadores via props de seus componentes pai. Essa abordagem mantém os componentes de servidor síncronos e permite que eles sejam aninhados dentro de componentes cliente.
 
@@ -461,9 +475,9 @@ const ServerComponent = ({
 
 > Na sua página/layout, use `getTranslations` e `getFormatter` de `next-intl/server` para pré-calcular traduções e formatações, e então passe-os como props para os componentes de servidor.
 
----
+</Step>
 
-### (Opcional) Passo 8: Mude o idioma do seu conteúdo
+<Step number={8} title="Mude o idioma do seu conteúdo" isOptional={true}>
 
 Para mudar o idioma do seu conteúdo com next-intl, renderize links sensíveis ao locale que apontam para o mesmo pathname enquanto troca o locale. O provider reescreve as URLs automaticamente, então você só precisa direcionar para a rota atual.
 
@@ -535,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcional) Passo 9: Use o componente Link localizado
+</Step>
+
+<Step number={9} title="Use o componente Link localizado" isOptional={true}>
 
 O `next-intl` fornece um subpacote `next-intl/navigation` que contém um componente Link localizado que aplica automaticamente a localidade ativa. Já o extraímos para você no arquivo `@/i18n`, então você pode usá-lo assim:
 
@@ -545,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Opcional) Passo 10: Acesse a localidade ativa dentro das Server Actions
+</Step>
+
+<Step number={10} title="Acesse a localidade ativa dentro das Server Actions" isOptional={true}>
 
 As Server Actions podem ler a localidade atual usando `next-intl/server`. Isso é útil para enviar e-mails localizados ou armazenar preferências de idioma junto com os dados enviados.
 
@@ -568,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` lê o locale definido pelo proxy do `next-intl`, então funciona em qualquer lugar no servidor: Route Handlers, Server Actions e edge functions.
 
-### (Opcional) Passo 11: Internacionalize seus Metadados
+</Step>
+
+<Step number={11} title="Internacionalize seus Metadados" isOptional={true}>
 
 Traduzir conteúdo é importante, mas o objetivo principal da internacionalização é tornar seu site mais visível para o mundo. I18n é uma alavanca incrível para melhorar a visibilidade do seu site por meio de SEO adequado.
 
@@ -607,7 +627,9 @@ export async function generateMetadata({
 // ... Resto do código da página
 ```
 
-### (Opcional) Passo 12: Internacionalize Seu Sitemap
+</Step>
+
+<Step number={12} title="Internacionalize Seu Sitemap" isOptional={true}>
 
 Gere um sitemap que inclua todas as versões locais das suas páginas. Isso ajuda os motores de busca a descobrir e indexar todas as versões linguísticas do seu conteúdo.
 
@@ -661,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcional) Passo 13: Internacionalize seu robots.txt
+</Step>
+
+<Step number={13} title="Internacionalize seu robots.txt" isOptional={true}>
 
 Crie um arquivo robots.txt que gerencie corretamente todas as versões de locale das suas rotas protegidas. Isso garante que os motores de busca não indexem páginas de administração ou dashboard em nenhum idioma.
 
@@ -694,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcional) Passo 14: Configurar Proxy para Roteamento de Locale
+</Step>
+
+<Step number={14} title="Configurar Proxy para Roteamento de Locale" isOptional={true}>
 
 Crie um proxy para detectar automaticamente o locale preferido do usuário e redirecioná-lo para a URL apropriada com prefixo de locale. O next-intl fornece uma função proxy conveniente que faz isso automaticamente.
 
@@ -714,7 +740,9 @@ export const config = {
 };
 ```
 
-### (Opcional) Passo 15: Configurar Tipos TypeScript para o Locale
+</Step>
+
+<Step number={15} title="Configurar Tipos TypeScript para o Locale" isOptional={true}>
 
 Configurar o TypeScript ajudará você a obter autocompletar e segurança de tipos para suas chaves.
 
@@ -740,7 +768,9 @@ declare module "next-intl" {
 
 Este código usará Module Augmentation para adicionar os locales e mensagens ao tipo AppConfig do next-intl.
 
-### (Opcional) Passo 15: Automatize Suas Traduções Usando Intlayer
+</Step>
+
+<Step number={16} title="Automatize Suas Traduções Usando Intlayer" isOptional={true}>
 
 Intlayer é uma biblioteca **gratuita** e **open-source** projetada para auxiliar o processo de localização na sua aplicação. Enquanto o next-intl gerencia o carregamento e a gestão das traduções, o Intlayer ajuda a automatizar o fluxo de trabalho das traduções.
 
@@ -765,3 +795,7 @@ O Intlayer permite que você:
   Intlayer oferece um editor visual gratuito para editar seu conteúdo usando um editor visual. Saiba mais sobre [edição visual das suas traduções](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md).
 
 E mais. Para descobrir todos os recursos fornecidos pelo Intlayer, consulte a [documentação sobre o interesse do Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/ru/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ history:
   title="Демо CodeSandbox - Как интернационализировать ваше приложение с помощью Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Смотрите [шаблон приложения](https://github.com/aymericzip/next-i18next-template) на GitHub.
 
@@ -116,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Обертки для React над i18next, предоставляющие хуки, такие как `useTranslation`, для клиентских компонентов.
 - **i18next-resources-to-backend**: Плагин, который позволяет динамически загружать файлы переводов, загружая только необходимые пространства имён.
 
-### Шаг 2: Настройка проекта
+</Step>
+
+<Step number={2} title="Настройка проекта">
 
 Создайте файл конфигурации, чтобы определить поддерживаемые локали, локаль по умолчанию и вспомогательные функции для локализации URL. Этот файл служит единственным источником правды для вашей настройки i18n и обеспечивает типобезопасность во всем приложении.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Шаг 3: Централизовать пространства имён переводов
+</Step>
+
+<Step number={3} title="Централизовать пространства имён переводов">
 
 Создайте единый источник правды для каждого namespace, который использует ваше приложение. Повторное использование этого списка поддерживает синхронизацию кода сервера, клиента и инструментов, а также обеспечивает строгую типизацию для помощников перевода.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Шаг 4: Строгая типизация ключей перевода с помощью TypeScript
+</Step>
+
+<Step number={4} title="Строгая типизация ключей перевода с помощью TypeScript">
 
 Расширьте `i18next`, чтобы он ссылался на ваши канонические языковые файлы (обычно английские). TypeScript тогда выводит допустимые ключи для каждого namespace, поэтому вызовы `t()` проверяются полностью.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Шаг 5: Настройка инициализации i18n на стороне сервера
+</Step>
+
+<Step number={5} title="Настройка инициализации i18n на стороне сервера">
 
 Создайте функцию инициализации на стороне сервера, которая загружает переводы для серверных компонентов. Эта функция создает отдельный экземпляр i18next для серверного рендеринга, обеспечивая загрузку переводов до рендеринга.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Шаг 6: Создание клиентского провайдера i18n
+</Step>
+
+<Step number={6} title="Создание клиентского провайдера i18n">
 
 Создайте клиентский компонент-провайдер, который оборачивает ваше приложение в контекст i18next. Этот провайдер получает предварительно загруженные переводы с сервера, чтобы предотвратить мерцание непереведённого контента (FOUC) и избежать повторных запросов.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Шаг 7: Определение динамических маршрутов локалей
+</Step>
+
+<Step number={7} title="Определение динамических маршрутов локалей">
 
 Настройте динамическую маршрутизацию для локалей, создав директорию `[locale]` в вашей папке app. Это позволяет Next.js обрабатывать маршрутизацию на основе локалей, где каждая локаль становится сегментом URL (например, `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Шаг 8: Создайте файлы переводов
+</Step>
+
+<Step number={8} title="Создайте файлы переводов">
 
 Создайте JSON-файлы для каждой локали и пространства имён. Такая структура позволяет логично организовать переводы и загружать только то, что необходимо для каждой страницы.
 
@@ -520,7 +537,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Шаг 9: Использование переводов на ваших страницах
+</Step>
+
+<Step number={9} title="Использование переводов на ваших страницах">
 
 Создайте компонент страницы, который инициализирует i18next на сервере и передаёт переводы как серверным, так и клиентским компонентам. Это гарантирует, что переводы загружены до рендера и предотвращает мерцание контента.
 
@@ -580,7 +599,9 @@ export default async function AboutPage({
 }
 ```
 
-### Шаг 10: Использование переводов в клиентских компонентах
+</Step>
+
+<Step number={10} title="Использование переводов в клиентских компонентах">
 
 Клиентские компоненты могут использовать хук `useTranslation` для доступа к переводам. Этот хук предоставляет функцию перевода и экземпляр i18n, что позволяет переводить контент и получать информацию о локали.
 
@@ -631,7 +652,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Шаг 11: Использование переводов в серверных компонентах
+</Step>
+
+<Step number={11} title="Использование переводов в серверных компонентах">
 
 Серверные компоненты не могут использовать React hooks, поэтому они получают переводы через props от своих родительских компонентов. Такой подход сохраняет синхронность серверных компонентов и позволяет вкладывать их внутрь клиентских компонентов.
 
@@ -677,9 +700,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Необязательно) Шаг 12: Изменение языка вашего контента
+<Step number={12} title="Изменение языка вашего контента" isOptional={true}>
 
 Для изменения языка вашего контента в Next.js рекомендуется использовать URL с префиксом локали и ссылки Next.js. Пример ниже считывает текущую локаль из маршрута, удаляет её из пути и отображает по одной ссылке для каждой доступной локали.
 
@@ -751,7 +774,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Необязательно) Шаг 13: Создание локализованного компонента Link
+</Step>
+
+<Step number={13} title="Создание локализованного компонента Link" isOptional={true}>
 
 Повторное использование локализованных URL по всему вашему приложению обеспечивает согласованную навигацию и улучшает SEO. Оберните `next/link` в небольшой помощник, который добавляет префикс активной локали к внутренним маршрутам, оставляя внешние URL без изменений.
 
@@ -802,7 +827,9 @@ export default function LocalizedLink({
 
 > Совет: Поскольку `LocalizedLink` является заменой "drop-in", мигрируйте постепенно, меняя импорты и позволяя компоненту обрабатывать URL-адреса, специфичные для локали.
 
-### (Опционально) Шаг 14: Доступ к активной локали внутри Server Actions
+</Step>
+
+<Step number={14} title="Доступ к активной локали внутри Server Actions" isOptional={true}>
 
 Server Actions часто нуждаются в текущей локали для писем, логирования или интеграций с третьими сторонами. Объедините cookie с локалью, установленной вашим прокси, с заголовком `Accept-Language` в качестве резервного варианта.
 
@@ -840,7 +867,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Поскольку помощник использует cookies и заголовки Next.js, он работает в Route Handlers, Server Actions и других контекстах, доступных только на сервере.
 
-### (Необязательно) Шаг 15: Интернационализация ваших метаданных
+</Step>
+
+<Step number={15} title="Интернационализация ваших метаданных" isOptional={true}>
 
 Перевод контента важен, но основная цель интернационализации, сделать ваш сайт более заметным для всего мира. I18n, это мощный инструмент для улучшения видимости вашего сайта через правильное SEO.
 
@@ -907,7 +936,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Необязательно) Шаг 16: Интернационализация вашей карты сайта
+</Step>
+
+<Step number={16} title="Интернационализация вашей карты сайта" isOptional={true}>
 
 Создайте карту сайта, которая включает все версии страниц для каждой локали. Это помогает поисковым системам обнаруживать и индексировать все языковые версии вашего контента.
 
@@ -962,7 +993,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Необязательно) Шаг 17: Интернационализация вашего файла robots.txt
+</Step>
+
+<Step number={17} title="Интернационализация вашего файла robots.txt" isOptional={true}>
 
 Создайте файл robots.txt, который корректно обрабатывает все языковые версии ваших защищённых маршрутов. Это гарантирует, что поисковые системы не будут индексировать страницы админки или панели управления на любом языке.
 
@@ -993,7 +1026,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Необязательно) Шаг 18: Настройка Middleware для маршрутизации по локали
+</Step>
+
+<Step number={18} title="Настройка Middleware для маршрутизации по локали" isOptional={true}>
 
 Создайте прокси, который автоматически определяет предпочитаемую пользователем локаль и перенаправляет его на соответствующий URL с префиксом локали. Это улучшает пользовательский опыт, показывая контент на предпочитаемом языке.
 
@@ -1082,7 +1117,9 @@ export const config = {
 };
 ```
 
-### (Опционально) Шаг 19: Автоматизируйте ваши переводы с помощью Intlayer
+</Step>
+
+<Step number={19} title="Автоматизируйте ваши переводы с помощью Intlayer" isOptional={true}>
 
 Intlayer, это **бесплатная** и **открытая** библиотека, созданная для помощи в процессе локализации вашего приложения. В то время как i18next отвечает за загрузку и управление переводами, Intlayer помогает автоматизировать рабочий процесс перевода.
 
@@ -1112,3 +1149,7 @@ Intlayer позволяет вам:
   Intlayer предлагает бесплатный визуальный редактор для редактирования вашего контента. Узнайте больше о [визуальном редактировании переводов](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md).
 
 И многое другое. Чтобы узнать обо всех возможностях Intlayer, пожалуйста, обратитесь к [документации по интересу Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>