@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/de/i18n_using_next-intl.md

@@ -108,7 +108,9 @@ Hier ist die Projektstruktur, die wir erstellen werden:
         └── ServerComponent.tsx
 ```
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete mit npm:
 
@@ -126,7 +128,9 @@ yarn add next-intl
 
 - **next-intl**: Die zentrale Internationalisierungsbibliothek für den Next.js App Router, die Hooks, Serverfunktionen und Client-Provider zur Verwaltung von Übersetzungen bereitstellt.
 
-### Schritt 2: Projekt konfigurieren
+</Step>
+
+<Step number={2} title="Projekt konfigurieren">
 
 Erstellen Sie eine Konfigurationsdatei, die Ihre unterstützten Sprachen definiert und die next-intl-Anfragekonfiguration einrichtet. Diese Datei dient als einzige Quelle der Wahrheit für Ihre i18n-Konfiguration und gewährleistet Typensicherheit in Ihrer gesamten Anwendung.
 
@@ -211,7 +215,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Schritt 3: Dynamische Locale-Routen definieren
+</Step>
+
+<Step number={3} title="Dynamische Locale-Routen definieren">
 
 Richten Sie die dynamische Routenführung für Sprachen ein, indem Sie im App-Ordner ein Verzeichnis `[locale]` erstellen. Dadurch kann Next.js sprachabhängige Routen verwalten, bei denen jede Sprache ein URL-Segment wird (z. B. `/en/about`, `/fr/about`).
 
@@ -300,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### Schritt 4: Erstellen Sie Ihre Übersetzungsdateien
+</Step>
+
+<Step number={4} title="Erstellen Sie Ihre Übersetzungsdateien">
 
 Erstellen Sie JSON-Dateien für jede Locale und jeden Namespace. Diese Struktur ermöglicht es Ihnen, Übersetzungen logisch zu organisieren und nur das zu laden, was Sie für jede Seite benötigen.
 
@@ -342,7 +350,9 @@ Die Organisation der Übersetzungen nach Namespace (z. B. `common.json`, `about.
 }
 ```
 
-### Schritt 5: Übersetzungen in Ihren Seiten verwenden
+</Step>
+
+<Step number={5} title="Übersetzungen in Ihren Seiten verwenden">
 
 Erstellen Sie eine Seitenkomponente, die Übersetzungen auf dem Server lädt und sowohl an Server- als auch an Client-Komponenten weitergibt. Dies stellt sicher, dass Übersetzungen vor dem Rendern geladen werden und verhindert das Aufblitzen von Inhalten.
 
@@ -393,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### Schritt 6: Übersetzungen in Client-Komponenten verwenden
+</Step>
+
+<Step number={6} title="Übersetzungen in Client-Komponenten verwenden">
 
 Client-Komponenten können die Hooks `useTranslations` und `useFormatter` verwenden, um auf Übersetzungen und Formatierungsfunktionen zuzugreifen. Diese Hooks lesen aus dem `NextIntlClientProvider`-Kontext.
 
@@ -429,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Schritt 7: Übersetzungen in Server-Komponenten verwenden
+</Step>
+
+<Step number={7} title="Übersetzungen in Server-Komponenten verwenden">
 
 Server-Komponenten können keine React-Hooks verwenden, daher erhalten sie Übersetzungen und Formatierer über Props von ihren übergeordneten Komponenten. Dieser Ansatz hält Server-Komponenten synchron und ermöglicht es, sie innerhalb von Client-Komponenten zu verschachteln.
 
@@ -461,9 +475,9 @@ const ServerComponent = ({
 
 > Verwenden Sie in Ihrer Seite/Layout `getTranslations` und `getFormatter` aus `next-intl/server`, um Übersetzungen und Formatierungen vorab zu berechnen und diese dann als Props an Server-Komponenten zu übergeben.
 
----
+</Step>
 
-### (Optional) Schritt 8: Ändern Sie die Sprache Ihres Inhalts
+<Step number={8} title="Ändern Sie die Sprache Ihres Inhalts" isOptional={true}>
 
 Um die Sprache Ihres Inhalts mit next-intl zu ändern, rendern Sie lokalisierungsbewusste Links, die auf denselben Pfadnamen zeigen, während die Locale gewechselt wird. Der Provider schreibt URLs automatisch um, sodass Sie nur die aktuelle Route anvisieren müssen.
 
@@ -535,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Schritt 9: Verwenden Sie die lokalisierte Link-Komponente
+</Step>
+
+<Step number={9} title="Verwenden Sie die lokalisierte Link-Komponente" isOptional={true}>
 
 `next-intl` stellt ein Unterpaket `next-intl/navigation` bereit, das eine lokalisierte Link-Komponente enthält, die automatisch die aktive Locale anwendet. Wir haben sie bereits für Sie in der Datei `@/i18n` extrahiert, sodass Sie sie wie folgt verwenden können:
 
@@ -545,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Optional) Schritt 10: Zugriff auf die aktive Locale innerhalb von Server Actions
+</Step>
+
+<Step number={10} title="Zugriff auf die aktive Locale innerhalb von Server Actions" isOptional={true}>
 
 Server Actions können die aktuelle Locale mit `next-intl/server` auslesen. Dies ist nützlich, um lokalisierte E-Mails zu versenden oder Spracheinstellungen zusammen mit übermittelten Daten zu speichern.
 
@@ -568,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` liest die von `next-intl` Proxy gesetzte Locale, daher funktioniert es überall auf dem Server: Route Handlers, Server Actions und Edge-Funktionen.
 
-### (Optional) Schritt 11: Internationalisieren Sie Ihre Metadaten
+</Step>
+
+<Step number={11} title="Internationalisieren Sie Ihre Metadaten" isOptional={true}>
 
 Das Übersetzen von Inhalten ist wichtig, aber das Hauptziel der Internationalisierung besteht darin, Ihre Website für die Welt sichtbarer zu machen. I18n ist ein unglaublicher Hebel, um die Sichtbarkeit Ihrer Website durch korrektes SEO zu verbessern.
 
@@ -607,7 +627,9 @@ export async function generateMetadata({
 // ... Restlicher Seiten-Code
 ```
 
-### (Optional) Schritt 12: Internationalisieren Sie Ihre Sitemap
+</Step>
+
+<Step number={12} title="Internationalisieren Sie Ihre Sitemap" isOptional={true}>
 
 Erstellen Sie eine Sitemap, die alle Sprachversionen Ihrer Seiten enthält. Dies hilft Suchmaschinen, alle Sprachversionen Ihrer Inhalte zu entdecken und zu indexieren.
 
@@ -661,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Schritt 13: Internationalisieren Sie Ihre robots.txt
+</Step>
+
+<Step number={13} title="Internationalisieren Sie Ihre robots.txt" isOptional={true}>
 
 Erstellen Sie eine robots.txt-Datei, die alle Sprachversionen Ihrer geschützten Routen korrekt behandelt. Dies stellt sicher, dass Suchmaschinen keine Admin- oder Dashboard-Seiten in irgendeiner Sprache indexieren.
 
@@ -694,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Schritt 14: Proxy für Locale Routing einrichten
+</Step>
+
+<Step number={14} title="Proxy für Locale Routing einrichten" isOptional={true}>
 
 Erstellen Sie einen Proxy, der automatisch die bevorzugte Locale des Benutzers erkennt und ihn zur entsprechenden URL mit Locale-Präfix weiterleitet. next-intl stellt eine praktische Proxy-Funktion bereit, die dies automatisch übernimmt.
 
@@ -714,7 +740,9 @@ export const config = {
 };
 ```
 
-### (Optional) Schritt 15: TypeScript-Typen für die Locale einrichten
+</Step>
+
+<Step number={15} title="TypeScript-Typen für die Locale einrichten" isOptional={true}>
 
 Die Einrichtung von TypeScript hilft Ihnen, Autovervollständigung und Typsicherheit für Ihre Schlüssel zu erhalten.
 
@@ -740,7 +768,9 @@ declare module "next-intl" {
 
 Dieser Code verwendet Module Augmentation, um die locales und messages zum next-intl AppConfig-Typ hinzuzufügen.
 
-### (Optional) Schritt 15: Automatisieren Sie Ihre Übersetzungen mit Intlayer
+</Step>
+
+<Step number={16} title="Automatisieren Sie Ihre Übersetzungen mit Intlayer" isOptional={true}>
 
 Intlayer ist eine **kostenlose** und **Open-Source**-Bibliothek, die entwickelt wurde, um den Lokalisierungsprozess in Ihrer Anwendung zu unterstützen. Während next-intl das Laden und Verwalten der Übersetzungen übernimmt, hilft Intlayer dabei, den Übersetzungsworkflow zu automatisieren.
 
@@ -765,3 +795,7 @@ Intlayer ermöglicht Ihnen:
   Intlayer bietet einen kostenlosen visuellen Editor, mit dem Sie Ihre Inhalte visuell bearbeiten können. Erfahren Sie mehr über das [visuelle Bearbeiten Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md).
 
 Und mehr. Um alle von Intlayer bereitgestellten Funktionen zu entdecken, lesen Sie bitte die [Interesse an Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/en/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Before we dive into the implementation, here are some practices you should follo
   title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > See [Application Template](https://github.com/aymericzip/next-i18next-template) on GitHub.
 
@@ -116,7 +117,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: React bindings for i18next that provide hooks like `useTranslation` for client components.
 - **i18next-resources-to-backend**: A plugin that enables dynamic loading of translation files, allowing you to load only the namespaces you need.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your supported locales, default locale, and helper functions for URL localization. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Step 3: Centralize Translation Namespaces
+</Step>
+
+<Step number={3} title="Centralize Translation Namespaces">
 
 Create a single source of truth for every namespace your application exposes. Reusing this list keeps server, client, and tooling code in sync and unlocks strong typing for translation helpers.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Step 4: Strongly Type Translation Keys with TypeScript
+</Step>
+
+<Step number={4} title="Strongly Type Translation Keys with TypeScript">
 
 Augment `i18next` to point at your canonical language files (usually English). TypeScript then infers valid keys per namespace, so calls to `t()` are checked end-to-end.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Step 5: Set Up Server-Side i18n Initialization
+</Step>
+
+<Step number={5} title="Set Up Server-Side i18n Initialization">
 
 Create a server-side initialization function that loads translations for server components. This function creates a separate i18next instance for server-side rendering, ensuring that translations are loaded before rendering.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Step 6: Create Client-Side i18n Provider
+</Step>
+
+<Step number={6} title="Create Client-Side i18n Provider">
 
 Create a client component provider that wraps your application with i18next context. This provider receives pre-loaded translations from the server to prevent flash of untranslated content (FOUC) and avoid duplicate fetching.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Step 7: Define Dynamic Locale Routes
+</Step>
+
+<Step number={7} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Step 8: Create Your Translation Files
+</Step>
+
+<Step number={8} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organize translations logically and load only what you need for each page.
 
@@ -493,7 +510,9 @@ Organizing translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 9: Utilize Translations in Your Pages
+</Step>
+
+<Step number={9} title="Utilize Translations in Your Pages">
 
 Create a page component that initializes i18next on the server and passes translations to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 10: Use Translations in Client Components
+</Step>
+
+<Step number={10} title="Use Translations in Client Components">
 
 Client components can use the `useTranslation` hook to access translations. This hook provides access to the translation function and the i18n instance, allowing you to translate content and access locale information.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Step 11: Use Translations in Server Components
+</Step>
+
+<Step number={11} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Optional) Step 12: Change the language of your content
+<Step number={12} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content in Next.js, the recommended way is to use locale-prefixed URLs and Next.js links. The example below reads the current locale from the route, strips it from the pathname, and renders one link per available locale.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 13: Build a localized Link component
+</Step>
+
+<Step number={13} title="Build a localized Link component" isOptional={true}>
 
 Reusing localized URLs across your app keeps navigation consistent and SEO-friendly. Wrap `next/link` in a small helper that prefixes internal routes with the active locale while leaving external URLs untouched.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Tip: Because `LocalizedLink` is a drop-in replacement, migrate gradually by swapping imports and letting the component handle locale-specific URLs.
 
-### (Optional) Step 14: Access the active locale inside Server Actions
+</Step>
+
+<Step number={14} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions often need the current locale for emails, logging, or third-party integrations. Combine the locale cookie set by your proxy with the `Accept-Language` header as a fallback.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Because the helper relies on Next.js cookies and headers, it works in Route Handlers, Server Actions, and other server-only contexts.
 
-### (Optional) Step 15: Internationalize Your Metadata
+</Step>
+
+<Step number={15} title="Internationalize Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalization is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Optional) Step 16: Internationalize Your Sitemap
+</Step>
+
+<Step number={16} title="Internationalize Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 17: Internationalize Your robots.txt
+</Step>
+
+<Step number={17} title="Internationalize Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines don't index admin or dashboard pages in any language.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 18: Set Up Middleware for Locale Routing
+</Step>
+
+<Step number={18} title="Set Up Middleware for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. This improves user experience by showing content in their preferred language.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 19: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={19} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localization process in your application. While i18next handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -1079,3 +1116,7 @@ Intlayer will allows your to:
   Intlayer offers an free visual editor to edit your content using a visual editor. Learn more about [visual editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/en/i18n_using_next-intl.md

@@ -107,7 +107,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: The core internationalization library for Next.js App Router that provides hooks, server functions, and client providers for managing translations.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file that defines your supported locales and sets up next-intl's request configuration. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -209,7 +213,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Step 3: Define Dynamic Locale Routes
+</Step>
+
+<Step number={3} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -297,7 +303,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 4: Create Your Translation Files
+</Step>
+
+<Step number={4} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organize translations logically and load only what you need for each page.
 
@@ -339,7 +347,9 @@ Organizing translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 5: Utilize Translations in Your Pages
+</Step>
+
+<Step number={5} title="Utilize Translations in Your Pages">
 
 Create a page component that loads translations on the server and passes them to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -390,7 +400,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 6: Use Translations in Client Components
+</Step>
+
+<Step number={6} title="Use Translations in Client Components">
 
 Client components can use the `useTranslations` and `useFormatter` hooks to access translations and formatting functions. These hooks read from the `NextIntlClientProvider` context.
 
@@ -426,7 +438,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Step 7: Use Translations in Server Components
+</Step>
+
+<Step number={7} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations and formatters via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -458,9 +472,9 @@ const ServerComponent = ({
 
 > In your page/layout, use `getTranslations` and `getFormatter` from `next-intl/server` to pre-compute translations and formatting, then pass them as props to server components.
 
----
+</Step>
 
-### (Optional) Step 8: Change the language of your content
+<Step number={8} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content with next-intl, render locale-aware links that point to the same pathname while switching locale. The provider rewrites URLs automatically, so you only have to target the current route.
 
@@ -532,7 +546,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 9: Use the localized Link component
+</Step>
+
+<Step number={9} title="Use the localized Link component" isOptional={true}>
 
 `next-intl` provides a subpackage `next-intl/navigation` that contains a localized link component that automatically applies the active locale. We already extracted it for you in the `@/i18n` file, so you can use it like this:
 
@@ -542,7 +558,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Optional) Step 10: Access the active locale inside Server Actions
+</Step>
+
+<Step number={10} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions can read the current locale using `next-intl/server`. This is useful for sending localized emails or storing language preferences alongside submitted data.
 
@@ -565,7 +583,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` reads the locale set by `next-intl` proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.
 
-### (Optional) Step 11: Internationalize Your Metadata
+</Step>
+
+<Step number={11} title="Internationalize Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalization is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -604,7 +624,9 @@ export async function generateMetadata({
 // ... Rest of the page code
 ```
 
-### (Optional) Step 12: Internationalize Your Sitemap
+</Step>
+
+<Step number={12} title="Internationalize Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -658,7 +680,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 13: Internationalize Your robots.txt
+</Step>
+
+<Step number={13} title="Internationalize Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines don't index admin or dashboard pages in any language.
 
@@ -691,7 +715,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 14: Set Up Proxy for Locale Routing
+</Step>
+
+<Step number={14} title="Set Up Proxy for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. next-intl provides a convenient proxy function that handles this automatically.
 
@@ -711,7 +737,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 15: Set Up TypeScript Types for the Locale
+</Step>
+
+<Step number={15} title="Set Up TypeScript Types for the Locale" isOptional={true}>
 
 Setting up TypeScript will help you to get autocompletion and type safety for your keys.
 
@@ -737,7 +765,9 @@ declare module "next-intl" {
 
 This code will use Module Augmentation to add the locales and messages to the next-intl AppConfig type.
 
-### (Optional) Step 15: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={16} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localization process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -762,3 +792,7 @@ Intlayer will allows your to:
   Intlayer offers an free visual editor to edit your content using a visual editor. Learn more about [visual editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>