@intlayer/docs 9.4.1 → 9.4.3

package/docs/it/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-08-25
+updatedAt: 2026-08-30
 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:
@@ -64,7 +64,6 @@ Questa guida dimostra come integrare **Intlayer** per un'internazionalizzazione
 Rispetto alle soluzioni principali come `react-i18next` o `use-intl` o `paraglide`, Intlayer è una soluzione dotata di ottimizzazioni integrate come:
 
 <AccordionGroup>
-
 <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).
@@ -161,15 +160,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > il flag `--interactive` è opzionale. Usa `intlayer-cli init` se sei un agente IA.
@@ -651,8 +650,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
----
-
 </Step>
 
 <Step number={11} title="Aggiungi middleware">
@@ -689,8 +686,6 @@ export default defineConfig({
 });
 ```
 
----
-
 </Step>
 
 <Step number={12} title="Internazionalizza i tuoi Metadati">
@@ -884,8 +879,6 @@ Mantieni il chunk per locale senza pagarne il costo sul percorso critico dell'he
 | Client navigations   | nothing to resolve    | re-entered on every match  | served from the router cache           |
 | Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
 
----
-
 </Step>
 
 <Step number={13} title="Recupera la locale nelle tue server actions">
@@ -923,141 +916,85 @@ export const getLocaleServer = createServerFn().handler(async () => {
 });
 ```
 
----
-
 </Step>
 
-<Step number={14} title="Gestisci le pagine non trovate">
+<Step number={14} title="Gestire le pagine non trovate">
 
-Quando un utente visita una pagina che non esiste, puoi visualizzare una pagina "not found" personalizzata e il prefisso della locale potrebbe influire sul modo in cui la pagina "not found" viene attivata.
+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.
 
-#### Pagina Home Localizzata
+#### Comprendere la Gestione 404 di TanStack Router con i Prefissi di Localizzazione
 
-> Se desideri utilizzare il tuo contenuto in un attributo `string`, come `alt`, `title`, `href`, `aria-label`, ecc., puoi utilizzare il valore della funzione, come:
->
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
+In TanStack Router, la gestione delle pagine 404 con rotte localizzate richiede un approccio a più livelli:
 
-> 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).
+1. **Rotta 404 dedicata**: Una rotta specifica per visualizzare l'interfaccia utente 404
+2. **Validazione a livello di rotta**: Convalida i prefissi di localizzazione e reindirizza quelli non validi al 404
+3. **Rotta catch-all**: Cattura qualsiasi percorso non corrispondente all'interno del segmento di localizzazione
 
-</Step>
-
-```tsx fileName="src/components/locale-switcher.tsx"
-import { useLocation } from "@tanstack/react-router";
-import {
-  getHTMLTextDir,
-  getLocaleName,
-  getPathWithoutLocale,
-  getPrefix,
-  Locales,
-} from "intlayer";
-import type { FC } from "react";
-import { useLocale } from "react-intlayer";
-
-import { LocalizedLink, type To } from "./localized-link";
-
-export const LocaleSwitcher: FC = () => {
-  const { pathname } = useLocation();
-
-  const { availableLocales, locale, setLocale } = useLocale();
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
 
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
+// Questo crea una rotta dedicata /[locale]/404
+// Viene utilizzata sia come rotta diretta che importata come componente in altri file
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
 
+// Esportata separatamente in modo che possa essere riutilizzata in notFoundComponent e nelle rotte catch-all
+export function NotFoundComponent() {
   return (
-    <ol>
-      {availableLocales.map((localeEl) => (
-        <li key={localeEl}>
-          <LocalizedLink
-            aria-current={localeEl === locale ? "page" : undefined}
-            onClick={() => setLocale(localeEl)}
-            params={{ locale: getPrefix(localeEl).localePrefix }}
-            to={pathWithoutLocale as To}
-          >
-            <span>
-              {/* Localizzazione - es. FR */}
-              {localeEl}
-            </span>
-            <span>
-              {/* Lingua nella sua localizzazione - es. Français */}
-              {getLocaleName(localeEl, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* Lingua nella localizzazione corrente - es. Francés con localizzazione corrente impostata su Locales.SPANISH */}
-              {getLocaleName(localeEl)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Lingua in inglese - es. French */}
-              {getLocaleName(localeEl, Locales.ENGLISH)}
-            </span>
-          </LocalizedLink>
-        </li>
-      ))}
-    </ol>
+    <div>
+      <h1>404</h1>
+    </div>
   );
-};
-```
-
-> 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).
-
-</Step>
-
-<Step number={11} title="Gestione degli Attributi HTML">
-
-return (
-<html dir={getHTMLTextDir(locale)} lang={locale}>
-{/* ... _/}
-</html>
-);
-} {/_ ... */}
-</html>
-);
 }
+```
 
-export const Route = createFileRoute("/{-$locale}/")({
-component: RouteComponent,
-head: async ({ params }) => {
-const { locale = defaultLocale } = params;
-const path = "/"; // The path for this route
-
-    const metaContent = await getIntlayerAsync("app", locale);
-
-````
-
-> Se un `head` legge più dizionari, risolvili con `Promise.all`: attendere ogni `getIntlayerAsync` su una riga separata concatena le richieste invece di eseguirle in parallelo.
-
-Il compromesso: l'import dinamico viene risolto mentre `head` è in esecuzione, sul percorso critico del rendering del documento. Su una rotta fredda questo ritarda l'`head` di qualche millisecondo e può peggiorare leggermente l'**LCP**.
-
-</Tab>
-
-<Tab label="Risoluzione dinamica in cache" value="cached">
-
-Risolvi il dizionario nel `loader` della rotta e rileggilo da `loaderData` dentro `head`. I loader delle rotte corrispondenti girano in parallelo e `staleTime: Infinity` comunica a TanStack Router che il risultato non scade mai: il chunk per locale viene quindi risolto una sola volta e poi servito dalla cache del router, lasciando `head` sincrono.
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { NotFoundComponent } from "./404";
 
-```tsx fileName="src/routes/{-$locale}/index.tsx"
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad viene eseguito prima del rendering della rotta (sia sul server che sul client)
+  // È il luogo ideale per convalidare il prefisso di localizzazione
+  beforeLoad: ({ params }) => {
+    const localeParam = params.locale;
 
-<Tabs>
- <Tab value='Extract command'>
+    // validatePrefix controlla se la localizzazione è valida in base alla tua configurazione intlayer
+    const { isValid, localePrefix } = validatePrefix(localeParam);
 
-  return { locale, content };
+    if (!isValid) {
+      // Prefisso di localizzazione non valido - reindirizza alla pagina 404 con un prefisso valido
+      throw redirect({
+        to: "/{-$locale}/404",
+        params: { locale: localePrefix },
+      });
+    }
+  },
+  component: Outlet,
+  // notFoundComponent viene chiamato quando una rotta figlia non esiste
+  // es. /en/non-existent-page attiva questo all'interno del layout /en
+  notFoundComponent: NotFoundComponent,
 });
-import { createFileRoute } from "@tanstack/react-router";
-
-````
-
-```tsx fileName="src/routes/{-$locale}/route.tsx"
-
 ```
 
 ```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
 import { NotFoundComponent } from "./404";
+
+// La rotta $ (splat/catch-all) corrisponde a qualsiasi percorso che non corrisponde ad altre rotte
+// es. /en/some/deeply/nested/invalid/path
+// Questo assicura che TUTTI i percorsi non corrispondenti all'interno di una localizzazione mostrino la pagina 404
+// Senza questo, i percorsi profondi non corrispondenti potrebbero mostrare una pagina vuota o un errore
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
 ```
 
 </Step>
 
-<Step number={15} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
+<Step number={15} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}> isOptional={true}>
 
 Se hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.
 
@@ -1068,11 +1005,24 @@ Per configurarlo, puoi aggiungere una sezione `compiler` nel tuo file `intlayer.
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
+const config: IntlayerConfig = {
+  // ... Resto della tua configurazione
+  compiler: {
+    /**
+     * Indica se il compilatore deve essere abilitato.
+     */
+    enabled: true,
+
     /**
      * Definisce il percorso dei file di output
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
+    /**
+     * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.
+     */
+    saveComponents: false,
+
     /**
      * Prefisso chiave dizionario
      */
@@ -1084,28 +1034,34 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Comando di estrazione'>
+ <Tab value="Comando di estrazione">
 
 Esegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto
 
 ```bash packageManager="npm"
-
+npx intlayer extract
 ```
 
 ```bash packageManager="pnpm"
-
+pnpm intlayer extract
 ```
 
 ```bash packageManager="yarn"
-
+yarn intlayer extract
 ```
 
 ```bash packageManager="bun"
+bun x intlayer extract
+```
 
  </Tab>
-</Tabs>
+ <Tab value="Compilatore Babel">
 
-bun x intlayer extract
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
+Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 
@@ -1130,10 +1086,23 @@ yarn build # O yarn dev
 ```
 
 ```bash packageManager="bun"
+bun run build # Or bun run dev
+```
 
----
+ </Tab>
+</Tabs>
 
-bun run build # Or bun run dev
+</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.
+
+> La sitemap generata da Intlayer supporta lo spazio dei nomi `xhtml:link` (Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio, `/about`, `/about?lang=fr` e `/about?lang=es`). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.
+
+Per utilizzarlo, devi prima configurare il tuo file `vite.config.ts` per abilitare il pre-rendering per i tuoi percorsi localizzati e disabilitare la generazione predefinita della sitemap di TanStack Start.
+
+```typescript fileName="vite.config.ts"
 import { localeFlatMap } from "intlayer";
 // ... altre importazioni
 
@@ -1169,9 +1138,13 @@ export default defineConfig({
 
 Quindi, crea un percorso `src/routes/sitemap[.]xml.ts` che utilizzi la funzione `generateSitemap`:
 
-````typescript fileName="src/routes/sitemap[.]xml.ts"
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
 
----
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1192,6 +1165,17 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
+```
+
+</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.
+
+Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente:
+
+```json5 fileName="tsconfig.json"
 {
   // ... le tue configurazioni esistenti
   include: [
@@ -1199,17 +1183,22 @@ export const Route = createFileRoute("/sitemap.xml")({
     ".intlayer/**/*.ts", // Includi i tipi generati automaticamente
   ],
 }
+```
+
+</Step>
+
+</Steps>
 
 ### Configurazione Git
 
-Si consiglia di ignorare i file generati da Intlayer. Questo ti permette di evitare di effettuare il commit nel tuo repository Git.
+Si consiglia di ignorare i file generati da Intlayer. Ciò consente di evitare di commetterli nel repository Git.
 
-Per fare ciò, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
+Per farlo, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
 
 ```plaintext fileName=".gitignore"
 # Ignora i file generati da Intlayer
 .intlayer
-````
+```
 
 ---
 
@@ -1244,3 +1233,115 @@ Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymeri
 - [hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/packages/react-intlayer/useLocale.md)
 - [Dichiarazione dei Contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md)
 - [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+
+## Domande frequenti
+
+<FAQ>
+
+<Question title="Quali sono le diverse soluzioni disponibili per internazionalizzare un'app TanStack Start?">
+
+TanStack Start non include un proprio livello i18n, quindi la scelta è una libreria:
+
+- **`i18next` / `react-i18next`** e **`react-intl`**: cataloghi di messaggi indipendenti dal framework, collegati manualmente al router.
+- **`Lingui`**: messaggi ICU con un passaggio di compilazione.
+- **`Intlayer`**: contenuto dichiarato accanto a ogni componente e compilato in fase di build, con chiavi tipizzate, routing consapevole delle locale, generazione della sitemap, traduzione AI, un editor visivo e un CMS.
+
+La differenza che conta su TanStack Start è il routing e il rendering lato server. Intlayer si integra con il router basato su file, la funzione `head` e il passaggio di pre-render, invece di lasciarti assemblare a mano un provider, un rilevatore di locale e una sitemap. Vedi [perché Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/interest_of_intlayer.md) e il [benchmark i18n di TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="Quanto aggiunge l'i18n alla dimensione del mio bundle TanStack Start?">
+
+Molto meno di una configurazione basata su namespace, perché una pagina non scarica mai un catalogo che non renderizza. Il markup renderizzato lato server risolve i suoi contenuti sul server, e il compilatore in fase di build sostituisce le chiamate `useIntlayer` con le esatte voci del dizionario che un componente utilizza, quindi le chiavi e le lingue non utilizzate vengono eliminate, e i [dizionari dinamici](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dynamic_dictionaries/index.md) suddividono il resto per locale. Misurato rispetto alle alternative abituali, Intlayer riduce la dimensione del bundle e delle pagine fino al 50%. Vedi [ottimizzazione del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/bundle_optimization.md) e il [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="Posso migrare da `react-i18next` o `react-intl` senza riscrivere i miei componenti?">
+
+Sì, e ci sono due percorsi. Puoi migrare il contenuto progressivamente con la [guida alla migrazione da react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/migration_from_react-i18next_to_intlayer.md) o la [guida alla migrazione da i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/migration_from_i18next_to_intlayer.md). Oppure puoi mantenere interamente la tua API attuale: gli [adattatori di compatibilità](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/compat/index.md) espongono esattamente la stessa API di `react-i18next`, `react-intl` e `i18next`, ma servita dai dizionari Intlayer, quindi cambiano gli import e il codice dei componenti no.
+
+</Question>
+
+<Question title="Posso mantenere i miei file di traduzione JSON esistenti?">
+
+Sì. Il [plugin di sincronizzazione JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md) mantiene i tuoi file `/messages/{locale}/{namespace}.json` come fonte di verità e genera dizionari Intlayer da essi, in entrambe le direzioni. Un [plugin di sincronizzazione PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-po.md) fa lo stesso per i cataloghi gettext, e i [file per locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/per_locale_file.md) ti permettono di dividere il contenuto per lingua invece di raggruppare i locale in un unico file.
+
+</Question>
+
+<Question title="Devo spostare il mio contenuto chiave per chiave?">
+
+No. Esegui `npx intlayer extract` e Intlayer legge i tuoi componenti, estrae le stringhe visibili all'utente e scrive un file `.content` accanto a ciascuno, così puoi rivedere un diff invece di copiare le stringhe in un catalogo una alla volta. Il passo 15 di questa guida lo illustra.
+
+Per una pipeline completamente automatizzata, il [Compilatore Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/compiler.md) fa lo stesso in fase di build: analizza il tuo codice sorgente JSX, TSX, Vue e Svelte ad ogni modifica, genera i dizionari e li mantiene sincronizzati attraverso l'hot module replacement, così non ci sono affatto chiavi da mantenere a mano.
+
+Due limiti vale la pena conoscere prima di attivare il compilatore. Funziona per analisi statica, quindi le stringhe che esistono solo a runtime, come i codici di errore delle API o i campi del CMS, restano fuori portata. E deve distinguere il testo visibile all'utente dalla logica applicativa come `className="active"` o un codice di stato, il che richiede alcune annotazioni in una codebase estesa. Il [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/extract.md) evita entrambi mantenendoti nel ciclo.
+
+</Question>
+
+<Question title="Quali strumenti di editor e agenti AI sono disponibili?">
+
+Cinque componenti, tutti opzionali:
+
+- **[Estensione VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/vs_code_extension.md)**: salta da una chiave `useIntlayer` al file di contenuto che la dichiara, estrai il contenuto da un componente ed esegui build, fill, test, push e pull dalla palette dei comandi o da una scheda Intlayer dedicata.
+- **[Server LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/lsp.md)**: la stessa consapevolezza in qualsiasi editor che parla LSP, con vai alla definizione, trova tutti i riferimenti, anteprime al passaggio del mouse di un valore tradotto, autocompletamento di chiavi e campi, e un avviso quando una chiave non è dichiarata da nessuna parte. Risolve anche le chiamate `i18next`, `react-i18next`, `next-intl` e `use-intl`, il che aiuta durante la migrazione.
+- **[Server MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/mcp_server.md)**: espone la documentazione di Intlayer e la CLI a Cursor, VS Code, Claude Desktop, Claude Code e ChatGPT, così un assistente risponde in base alla documentazione aggiornata invece di tirare a indovinare, e può eseguire da solo comandi come `intlayer fill`.
+- **[Agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/agent_skills.md)**: competenze mirate come `intlayer-config`, `intlayer-cli` e `intlayer-content`, più una per framework, che insegnano a un agente la tua configurazione di routing e i tipi di nodo dei contenuti.
+- **[Plugin ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/eslint.md)**: `no-raw-text` segnala le stringhe hardcoded, con ulteriori regole per le chiavi statiche dei dizionari e i contenuti non utilizzati.
+
+</Question>
+
+<Question title="Intlayer supporta il rendering lato server e il pre-rendering in TanStack Start?">
+
+Sì. Il contenuto si risolve durante l'SSR, e la guida copre la configurazione di pre-render che emette un documento statico per ogni rotta localizzata. Il passo 16 mostra come abilitare `prerender` in `vite.config.ts` e generare una sitemap localizzata dalla stessa tabella delle rotte.
+
+</Question>
+
+<Question title="Come aggiungo i tag hreflang e una sitemap localizzata?">
+
+Usa la funzione integrata `generateSitemap` in una rotta `src/routes/sitemap[.]xml.ts`. A differenza di un semplice elenco di URL, emette il namespace `xhtml:link`, così ogni versione linguistica di una pagina si collega bidirezionalmente alle altre e i motori di ricerca indicizzano quella giusta per ogni pubblico. I metadati `head` localizzati sono trattati nel passo 12.
+
+</Question>
+
+<Question title="Devo mettere la locale nell'URL?">
+
+No. `routing.mode` controlla lo schema dell'URL: `"prefix-no-default"` (il predefinito, `/about` e `/fr/about`), `"prefix-all"` (`/en/about`), `"no-prefix"` (risolto da cookie, header o dominio) o `"search-params"` (`/about?locale=fr`). Le locale possono anche essere associate a domini separati con `routing.domains`. Vedi il [riferimento di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
+
+</Question>
+
+<Question title="Come costruisco un selettore di locale che mantiene la rotta corrente?">
+
+Usa `useLocale` insieme al componente di link localizzato descritto nel passo 9. `useLocale` espone la locale attiva, le locale disponibili e un setter che persiste la scelta, mentre `getLocalizedUrl` riscrive il percorso corrente nella lingua di destinazione così l'utente resta sulla stessa pagina invece di finire sulla home page.
+
+</Question>
+
+<Question title="Come gestisco le pagine 404 sulle rotte localizzate?">
+
+Lo copre il passo 14. `validatePrefix` ti dice se il segmento di locale dell'URL è una locale dichiarata, così `/xx/about` ritorna un vero 404 invece di essere trattato come un percorso. Senza di esso, un prefisso sconosciuto si risolve silenziosamente e i motori di ricerca indicizzano una pagina duplicata.
+
+</Question>
+
+<Question title="Come traduco un'app TanStack Start automaticamente con l'AI?">
+
+Esegui `npx intlayer fill`. La CLI trova le traduzioni mancanti e le riempie con l'LLM di tua scelta, usando il tuo provider e la tua API key. Aggiungi `--git-diff` per tradurre solo i contenuti modificati nel branch corrente, il che mantiene economiche le esecuzioni in CI. Vedi il [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/fill.md) e l'[integrazione CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/CI_CD.md).
+
+</Question>
+
+<Question title="Intlayer supporta plurali, genere e rich text?">
+
+Sì. Le dichiarazioni di contenuto supportano [forme plurali](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/plurial.md), [contenuto basato sul genere](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/gender.md), condizioni, [inserimenti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/insertion.md) e [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/markdown.md) per il testo lungo, con [formattatori](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/formatters.md) per numeri, date e valute.
+
+</Question>
+
+<Question title="Come possono i traduttori modificare il contenuto senza toccare il codice?">
+
+Attraverso l'[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md), che gira sulla tua infrastruttura e permette a chiunque di modificare il testo sul posto nel sito in esecuzione, o il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md), che esternalizza il contenuto così può cambiare senza un deployment.
+
+</Question>
+
+<Question title="Intlayer è gratuito e open source?">
+
+Sì, sotto licenza Apache 2.0, uso commerciale incluso. Il CMS ospitato è un servizio a pagamento opzionale che può anche essere [auto-ospitato](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/self_hosting.md).
+
+</Question>
+
+</FAQ>