@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/it/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Come tradurre un'applicazione Tanstack Start usando Solid.js nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione Tanstack Start utilizzando Intlayer e Solid.js. Segui questa guida completa per rendere la tua app multilingue con un routing sensibile alla localizzazione.
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione TanStack Start + Solid multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -38,17 +38,54 @@ history:
 
 Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione fluida nei progetti Tanstack Start con Solid.js, routing sensibile alla localizzazione, supporto TypeScript e moderne pratiche di sviluppo.
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `react-i18next` o `i18next`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati**, rotte e contenuti.
-- **Garantire il supporto TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della lingua.
-- **Abilitare il routing sensibile alla localizzazione** con il sistema di routing basato su file di Tanstack Start.
+<Accordion header="Copertura completa TanStack Start">
+
+Intlayer è ottimizzato per funzionare perfettamente con TanStack Start e Solid offrendo **routing multilingue**, **mappa del sito** e tutte le funzionalità necessarie per scalare l'internazionalizzazione (i18n).
+
+</Accordion>
+
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[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)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -86,11 +123,15 @@ Con Intlayer, puoi:
 
 Vedi il [Modello di applicazione](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) su GitHub.
 
-### Passaggio 1: Crea il progetto
+<Steps>
+
+<Step number={1} title="Crea il progetto">
 
 Inizia creando un nuovo progetto TanStack Start seguendo la guida [Avvia un nuovo progetto](https://tanstack.com/start/latest/docs/framework/solid/quick-start) sul sito web di TanStack Start.
 
-### Passaggio 2: Installa i pacchetti Intlayer
+</Step>
+
+<Step number={2} title="Installa i pacchetti Intlayer">
 
 Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
 
@@ -128,7 +169,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.
 
-### Passaggio 3: Configurazione del progetto
+</Step>
+
+<Step number={3} title="Configurazione del progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -149,7 +192,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento del middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 4: Integra Intlayer nella tua configurazione Vite
+</Step>
+
+<Step number={4} title="Integra Intlayer nella tua configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -177,7 +222,9 @@ export default defineConfig({
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione dei contenuti e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 5: Crea il layout radice (Root Layout)
+</Step>
+
+<Step number={5} title="Crea il layout radice">
 
 Configura il tuo layout radice per supportare l'internazionalizzazione utilizzando `useParams` per rilevare la lingua corrente e impostando gli attributi `lang` e `dir` sul tag `html`.
 
@@ -218,7 +265,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Passaggio 6: Crea il layout della lingua (Opzionale)
+</Step>
+
+<Step number={6} title="Crea il layout della lingua">
 
 Crea un layout che gestisca il prefisso della lingua ed effettui la validazione. Questo layout assicurerà che vengano elaborati solo prefissi di lingua validi.
 
@@ -253,7 +302,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Per la modalità `'prefix-all'`, potresti preferire cambiare lo slot in `$locale`.
 > Per la modalità `'no-prefix'` o `'search-params'`, puoi rimuovere completamente lo slot.
 
-### Passaggio 7: Dichiarazione dei contenuti
+</Step>
+
+<Step number={7} title="Dichiarazione dei contenuti">
 
 Crea e gestisci le tue dichiarazioni dei contenuti per memorizzare le traduzioni:
 
@@ -299,7 +350,9 @@ export default appContent;
 
 > Per maggiori dettagli, fai riferimento alla [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 8: Utilizza componenti e hook sensibili alla lingua
+</Step>
+
+<Step number={8} title="Utilizza componenti e hook sensibili alla lingua">
 
 Crea un componente `LocalizedLink` per una navigazione sensibile alla lingua:
 
@@ -378,7 +431,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passaggio 9: Utilizza Intlayer nelle tue pagine
+</Step>
+
+<Step number={9} title="Utilizza Intlayer nelle tue pagine">
 
 Accedi ai tuoi dizionari dei contenuti in tutta l'applicazione:
 
@@ -421,7 +476,9 @@ function RouteComponent() {
 >
 > Per saperne di più sull'hook `useIntlayer`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useIntlayer.md).
 
-### Passaggio 10: Crea un componente per cambiare lingua (Locale Switcher)
+</Step>
+
+<Step number={10} title="Crea un componente per cambiare lingua">
 
 Crea un componente per consentire agli utenti di cambiare lingua:
 
@@ -465,7 +522,9 @@ export default LocaleSwitcher;
 >
 > Per saperne di più sull'hook `useLocale`, fai riferimento alla [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/solid-intlayer/useLocale.md).
 
-### Passaggio 11: Gestione degli attributi HTML
+</Step>
+
+<Step number={11} title="Gestione degli attributi HTML">
 
 Come visto nel Passaggio 5, puoi gestire gli attributi `lang` e `dir` del tag `html` utilizzando `useParams` nel tuo componente radice. Questo assicura che vengano impostati gli attributi corretti sia sul server che sul client.
 
@@ -484,7 +543,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Passaggio 12: Aggiungi il middleware (Opzionale)
+</Step>
+
+<Step number={12} title="Aggiungi il middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la lingua corrente in base all'URL e imposterà il cookie della lingua appropriato. Se non viene specificata alcuna lingua, il plugin determinerà la lingua più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna lingua, reindirizzerà alla lingua predefinita.
 
@@ -515,7 +576,9 @@ export default defineConfig({
 
 ---
 
-### Passaggio 13: Internazionalizza i tuoi metadati (Opzionale)
+</Step>
+
+<Step number={13} title="Internazionalizza i tuoi metadati">
 
 Puoi anche usare la funzione `getIntlayer` per accedere ai tuoi dizionari dei contenuti all'interno del loader `head` per i metadati sensibili alla localizzazione:
 
@@ -562,7 +625,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passaggio 14: Recupera la lingua nelle tue azioni server (Opzionale)
+</Step>
+
+<Step number={14} title="Recupera la lingua nelle tue azioni server">
 
 Potresti voler accedere alla lingua corrente dall'interno delle tue azioni server o dei tuoi endpoint API.
 Puoi farlo usando l'aiutante `getLocale` di `intlayer`.
@@ -599,7 +664,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passaggio 15: Gestione delle pagine non trovate (Opzionale)
+</Step>
+
+<Step number={15} title="Gestione delle pagine non trovate">
 
 Quando un utente visita una pagina inesistente, puoi mostrare una pagina di errore 404 personalizzata e il prefisso della lingua può influenzare il modo in cui tale pagina viene attivata.
 
@@ -673,7 +740,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opzionale) Passaggio 15: Estrarre il contenuto dei componenti
+</Step>
+
+<Step number={15} title="Estrarre il contenuto dei componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -786,7 +855,9 @@ bun run build # Oppure bun run dev
 
 ---
 
-### Passaggio 16: Generare una Sitemap (Opzionale)
+</Step>
+
+<Step number={16} title="Generare una Sitemap">
 
 Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce le rotte localizzate e aggiunge i metadati necessari per i motori di ricerca.
 
@@ -859,7 +930,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passaggio 17: Configura TypeScript (Opzionale)
+</Step>
+
+<Step number={17} title="Configura TypeScript">
 
 Intlayer utilizza l'aumento dei moduli per sfruttare i vantaggi di TypeScript e rendere la tua base di codice più robusta.
 
@@ -877,6 +950,10 @@ Assicurati che la tua configurazione TypeScript includa i tipi autogenerati:
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Configurazione Git
 
 Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di inserirli nel repository Git.

package/docs/it/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Come tradurre un'app Tanstack Start nel 2026
-description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione TanStack Start utilizzando Intlayer. Segui questa guida completa per rendere la tua app multilingue con il routing consapevole della localizzazione.
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - Guida completa per tradurre la tua applicazione"
+description: "Niente più i18next. La guida 2026 per creare un'applicazione TanStack Start multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
   - Internazionalizzazione
   - Documentazione
@@ -55,17 +55,54 @@ history:
 
 Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione senza interruzioni nei progetti TanStack Start con routing consapevole della localizzazione, supporto TypeScript e pratiche di sviluppo moderne.
 
-## Cos'è Intlayer?
+## Perché Intlayer rispetto alle alternative?
 
-**Intlayer** è una libreria di internazionalizzazione (i18n) innovativa e open-source progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+Rispetto alle soluzioni principali come `react-i18next` o `use-intl` o `paraglide`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
-Con Intlayer, puoi:
+<AccordionGroup>
 
-- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
-- **Localizzare dinamicamente metadati, rotte e contenuti**.
-- **Garantire il supporto TypeScript** con tipi generati automaticamente, migliorando l'autocompletamento e il rilevamento degli errori.
-- **Beneficiare di funzionalità avanzate**, come il rilevamento e la commutazione dinamica della localizzazione.
-- **Abilitare il routing consapevole della localizzazione** con il sistema di routing basato su file di TanStack Start.
+<Accordion header="Copertura completa TanStack Start">
+
+Intlayer è completamente ottimizzato per TanStack Start, fornendo **routing multilingue**, **gestione dei cookie**, **generazione di mappe del sito**, **caricamento dinamico dei contenuti** e tutte le funzionalità necessarie per scalare i tuoi sforzi di internazionalizzazione (i18n).
+
+</Accordion>
+
+<Accordion header="Dimensione del bundle">
+
+Invece di caricare enormi file JSON nelle tue pagine, carica solo il contenuto necessario. Intlayer aiuta a **ridurre le dimensioni del bundle e della pagina fino al 50%**.
+
+</Accordion>
+
+<Accordion header="Manutenibilità">
+
+L'ambito del contenuto dell'applicazione **facilita la manutenzione** per applicazioni su larga scala. Puoi duplicare o eliminare una singola cartella di funzionalità senza l'onere mentale di rivedere l'intera codebase dei contenuti. Inoltre, Intlayer è **completamente tipizzato (fully typed)** per garantire l'accuratezza dei tuoi contenuti.
+
+</Accordion>
+
+<Accordion header="Agente IA">
+
+La co-localizzazione dei contenuti **riduce il contesto necessario** dai Large Language Models (LLM). Intlayer viene fornito anche con una suite di strumenti, come una **CLI** per verificare le traduzioni mancanti,**[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)** e **[capacità dell'agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, per rendere l'esperienza dello sviluppatore (DX) ancora più fluida per gli agenti IA.
+
+</Accordion>
+
+<Accordion header="Automazione">
+
+Utilizza l'automazione per tradurre nella tua pipeline CI/CD utilizzando il LLM di tua scelta al costo del tuo provider di intelligenza artificiale. Intlayer offre anche un **compilatore** per automatizzare l'estrazione dei contenuti, nonché una [piattaforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) per aiutare a **tradurre in background**.
+
+</Accordion>
+
+<Accordion header="Prestazione">
+
+La connessione di enormi file JSON ai componenti può portare a problemi di prestazioni e reattività. Intlayer ottimizza il caricamento dei contenuti in fase di compilazione.
+
+</Accordion>
+
+<Accordion header="Scalabilità con nessuno sviluppatore">
+
+Più di una semplice soluzione i18n, Intlayer fornisce un **[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** self-hosted e un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** per aiutarti gestisci i tuoi contenuti multilingue in **tempo reale**, semplificando la collaborazione con traduttori, copywriter e altri membri del team. I contenuti possono essere archiviati localmente e/o in remoto.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -103,11 +140,15 @@ Con Intlayer, puoi:
 
 Vedi il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-tanstack-start-template) su GitHub.
 
-### Passaggio 1: Creare il Progetto
+<Steps>
+
+<Step number={1} title="Creare il Progetto">
 
 Inizia creando un nuovo progetto TanStack Start seguendo la guida [Avvia nuovo progetto](https://tanstack.com/start/latest/docs/framework/react/quick-start) sul sito web di TanStack Start.
 
-### Passaggio 2: Installare i Pacchetti Intlayer
+</Step>
+
+<Step number={2} title="Installare i Pacchetti Intlayer">
 
 Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
 
@@ -145,7 +186,9 @@ bun x intlayer init
 - **vite-intlayer**
   Include il plugin Vite per l'integrazione di Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per il rilevamento della localizzazione preferita dell'utente, la gestione dei cookie e la gestione del reindirizzamento degli URL.
 
-### Passaggio 3: Configurazione del tuo progetto
+</Step>
+
+<Step number={3} title="Configurazione del tuo progetto">
 
 Crea un file di configurazione per configurare le lingue della tua applicazione:
 
@@ -166,7 +209,9 @@ export default config;
 
 > Attraverso questo file di configurazione, puoi impostare URL localizzati, reindirizzamento middleware, nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, fai riferimento alla [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
 
-### Passaggio 4: Integrare Intlayer nella tua Configurazione Vite
+</Step>
+
+<Step number={4} title="Integrare Intlayer nella tua Configurazione Vite">
 
 Aggiungi il plugin intlayer nella tua configurazione:
 
@@ -196,7 +241,9 @@ export default config;
 
 > Il plugin Vite `intlayer()` viene utilizzato per integrare Intlayer con Vite. Garantisce la creazione dei file di dichiarazione del contenuto e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Vite. Inoltre, fornisce alias per ottimizzare le prestazioni.
 
-### Passaggio 5: Creare il Layout Root
+</Step>
+
+<Step number={5} title="Creare il Layout Root">
 
 Configura il tuo layout root per supportare l'internazionalizzazione utilizzando `useParams` per rilevare la localizzazione corrente e impostando gli attributi `lang` e `dir` sul tag `html`.
 
@@ -256,7 +303,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Passaggio 6: Creare il Layout di Localizzazione
+</Step>
+
+<Step number={6} title="Creare il Layout di Localizzazione">
 
 Crea un layout che gestisca il prefisso di localizzazione ed esegua la validazione.
 
@@ -288,7 +337,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Per la modalità `'prefix-all'`, potresti preferire passare allo slot `$locale`.
 > Per la modalità `'no-prefix'` o `'search-params'`, puoi rimuovere completamente lo slot.
 
-### Passaggio 7: Dichiarare il Tuo Contenuto
+</Step>
+
+<Step number={7} title="Dichiarare il Tuo Contenuto">
 
 Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
 
@@ -334,7 +385,9 @@ export default appContent;
 
 > Per ulteriori dettagli, fai riferimento alla [documentazione sulla dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md).
 
-### Passaggio 8: Creare Componenti e Hook Consapevoli della Localizzazione
+</Step>
+
+<Step number={8} title="Creare Componenti e Hook Consapevoli della Localizzazione">
 
 Crea un componente `LocalizedLink` per la navigazione consapevole della localizzazione:
 
@@ -438,7 +491,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Passaggio 9: Utilizzare Intlayer nelle tue Pagine
+</Step>
+
+<Step number={9} title="Utilizzare Intlayer nelle tue Pagine">
 
 Accedi ai tuoi dizionari di contenuti in tutta l'applicazione:
 
@@ -486,7 +541,9 @@ function RouteComponent() {
 
 > Per saperne di più sull'hook `useIntlayer`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useIntlayer.md).
 
-### Passaggio 10: Creare un Componente Locale Switcher
+</Step>
+
+<Step number={10} title="Creare un Componente Locale Switcher">
 
 Crea un componente per consentire agli utenti di cambiare lingua:
 
@@ -547,7 +604,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Per saperne di più sull'hook `useLocale`, consulta la [documentazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md).
 
-### Passaggio 11: Gestione degli Attributi HTML
+</Step>
+
+<Step number={11} title="Gestione degli Attributi HTML">
 
 Come visto nel Passaggio 5, puoi gestire gli attributi `lang` e `dir` del tag `html` utilizzando `useParams` nel tuo componente root. Questo assicura che gli attributi corretti siano impostati sia sul server che sul client.
 
@@ -566,7 +625,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Passaggio 12: Aggiungere middleware (Opzionale)
+</Step>
+
+<Step number={12} title="Aggiungere middleware">
 
 Puoi anche utilizzare `intlayerProxy` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la localizzazione corrente in base all'URL e imposterà il cookie della localizzazione appropriato. Se non viene specificata alcuna localizzazione, il plugin determinerà la localizzazione più appropriata in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna localizzazione, reindirizzerà alla localizzazione predefinita.
 
@@ -597,7 +658,9 @@ export default defineConfig({
 
 ---
 
-### Passaggio 13: Internazionalizzare i tuoi Metadati (Opzionale)
+</Step>
+
+<Step number={13} title="Internazionalizzare i tuoi Metadati">
 
 Puoi anche utilizzare l'hook `getIntlayer` per accedere ai tuoi dizionari di contenuti in tutta l'applicazione:
 
@@ -644,7 +707,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Passaggio 14: Recuperare la localizzazione nelle tue server action (Opzionale)
+</Step>
+
+<Step number={14} title="Recuperare la localizzazione nelle tue server action">
 
 Potresti voler accedere alla localizzazione corrente dall'interno delle tue server action o degli endpoint API.
 Puoi farlo utilizzando l'helper `getLocale` di `intlayer`.
@@ -681,7 +746,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Passaggio 15: Gestire le pagine non trovate (Opzionale)
+</Step>
+
+<Step number={15} title="Gestire le pagine non trovate">
 
 Quando un utente visita una pagina non esistente, puoi visualizzare una pagina 404 personalizzata e il prefisso di localizzazione può influire sul modo in cui viene attivata la pagina non trovata.
 
@@ -755,7 +822,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opzionale) Passaggio 15: Estrarre il contenuto dei tuoi componenti
+</Step>
+
+<Step number={15} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -853,7 +922,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Passaggio 16: Generare una Sitemap (Opzionale)
+</Step>
+
+<Step number={16} title="Generare una Sitemap">
 
 Intlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce i percorsi localizzati e aggiunge i metadati necessari per i motori di ricerca.
 
@@ -928,7 +999,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Passaggio 17: Configurare TypeScript (Opzionale)
+</Step>
+
+<Step number={17} title="Configurare TypeScript">
 
 Intlayer utilizza l'augmentation dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
@@ -946,6 +1019,10 @@ Assicurati che la tua configurazione TypeScript includa i tipi generati automati
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Configurazione Git
 
 Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di commetterli nel repository Git.