@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/id/i18n_using_next-intl.md

@@ -107,7 +107,9 @@ Berikut adalah struktur proyek yang akan kita buat:
         └── ServerComponent.tsx
 ```
 
-### Langkah 1: Pasang Dependensi
+<Steps>
+
+<Step number={1} title="Pasang Dependensi">
 
 Pasang paket yang diperlukan menggunakan npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: Perpustakaan internasionalisasi inti untuk Next.js App Router yang menyediakan hooks, fungsi server, dan penyedia klien untuk mengelola terjemahan.
 
-### Langkah 2: Konfigurasikan Proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasikan Proyek Anda">
 
 Buat file konfigurasi yang mendefinisikan locale yang didukung dan mengatur konfigurasi request next-intl. File ini berfungsi sebagai sumber kebenaran tunggal untuk pengaturan i18n Anda dan memastikan keamanan tipe di seluruh aplikasi Anda.
 
@@ -209,7 +213,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Langkah 3: Definisikan Rute Dinamis Locale
+</Step>
+
+<Step number={3} title="Definisikan Rute Dinamis Locale">
 
 Atur routing dinamis untuk locale dengan membuat direktori `[locale]` di folder aplikasi Anda. Ini memungkinkan Next.js untuk menangani routing berbasis locale di mana setiap locale menjadi segmen URL (misalnya, `/en/about`, `/fr/about`).
 
@@ -297,7 +303,9 @@ export default async function AboutPage({
 }
 ```
 
-### Langkah 4: Buat File Terjemahan Anda
+</Step>
+
+<Step number={4} title="Buat File Terjemahan Anda">
 
 Buat file JSON untuk setiap locale dan namespace. Struktur ini memungkinkan Anda mengatur terjemahan secara logis dan memuat hanya yang Anda butuhkan untuk setiap halaman.
 
@@ -339,7 +347,9 @@ Mengorganisir terjemahan berdasarkan namespace (misalnya, `common.json`, `about.
 }
 ```
 
-### Langkah 5: Gunakan Terjemahan di Halaman Anda
+</Step>
+
+<Step number={5} title="Gunakan Terjemahan di Halaman Anda">
 
 Buat komponen halaman yang memuat terjemahan di server dan meneruskannya ke komponen server dan klien. Ini memastikan terjemahan dimuat sebelum rendering dan mencegah konten berkedip.
 
@@ -390,7 +400,9 @@ export default async function AboutPage({
 }
 ```
 
-### Langkah 6: Gunakan Terjemahan di Komponen Klien
+</Step>
+
+<Step number={6} title="Gunakan Terjemahan di Komponen Klien">
 
 Komponen klien dapat menggunakan hook `useTranslations` dan `useFormatter` untuk mengakses terjemahan dan fungsi pemformatan. Hook ini membaca dari konteks `NextIntlClientProvider`.
 
@@ -426,7 +438,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Langkah 7: Menggunakan Terjemahan di Komponen Server
+</Step>
+
+<Step number={7} title="Menggunakan Terjemahan di Komponen Server">
 
 Komponen server tidak dapat menggunakan React hooks, sehingga mereka menerima terjemahan dan formatter melalui props dari komponen induknya. Pendekatan ini menjaga komponen server tetap sinkron dan memungkinkan mereka untuk disisipkan di dalam komponen klien.
 
@@ -458,9 +472,9 @@ const ServerComponent = ({
 
 > Di halaman/layout Anda, gunakan `getTranslations` dan `getFormatter` dari `next-intl/server` untuk menghitung terjemahan dan format terlebih dahulu, lalu teruskan sebagai props ke komponen server.
 
----
+</Step>
 
-### (Opsional) Langkah 8: Ubah bahasa konten Anda
+<Step number={8} title="Ubah bahasa konten Anda" isOptional={true}>
 
 Untuk mengubah bahasa konten Anda dengan next-intl, render tautan yang mengenali locale yang mengarah ke pathname yang sama sambil mengganti locale. Provider akan menulis ulang URL secara otomatis, jadi Anda hanya perlu menargetkan rute saat ini.
 
@@ -532,7 +546,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opsional) Langkah 9: Gunakan komponen Link yang sudah dilokalisasi
+</Step>
+
+<Step number={9} title="Gunakan komponen Link yang sudah dilokalisasi" isOptional={true}>
 
 `next-intl` menyediakan subpaket `next-intl/navigation` yang berisi komponen link yang sudah dilokalisasi dan secara otomatis menerapkan locale aktif. Kami sudah mengekstraknya untuk Anda di file `@/i18n`, jadi Anda bisa menggunakannya seperti ini:
 
@@ -542,7 +558,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Opsional) Langkah 10: Akses locale aktif di dalam Server Actions
+</Step>
+
+<Step number={10} title="Akses locale aktif di dalam Server Actions" isOptional={true}>
 
 Server Actions dapat membaca locale saat ini menggunakan `next-intl/server`. Ini berguna untuk mengirim email yang sudah dilokalisasi atau menyimpan preferensi bahasa bersamaan dengan data yang dikirimkan.
 
@@ -565,7 +583,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` membaca locale yang diatur oleh proxy `next-intl`, sehingga berfungsi di mana saja di server: Route Handlers, Server Actions, dan edge functions.
 
-### (Opsional) Langkah 11: Internasionalisasi Metadata Anda
+</Step>
+
+<Step number={11} title="Internasionalisasi Metadata Anda" isOptional={true}>
 
 Menerjemahkan konten itu penting, tetapi tujuan utama internasionalisasi adalah membuat situs web Anda lebih terlihat oleh dunia. I18n adalah tuas luar biasa untuk meningkatkan visibilitas situs web Anda melalui SEO yang tepat.
 
@@ -604,7 +624,9 @@ export async function generateMetadata({
 // ... Sisa kode halaman
 ```
 
-### (Opsional) Langkah 12: Internasionalisasi Sitemap Anda
+</Step>
+
+<Step number={12} title="Internasionalisasi Sitemap Anda" isOptional={true}>
 
 Buat sitemap yang mencakup semua versi lokal dari halaman Anda. Ini membantu mesin pencari menemukan dan mengindeks semua versi bahasa dari konten Anda.
 
@@ -658,7 +680,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opsional) Langkah 13: Internasionalisasi robots.txt Anda
+</Step>
+
+<Step number={13} title="Internasionalisasi robots.txt Anda" isOptional={true}>
 
 Buat file robots.txt yang menangani dengan benar semua versi locale dari rute yang dilindungi. Ini memastikan mesin pencari tidak mengindeks halaman admin atau dashboard dalam bahasa apa pun.
 
@@ -691,7 +715,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opsional) Langkah 14: Mengatur Proxy untuk Routing Locale
+</Step>
+
+<Step number={14} title="Mengatur Proxy untuk Routing Locale" isOptional={true}>
 
 Buat proxy untuk secara otomatis mendeteksi locale yang dipilih pengguna dan mengarahkan mereka ke URL dengan prefix locale yang sesuai. next-intl menyediakan fungsi proxy yang nyaman yang menangani ini secara otomatis.
 
@@ -711,7 +737,9 @@ export const config = {
 };
 ```
 
-### (Opsional) Langkah 15: Atur Tipe TypeScript untuk Locale
+</Step>
+
+<Step number={15} title="Atur Tipe TypeScript untuk Locale" isOptional={true}>
 
 Mengatur TypeScript akan membantu Anda mendapatkan autocompletion dan keamanan tipe untuk kunci Anda.
 
@@ -737,7 +765,9 @@ declare module "next-intl" {
 
 Kode ini akan menggunakan Module Augmentation untuk menambahkan locales dan messages ke tipe AppConfig dari next-intl.
 
-### (Opsional) Langkah 15: Otomatiskan Terjemahan Anda Menggunakan Intlayer
+</Step>
+
+<Step number={16} title="Otomatiskan Terjemahan Anda Menggunakan Intlayer" isOptional={true}>
 
 Intlayer adalah perpustakaan **gratis** dan **open-source** yang dirancang untuk membantu proses lokalisasi dalam aplikasi Anda. Sementara next-intl menangani pemuatan dan pengelolaan terjemahan, Intlayer membantu mengotomatisasi alur kerja terjemahan.
 
@@ -762,3 +792,7 @@ Intlayer memungkinkan Anda untuk:
   Intlayer menawarkan editor visual gratis untuk mengedit konten Anda menggunakan editor visual. Pelajari lebih lanjut tentang [mengedit terjemahan Anda secara visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md).
 
 Dan masih banyak lagi. Untuk menemukan semua fitur yang disediakan oleh Intlayer, silakan merujuk ke [Dokumentasi Manfaat Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/it/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Prima di entrare nell'implementazione, ecco alcune pratiche da seguire:
   title="Demo CodeSandbox - Come internazionalizzare la tua applicazione usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Consulta il [Template dell'Applicazione](https://github.com/aymericzip/next-i18next-template) su GitHub.
 
@@ -116,7 +117,9 @@ Ecco la struttura del progetto che andremo a creare:
         └── ServerComponent.tsx
 ```
 
-### Passo 1: Installa le Dipendenze
+<Steps>
+
+<Step number={1} title="Installa le Dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Binding React per i18next che forniscono hook come `useTranslation` per i componenti client.
 - **i18next-resources-to-backend**: Un plugin che permette il caricamento dinamico dei file di traduzione, consentendoti di caricare solo i namespace di cui hai bisogno.
 
-### Passo 2: Configura il tuo Progetto
+</Step>
+
+<Step number={2} title="Configura il tuo Progetto">
 
 Crea un file di configurazione per definire le localizzazioni supportate, la localizzazione predefinita e le funzioni di supporto per la localizzazione degli URL. Questo file funge da unica fonte di verità per la tua configurazione i18n e garantisce la sicurezza dei tipi in tutta l'applicazione.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Passo 3: Centralizzare i Namespace di Traduzione
+</Step>
+
+<Step number={3} title="Centralizzare i Namespace di Traduzione">
 
 Crea una fonte unica di verità per ogni namespace che la tua applicazione espone. Riutilizzare questa lista mantiene sincronizzati il server, il client e il codice degli strumenti, e abilita il typing forte per gli helper di traduzione.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Passo 4: Tipizzare Fortemente le Chiavi di Traduzione con TypeScript
+</Step>
+
+<Step number={4} title="Tipizzare Fortemente le Chiavi di Traduzione con TypeScript">
 
 Estendi `i18next` per puntare ai tuoi file linguistici canonici (di solito in inglese). TypeScript inferisce così le chiavi valide per namespace, quindi le chiamate a `t()` sono verificate end-to-end.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Passo 5: Configurare l'inizializzazione i18n lato server
+</Step>
+
+<Step number={5} title="Configurare l'inizializzazione i18n lato server">
 
 Crea una funzione di inizializzazione lato server che carica le traduzioni per i componenti server. Questa funzione crea un'istanza separata di i18next per il rendering lato server, assicurando che le traduzioni siano caricate prima del rendering.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Passo 6: Creare il Provider i18n lato Client
+</Step>
+
+<Step number={6} title="Creare il Provider i18n lato Client">
 
 Crea un provider componente client che avvolge la tua applicazione con il contesto i18next. Questo provider riceve traduzioni pre-caricate dal server per prevenire il flash di contenuti non tradotti (FOUC) ed evitare richieste duplicate.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Passo 7: Definire le Rotte Dinamiche per le Locali
+</Step>
+
+<Step number={7} title="Definire le Rotte Dinamiche per le Locali">
 
 Configura il routing dinamico per le localizzazioni creando una directory `[locale]` nella cartella della tua app. Questo permette a Next.js di gestire il routing basato sulla locale, dove ogni locale diventa un segmento dell'URL (es. `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Passo 8: Crea i tuoi file di traduzione
+</Step>
+
+<Step number={8} title="Crea i tuoi file di traduzione">
 
 Crea file JSON per ogni locale e namespace. Questa struttura ti permette di organizzare le traduzioni in modo logico e caricare solo ciò che ti serve per ogni pagina.
 
@@ -493,7 +510,9 @@ Organizzare le traduzioni per namespace (ad esempio, `common.json`, `about.json`
 }
 ```
 
-### Passo 9: Utilizzare le Traduzioni nelle Tue Pagine
+</Step>
+
+<Step number={9} title="Utilizzare le Traduzioni nelle Tue Pagine">
 
 Crea un componente pagina che inizializza i18next sul server e passa le traduzioni sia ai componenti server che client. Questo assicura che le traduzioni siano caricate prima del rendering e previene il lampeggiamento del contenuto.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 10: Usare le Traduzioni nei Componenti Client
+</Step>
+
+<Step number={10} title="Usare le Traduzioni nei Componenti Client">
 
 I componenti client possono utilizzare il hook `useTranslation` per accedere alle traduzioni. Questo hook fornisce l'accesso alla funzione di traduzione e all'istanza i18n, permettendo di tradurre contenuti e accedere alle informazioni sulla locale.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Passo 11: Usare le Traduzioni nei Componenti Server
+</Step>
+
+<Step number={11} title="Usare le Traduzioni nei Componenti Server">
 
 I componenti server non possono utilizzare React hooks, quindi ricevono le traduzioni tramite props dai loro componenti genitori. Questo approccio mantiene i componenti server sincroni e consente loro di essere annidati all'interno di componenti client.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Opzionale) Passo 12: Cambiare la lingua del tuo contenuto
+<Step number={12} title="Cambiare la lingua del tuo contenuto" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto in Next.js, il modo consigliato è utilizzare URL con prefisso locale e link di Next.js. L'esempio qui sotto legge la locale corrente dalla rotta, la rimuove dal pathname, e rende un link per ogni locale disponibile.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opzionale) Passo 13: Costruire un componente Link localizzato
+</Step>
+
+<Step number={13} title="Costruire un componente Link localizzato" isOptional={true}>
 
 Riutilizzare URL localizzati in tutta la tua app mantiene la navigazione coerente e ottimizzata per la SEO. Avvolgi `next/link` in un piccolo helper che aggiunge il prefisso della locale attiva alle rotte interne lasciando intatti gli URL esterni.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Suggerimento: Poiché `LocalizedLink` è un sostituto diretto, migra gradualmente sostituendo gli import e lasciando che il componente gestisca gli URL specifici per la locale.
 
-### (Opzionale) Passo 14: Accedere alla locale attiva all'interno delle Server Actions
+</Step>
+
+<Step number={14} title="Accedere alla locale attiva all'interno delle Server Actions" isOptional={true}>
 
 Le Server Actions spesso necessitano della locale corrente per email, logging o integrazioni di terze parti. Combina il cookie della locale impostato dal tuo proxy con l'header `Accept-Language` come fallback.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Poiché l'helper si basa sui cookie e sugli header di Next.js, funziona nei Route Handlers, nelle Server Actions e in altri contesti esclusivamente server.
 
-### (Opzionale) Passo 15: Internazionalizza i Tuoi Metadata
+</Step>
+
+<Step number={15} title="Internazionalizza i Tuoi Metadata" isOptional={true}>
 
 Tradurre i contenuti è importante, ma l'obiettivo principale dell'internazionalizzazione è rendere il tuo sito web più visibile al mondo. L'i18n è una leva incredibile per migliorare la visibilità del tuo sito web attraverso una corretta SEO.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Opzionale) Passo 16: Internazionalizza la tua Sitemap
+</Step>
+
+<Step number={16} title="Internazionalizza la tua Sitemap" isOptional={true}>
 
 Genera una sitemap che includa tutte le versioni locali delle tue pagine. Questo aiuta i motori di ricerca a scoprire e indicizzare tutte le versioni linguistiche dei tuoi contenuti.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opzionale) Passo 17: Internazionalizza il tuo robots.txt
+</Step>
+
+<Step number={17} title="Internazionalizza il tuo robots.txt" isOptional={true}>
 
 Crea un file robots.txt che gestisca correttamente tutte le versioni locali delle tue rotte protette. Questo assicura che i motori di ricerca non indicizzino pagine di amministrazione o dashboard in nessuna lingua.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opzionale) Passo 18: Configurare il Middleware per il Routing Locale
+</Step>
+
+<Step number={18} title="Configurare il Middleware per il Routing Locale" isOptional={true}>
 
 Crea un proxy per rilevare automaticamente la locale preferita dall'utente e reindirizzarlo all'URL con il prefisso della locale appropriata. Questo migliora l'esperienza utente mostrando i contenuti nella lingua preferita.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (Opzionale) Passo 19: Automatizza le tue traduzioni usando Intlayer
+</Step>
+
+<Step number={19} title="Automatizza le tue traduzioni usando Intlayer" isOptional={true}>
 
 Intlayer è una libreria **gratuita** e **open-source** progettata per assistere il processo di localizzazione nella tua applicazione. Mentre i18next gestisce il caricamento e la gestione delle traduzioni, Intlayer aiuta ad automatizzare il flusso di lavoro delle traduzioni.
 
@@ -1084,3 +1121,7 @@ Intlayer ti permette di:
   Intlayer offre un editor visuale gratuito per modificare i tuoi contenuti usando un editor visuale. Scopri di più su [modifica visuale delle tue traduzioni](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
 
 E altro ancora. Per scoprire tutte le funzionalità offerte da Intlayer, consulta la [documentazione sull'interesse di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/it/i18n_using_next-intl.md

@@ -107,7 +107,9 @@ Ecco la struttura del progetto che andremo a creare:
         └── ServerComponent.tsx
 ```
 
-### Passo 1: Installa le Dipendenze
+<Steps>
+
+<Step number={1} title="Installa le Dipendenze">
 
 Installa i pacchetti necessari usando npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: La libreria principale per l'internazionalizzazione del Next.js App Router che fornisce hook, funzioni server e provider client per la gestione delle traduzioni.
 
-### Passo 2: Configura il tuo Progetto
+</Step>
+
+<Step number={2} title="Configura il tuo Progetto">
 
 Crea un file di configurazione che definisce le tue localizzazioni supportate e configura la richiesta di next-intl. Questo file funge da fonte unica di verità per la tua configurazione i18n e garantisce la sicurezza dei tipi in tutta la tua applicazione.
 
@@ -210,7 +214,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Passo 3: Definire le Rotte Dinamiche per le Locali
+</Step>
+
+<Step number={3} title="Definire le Rotte Dinamiche per le Locali">
 
 Configura il routing dinamico per le localizzazioni creando una cartella `[locale]` nella tua cartella app. Questo permette a Next.js di gestire il routing basato sulla localizzazione dove ogni locale diventa un segmento dell'URL (es. `/en/about`, `/fr/about`).
 
@@ -298,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 4: Crea i Tuoi File di Traduzione
+</Step>
+
+<Step number={4} title="Crea i Tuoi File di Traduzione">
 
 Crea file JSON per ogni locale e namespace. Questa struttura ti permette di organizzare le traduzioni in modo logico e caricare solo ciò di cui hai bisogno per ogni pagina.
 
@@ -340,7 +348,9 @@ Organizzare le traduzioni per namespace (ad esempio, `common.json`, `about.json`
 }
 ```
 
-### Passo 5: Utilizza le Traduzioni nelle Tue Pagine
+</Step>
+
+<Step number={5} title="Utilizza le Traduzioni nelle Tue Pagine">
 
 Crea un componente pagina che carica le traduzioni sul server e le passa sia ai componenti server che client. Questo garantisce che le traduzioni siano caricate prima del rendering e previene il lampeggiamento del contenuto.
 
@@ -391,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### Passo 6: Usa le Traduzioni nei Componenti Client
+</Step>
+
+<Step number={6} title="Usa le Traduzioni nei Componenti Client">
 
 I componenti client possono utilizzare gli hook `useTranslations` e `useFormatter` per accedere alle traduzioni e alle funzioni di formattazione. Questi hook leggono dal contesto `NextIntlClientProvider`.
 
@@ -427,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Passo 7: Usare le Traduzioni nei Componenti Server
+</Step>
+
+<Step number={7} title="Usare le Traduzioni nei Componenti Server">
 
 I componenti server non possono usare React hooks, quindi ricevono traduzioni e formatter tramite props dai loro componenti genitori. Questo approccio mantiene i componenti server sincroni e permette loro di essere annidati all'interno di componenti client.
 
@@ -459,9 +473,9 @@ const ServerComponent = ({
 
 > Nella tua pagina/layout, usa `getTranslations` e `getFormatter` da `next-intl/server` per pre-calcolare traduzioni e formattazioni, quindi passale come props ai componenti server.
 
----
+</Step>
 
-### (Opzionale) Passo 8: Cambiare la lingua del tuo contenuto
+<Step number={8} title="Cambiare la lingua del tuo contenuto" isOptional={true}>
 
 Per cambiare la lingua del tuo contenuto con next-intl, rendi i link consapevoli della locale che puntano allo stesso pathname cambiando la locale. Il provider riscrive automaticamente gli URL, quindi devi solo indirizzare la rotta corrente.
 
@@ -533,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opzionale) Passo 9: Usa il componente Link localizzato
+</Step>
+
+<Step number={9} title="Usa il componente Link localizzato" isOptional={true}>
 
 `next-intl` fornisce un sottopacchetto `next-intl/navigation` che contiene un componente Link localizzato che applica automaticamente la locale attiva. Lo abbiamo già estratto per te nel file `@/i18n`, quindi puoi usarlo così:
 
@@ -543,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Opzionale) Passo 10: Accedi alla locale attiva all'interno delle Server Actions
+</Step>
+
+<Step number={10} title="Accedi alla locale attiva all'interno delle Server Actions" isOptional={true}>
 
 Le Server Actions possono leggere la locale corrente usando `next-intl/server`. Questo è utile per inviare email localizzate o memorizzare le preferenze linguistiche insieme ai dati inviati.
 
@@ -566,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` legge la locale impostata dal proxy di `next-intl`, quindi funziona ovunque sul server: Route Handlers, Server Actions e funzioni edge.
 
-### (Opzionale) Passo 11: Internazionalizza i tuoi Metadata
+</Step>
+
+<Step number={11} title="Internazionalizza i tuoi Metadata" isOptional={true}>
 
 Tradurre i contenuti è importante, ma l'obiettivo principale dell'internazionalizzazione è rendere il tuo sito web più visibile al mondo. L'i18n è una leva incredibile per migliorare la visibilità del tuo sito web attraverso una corretta SEO.
 
@@ -605,7 +625,9 @@ export async function generateMetadata({
 // ... Resto del codice della pagina
 ```
 
-### (Opzionale) Passo 12: Internazionalizza la tua Sitemap
+</Step>
+
+<Step number={12} title="Internazionalizza la tua Sitemap" isOptional={true}>
 
 Genera una sitemap che includa tutte le versioni locali delle tue pagine. Questo aiuta i motori di ricerca a scoprire e indicizzare tutte le versioni linguistiche dei tuoi contenuti.
 
@@ -659,7 +681,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opzionale) Passo 13: Internazionalizza il tuo robots.txt
+</Step>
+
+<Step number={13} title="Internazionalizza il tuo robots.txt" isOptional={true}>
 
 Crea un file robots.txt che gestisca correttamente tutte le versioni locali delle tue rotte protette. Questo assicura che i motori di ricerca non indicizzino pagine di amministrazione o dashboard in nessuna lingua.
 
@@ -692,7 +716,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opzionale) Passo 14: Configurare un Proxy per il Routing della Locale
+</Step>
+
+<Step number={14} title="Configurare un Proxy per il Routing della Locale" isOptional={true}>
 
 Crea un proxy per rilevare automaticamente la locale preferita dall'utente e reindirizzarlo all'URL con il prefisso della locale appropriata. next-intl fornisce una funzione proxy comoda che gestisce questo automaticamente.
 
@@ -712,7 +738,9 @@ export const config = {
 };
 ```
 
-### (Opzionale) Passo 15: Configurare i tipi TypeScript per la Locale
+</Step>
+
+<Step number={15} title="Configurare i tipi TypeScript per la Locale" isOptional={true}>
 
 Configurare TypeScript ti aiuterà ad ottenere l'autocompletamento e la sicurezza dei tipi per le tue chiavi.
 
@@ -738,7 +766,9 @@ declare module "next-intl" {
 
 Questo codice utilizzerà l'Aumento del Modulo (Module Augmentation) per aggiungere le locales e i messaggi al tipo AppConfig di next-intl.
 
-### (Opzionale) Passo 15: Automatizza le tue traduzioni usando Intlayer
+</Step>
+
+<Step number={16} title="Automatizza le tue traduzioni usando Intlayer" isOptional={true}>
 
 Intlayer è una libreria **gratuita** e **open-source** progettata per assistere il processo di localizzazione nella tua applicazione. Mentre next-intl gestisce il caricamento e la gestione delle traduzioni, Intlayer aiuta ad automatizzare il flusso di lavoro delle traduzioni.
 
@@ -763,3 +793,7 @@ Intlayer ti permette di:
   Intlayer offre un editor visuale gratuito per modificare i tuoi contenuti utilizzando un editor visuale. Scopri di più su [modifica visuale delle tue traduzioni](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
 
 E altro ancora. Per scoprire tutte le funzionalità offerte da Intlayer, consulta la [documentazione sull'interesse di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>