@intlayer/docs 5.7.8 → 5.8.0-canary.0

package/docs/it/formatters.md

@@ -0,0 +1,239 @@
+---
+createdAt: 2024-08-13
+updatedAt: 2025-08-20
+title: Formattatori
+description: Utilità di formattazione sensibili alla localizzazione basate su Intl per numeri, percentuali, valuta, date, tempo relativo, unità e notazione compatta. Include un helper Intl con cache.
+keywords:
+  - Formattatori
+  - Intl
+  - Numero
+  - Valuta
+  - Percentuale
+  - Data
+  - Tempo Relativo
+  - Unità
+  - Compatto
+  - Internazionalizzazione
+slugs:
+  - doc
+  - formatters
+---
+
+# Formattatori Intlayer
+
+## Panoramica
+
+Intlayer fornisce un insieme di helper leggeri costruiti sopra le API native `Intl`, oltre a un wrapper `Intl` con cache per evitare di costruire ripetutamente formattatori pesanti. Queste utilità sono completamente sensibili alla localizzazione e possono essere utilizzate dal pacchetto principale `intlayer`.
+
+### Importazione
+
+```ts
+import {
+  Intl,
+  number,
+  percentage,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+} da "intlayer";
+```
+
+Se usi React, sono disponibili anche gli hook; vedi `react-intlayer/format`.
+
+## Intl con cache
+
+L'`Intl` esportato è un sottile wrapper con cache attorno all'`Intl` globale. Memorizza in cache le istanze di `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, evitando di ricostruire ripetutamente lo stesso formattatore.
+
+Poiché la costruzione del formattatore è relativamente costosa, questa cache migliora le prestazioni senza modificare il comportamento. Il wrapper espone la stessa API dell'`Intl` nativo, quindi l'uso è identico.
+
+- La cache è per processo e trasparente per chi chiama.
+
+> Se `Intl.DisplayNames` non è disponibile nell'ambiente, viene stampato un singolo avviso solo per gli sviluppatori (considera un polyfill).
+
+Esempio:
+
+```ts
+import { Intl } from "intlayer";
+
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+```
+
+## Formattatori
+
+Tutti gli helper seguenti sono esportati da `intlayer`.
+
+### `number(value, options?)`
+
+Formatta un valore numerico utilizzando raggruppamenti e decimali sensibili alla localizzazione.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Esempi:
+
+```ts
+import { number } from "intlayer";
+
+number(123456.789); // "123,456.789" (in en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+### `percentage(value, options?)`
+
+Formatta un numero come stringa percentuale.
+
+Comportamento: i valori maggiori di 1 sono interpretati come percentuali intere e normalizzati (es. `25` → `25%`, `0.25` → `25%`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Esempi:
+
+```ts
+import { percentage } from "intlayer";
+
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
+```
+
+### `currency(value, options?)`
+
+Formatta un valore come valuta localizzata. Il default è `USD` con due cifre decimali.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Campi comuni: `currency` (es. `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+Esempi:
+
+```ts
+import { currency } from "intlayer";
+
+currency(1234.5, { currency: "EUR" }); // "€1.234,50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+### `date(date, optionsOrPreset?)`
+
+Formatta un valore data/ora con `Intl.DateTimeFormat`.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` oppure uno dei preset:
+  - Preset: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+Esempi:
+
+```ts
+import { date } from "intlayer";
+
+date(new Date(), "short"); // es., "08/02/25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+### `relativeTime(from, to = new Date(), options?)`
+
+Formatta il tempo relativo tra due istanti con `Intl.RelativeTimeFormat`.
+
+- Passa "now" come primo argomento e il target come secondo per ottenere una formulazione naturale.
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (predefinito `new Date()`)
+- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
+  - L'unità predefinita è `"second"`.
+
+Esempi:
+
+```ts
+import { relativeTime } from "intlayer";
+
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "tra 3 giorni"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 ore fa"
+```
+
+### `units(value, options?)`
+
+Formatta un valore numerico come stringa di unità localizzata utilizzando `Intl.NumberFormat` con `style: 'unit'`.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Campi comuni: `unit` (es. `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+  - Predefiniti: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
+
+Esempi:
+
+```ts
+import { units } from "intlayer";
+
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (dipendente dalla localizzazione)
+```
+
+### `compact(value, options?)`
+
+Formatta un numero usando la notazione compatta (es. `1.2K`, `1M`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (usa internamente `notation: 'compact'`)
+
+Esempi:
+
+```ts
+import { compact } from "intlayer";
+
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+## Note
+
+- Tutti gli helper accettano input di tipo `string`; internamente vengono convertiti in numeri o date.
+- La locale predefinita è quella configurata in `internationalization.defaultLocale` se non specificata.
+- Queste utility sono semplici wrapper; per formattazioni avanzate, passa le opzioni standard di `Intl`.
+
+## Punti di ingresso e re-export (`@index.ts`)
+
+I formatter risiedono nel pacchetto core e sono re-esportati da pacchetti di livello superiore per mantenere gli import ergonomici attraverso i runtime:
+
+Esempi:
+
+```ts
+// Codice dell'app (consigliato)
+import { number, currency, date, Intl } from "intlayer";
+```
+
+### React
+
+Componenti client:
+
+```ts
+import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+// oppure nelle app Next.js
+import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+```
+
+Componenti server (o runtime React Server):
+
+```ts
+import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+// oppure nelle app Next.js
+import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+```
+
+> Questi hook considereranno la locale fornita da `IntlayerProvider` o `IntlayerServerProvider`
+
+## Cronologia della documentazione
+
+| Versione | Data       | Modifiche                             |
+| -------- | ---------- | ------------------------------------- |
+| 5.8.0    | 2025-08-18 | Aggiunta documentazione dei formatter |

package/docs/it/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
+updatedAt: 2025-08-20
 title: Interesse di Intlayer
 description: Scopri i benefici e i vantaggi dell'utilizzo di Intlayer nei tuoi progetti. Comprendi perché Intlayer si distingue tra gli altri framework.
 keywords:
@@ -11,41 +11,104 @@ keywords:
   - Confronto
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer: Un modo su misura per tradurre il tuo sito web
+# Perché dovresti considerare Intlayer?
 
-**Intlayer** è una libreria di internazionalizzazione progettata specificamente per sviluppatori JavaScript. Permette la dichiarazione dei tuoi contenuti ovunque nel codice. Converte la dichiarazione di contenuti multilingue in dizionari strutturati per integrarsi facilmente nel tuo codice. Utilizzando TypeScript, **Intlayer** rende il tuo sviluppo più solido ed efficiente.
+## Cos'è Intlayer?
 
-## Esempio di utilizzo
+**Intlayer** è una libreria di internazionalizzazione progettata specificamente per sviluppatori JavaScript. Permette la dichiarazione del tuo contenuto ovunque nel tuo codice. Converte le dichiarazioni di contenuti multilingue in dizionari strutturati per integrarsi facilmente nel tuo codice. Utilizzando TypeScript, **Intlayer** rende il tuo sviluppo più solido ed efficiente.
+
+## Perché è stato creato Intlayer?
+
+Intlayer è stato creato per risolvere un problema comune che interessa tutte le librerie i18n più diffuse come `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` e `vue-i18n`.
+
+Tutte queste soluzioni adottano un approccio centralizzato per elencare e gestire i tuoi contenuti. Per esempio:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── es.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Oppure qui usando i namespace:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Questo tipo di architettura rallenta il processo di sviluppo e rende la codebase più complessa da mantenere per diversi motivi:
+
+1. **Per ogni nuovo componente creato, dovresti:**
+   - Creare la nuova risorsa/namespace nella cartella `locales`
+   - Ricordarti di importare il nuovo namespace nella tua pagina
+   - Tradurre i tuoi contenuti (spesso fatto manualmente tramite copia/incolla da fornitori AI)
+
+2. **Per ogni modifica apportata ai tuoi componenti, dovresti:**
+   - Cercare la risorsa/namespace correlata (lontano dal componente)
+   - Tradurre i tuoi contenuti
+   - Assicurarti che i tuoi contenuti siano aggiornati per ogni locale
+   - Verificare che il tuo namespace non includa chiavi/valori inutilizzati
+   - Assicurarti che la struttura dei tuoi file JSON sia la stessa per tutti i locali
+
+Nei progetti professionali che utilizzano queste soluzioni, spesso si ricorre a piattaforme di localizzazione per aiutare a gestire la traduzione dei contenuti. Tuttavia, questo può diventare rapidamente costoso per progetti di grandi dimensioni.
+
+Per risolvere questo problema, Intlayer adotta un approccio che delimita i contenuti per componente e mantiene i contenuti vicini al componente stesso, come spesso facciamo con il CSS (`styled-components`), i tipi, la documentazione (`storybook`) o i test unitari (`jest`).
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,18 +125,17 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
-// Dizionario di esempio per il componente
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -81,18 +143,18 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-// Dizionario di esempio per il componente
+// Dizionario dei contenuti tradotti per il componente
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -100,7 +162,7 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
 export const ComponentExample = () => {
@@ -110,7 +172,7 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
 const ComponentExample = () => {
@@ -120,7 +182,7 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
 const ComponentExample = () => {
@@ -130,27 +192,79 @@ const ComponentExample = () => {
 };
 ```
 
-## Perché scegliere Intlayer?
-
-| Funzionalità                              | Descrizione                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Gestione dei Contenuti con JavaScript** | Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente.                                                                                                                                                                                                                                                                                                                                                                             |
-| **Ambiente Type-Safe**                    | Sfrutta TypeScript per garantire che tutte le tue definizioni di contenuto siano precise e prive di errori.                                                                                                                                                                                                                                                                                                                                                                   |
-| **File di Contenuto Integrati**           | Mantieni le tue traduzioni vicine ai rispettivi componenti, migliorando la manutenibilità e la chiarezza.                                                                                                                                                                                                                                                                                                                                                                     |
-| **Configurazione Semplificata**           | Avvia rapidamente con una configurazione minima, ottimizzata specialmente per progetti Next.js.                                                                                                                                                                                                                                                                                                                                                                               |
-| **Supporto per Componenti Server**        | Perfettamente adatto per i componenti server di Next.js, garantendo un rendering lato server fluido.                                                                                                                                                                                                                                                                                                                                                                          |
-| **Routing migliorato**                    | Supporto completo per il routing delle app Next.js, adattandosi perfettamente a strutture applicative complesse.                                                                                                                                                                                                                                                                                                                                                              |
-| **Codice Organizzato**                    | Mantieni il tuo codice più organizzato: 1 componente = 1 dizionario nella stessa cartella.                                                                                                                                                                                                                                                                                                                                                                                    |
-| **Traduzione automatica CI**              | Compila automaticamente le tue traduzioni nella CI utilizzando la tua chiave API OpenAI, eliminando la necessità di una piattaforma L10n.                                                                                                                                                                                                                                                                                                                                     |
-| **Integrazione Server MCP**               | Fornisce un server MCP (Model Context Protocol) per l'automazione IDE, consentendo una gestione dei contenuti e flussi di lavoro i18n senza interruzioni direttamente all'interno del tuo ambiente di sviluppo. [Scopri di più](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/mcp_server.md).                                                                                                                                                                 |
-| **Supporto Markdown**                     | Importa e interpreta file markdown per contenuti multilingue come le politiche sulla privacy.                                                                                                                                                                                                                                                                                                                                                                                 |
-| **Editor Visivo Gratuito & CMS**          | Un editor visivo gratuito e un CMS sono disponibili se hai bisogno di lavorare con i redattori di contenuti per le tue traduzioni, eliminando nuovamente la necessità di una piattaforma di localizzazione e permettendo l'esternalizzazione dei contenuti dal codice.                                                                                                                                                                                                        |
-| **Recupero Contenuti Semplificato**       | Non è necessario chiamare la funzione `t` per ogni contenuto; recupera tutti i tuoi contenuti direttamente utilizzando un singolo hook.                                                                                                                                                                                                                                                                                                                                       |
-| **Implementazione Coerente**              | La stessa implementazione sia per i componenti client che server, senza bisogno di passare la funzione `t` attraverso ogni componente server.                                                                                                                                                                                                                                                                                                                                 |
-| **Contenuto Tree-shakable**               | Il contenuto è tree-shakable, il che alleggerisce il bundle finale.                                                                                                                                                                                                                                                                                                                                                                                                           |
-| **Rendering Statico Non Bloccante**       | Intlayer non blocca il Rendering Statico come fa `next-intl`.                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| **Interoperabilità**                      | Consente l'interoperabilità con [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_next-intl.md), e [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_react-intl.md). |
-
-## Cronologia del Documento
-
-- 5.5.10 - 2025-06-29: Inizio cronologia
+Questo approccio ti permette di:
+
+1. **Aumentare la velocità di sviluppo**
+   - I file `.content.{{ts|mjs|cjs|json}}` possono essere creati utilizzando un'estensione di VSCode
+   - Gli strumenti di completamento automatico basati su AI nel tuo IDE (come GitHub Copilot) possono aiutarti a dichiarare il tuo contenuto, riducendo il copia/incolla
+
+2. **Ridurre la complessità della tua codebase**
+
+3. **Aumentare la manutenibilità della tua codebase**
+
+4. **Duplicare i tuoi componenti e i loro contenuti correlati più facilmente (esempio: componenti di login/registrazione, ecc.)**
+   - Limitando il rischio di impattare il contenuto di altri componenti
+   - Copiando/incollando il tuo contenuto da un'applicazione all'altra senza dipendenze esterne
+
+5. **Evitare di inquinare la tua codebase con chiavi/valori inutilizzati per componenti non usati**
+   - Se non usi un componente, non devi importarne il contenuto
+   - Se elimini un componente, ti sarà più facile ricordarti di rimuovere il suo contenuto correlato poiché sarà presente nella stessa cartella
+
+6. **Ridurre il costo di ragionamento per gli agenti AI nella dichiarazione del tuo contenuto multilingue**
+   - L'agente AI non dovrà scansionare l'intera codebase per sapere dove implementare il tuo contenuto
+   - Le traduzioni possono essere facilmente effettuate dagli strumenti di completamento automatico basati su AI nel tuo IDE (come GitHub Copilot)
+
+7. **Ottimizzare le prestazioni di caricamento**
+   - Se un componente viene caricato in modo lazy, il suo contenuto correlato sarà caricato contemporaneamente
+
+## Funzionalità aggiuntive di Intlayer
+
+| Funzionalità                                                                                                                   | Descrizione                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Supporto Cross-Framework**<br><br>Intlayer è compatibile con tutti i principali framework e librerie, inclusi Next.js, React, Vite, Vue.js, Nuxt, Preact, Express e altri ancora.                                                                                                                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)            | **Gestione dei Contenuti con JavaScript**<br><br>Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente. <br><br> - [Dichiarazione dei contenuti](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                      |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **File di Dichiarazione del Contenuto per Locale**<br><br>Accelera il tuo sviluppo dichiarando il contenuto una sola volta, prima della generazione automatica.<br><br> - [File di Dichiarazione del Contenuto per Locale](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                           | **Ambiente Type-Safe**<br><br>Sfrutta TypeScript per garantire che le tue definizioni di contenuto e il codice siano privi di errori, beneficiando anche dell'autocompletamento nell'IDE.<br><br> - [Configurazione di TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                               |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Configurazione Semplificata**<br><br>Inizia rapidamente con una configurazione minima. Regola facilmente le impostazioni per l'internazionalizzazione, il routing, l'IA, la build e la gestione dei contenuti.<br><br> - [Esplora l'integrazione con Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                        | **Recupero Contenuti Semplificato**<br><br>Non è necessario chiamare la tua funzione `t` per ogni singolo contenuto. Recupera tutto il tuo contenuto direttamente usando un singolo hook.<br><br> - [Integrazione React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                            |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implementazione Coerente dei Componenti Server**<br><br>Perfettamente adatto per i componenti server di Next.js, utilizza la stessa implementazione sia per i componenti client che per quelli server, senza bisogno di passare la tua funzione `t` attraverso ogni componente server. <br><br> - [Componenti Server](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                                | **Codebase Organizzato**<br><br>Tieni il tuo codice più organizzato: 1 componente = 1 dizionario nella stessa cartella. Le traduzioni vicine ai rispettivi componenti migliorano la manutenibilità e la chiarezza. <br><br> - [Come funziona Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Routing Avanzato**<br><br>Pieno supporto al routing dell'app, adattandosi perfettamente a strutture applicative complesse, per Next.js, React, Vite, Vue.js, ecc.<br><br> - [Esplora l'integrazione con Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                                 | **Supporto Markdown**<br><br>Importa e interpreta file di localizzazione e Markdown remoto per contenuti multilingue come politiche sulla privacy, documentazione, ecc. Interpreta e rendi accessibili i metadati Markdown nel tuo codice.<br><br> - [File di contenuto](https://intlayer.org/doc/concept/content/file)                                                                                                                                    |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Editor Visivo e CMS Gratuiti**<br><br>Un editor visivo gratuito e un CMS sono disponibili per i content writer, eliminando la necessità di una piattaforma di localizzazione. Mantieni il tuo contenuto sincronizzato usando Git, oppure esternalizzalo totalmente o parzialmente con il CMS.<br><br> - [Editor Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                                   | **Contenuto Tree-shakable**<br><br>Contenuto tree-shakable, che riduce la dimensione del bundle finale. Carica il contenuto per componente, escludendo qualsiasi contenuto non utilizzato dal tuo bundle. Supporta il lazy loading per migliorare l'efficienza del caricamento dell'app. <br><br> - [Ottimizzazione della build dell'app](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                      |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Rendering Statico**<br><br>Non blocca il Rendering Statico. <br><br> - [Integrazione Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                           | **Traduzione Potenziata dall'IA**<br><br>Trasforma il tuo sito web in 231 lingue con un solo clic utilizzando gli avanzati strumenti di traduzione potenziati dall'IA di Intlayer, sfruttando il tuo provider IA/chiave API personale. <br><br> - [Integrazione CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI di Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Compilazione automatica](https://intlayer.org/doc/concept/auto-fill) |
+| ![Funzionalità](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Integrazione Server MCP**<br><br>Fornisce un server MCP (Model Context Protocol) per l'automazione dell'IDE, consentendo una gestione dei contenuti e flussi di lavoro i18n senza interruzioni direttamente all'interno del tuo ambiente di sviluppo. <br><br> - [Server MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/mcp_server.md)                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                         | **Estensione VSCode**<br><br>Intlayer fornisce un'estensione per VSCode per aiutarti a gestire i tuoi contenuti e traduzioni, costruire i tuoi dizionari, tradurre i tuoi contenuti e altro ancora. <br><br> - [Estensione VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                         | **Interoperabilità**<br><br>Consente l'interoperabilità con react-i18next, next-i18next, next-intl e react-intl. <br><br> - [Intlayer e react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer e next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer e next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                                            |
+
+## Confronto di Intlayer con altre soluzioni
+
+| Funzionalità                                                 | Intlayer                                                                                                                                    | React-i18next / i18next                                                     | React-Intl (FormatJS)                                          | LinguiJS                                                       | next-intl                                                      | next-i18next                                                   | vue-i18n                                                                  |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| **Traduzioni Vicino ai Componenti**                          | Sì, contenuto collocato con ogni componente                                                                                                 | No                                                                          | No                                                             | No                                                             | No                                                             | No                                                             | Sì - usando `Single File Components` (SFCs)                               |
+| **Integrazione TypeScript**                                  | Avanzata, tipi rigorosi generati automaticamente                                                                                            | Base; configurazione extra per sicurezza                                    | Buona, ma meno rigorosa                                        | Tipizzazioni, necessita configurazione                         | Buona                                                          | Base                                                           | Buona (tipi disponibili; sicurezza delle chiavi necessita configurazione) |
+| **Rilevamento Traduzioni Mancanti**                          | Errore/avviso in fase di compilazione                                                                                                       | Principalmente stringhe di fallback a runtime                               | Stringhe di fallback                                           | Richiede configurazione aggiuntiva                             | Fallback a runtime                                             | Fallback a runtime                                             | Fallback/avvisi a runtime (configurabile)                                 |
+| **Contenuti Ricchi (JSX/Markdown/componenti)**               | Supporto diretto, anche per nodi React                                                                                                      | Limitato / solo interpolazione                                              | Sintassi ICU, non vero JSX                                     | Limitato                                                       | Non progettato per nodi ricchi                                 | Limitato                                                       | Limitato (componenti tramite `<i18n-t>`, Markdown tramite plugin)         |
+| **Traduzione basata su AI**                                  | Sì, supporta più provider AI. Utilizzabile con le proprie chiavi API. Considera il contesto della tua applicazione e l'ambito del contenuto | No                                                                          | No                                                             | No                                                             | No                                                             | No                                                             | No                                                                        |
+| **Editor Visivo**                                            | Sì, Editor Visivo locale + CMS opzionale; può esternalizzare il contenuto del codice; integrabile                                           | No / disponibile tramite piattaforme di localizzazione esterne              | No / disponibile tramite piattaforme di localizzazione esterne | No / disponibile tramite piattaforme di localizzazione esterne | No / disponibile tramite piattaforme di localizzazione esterne | No / disponibile tramite piattaforme di localizzazione esterne | No / disponibile tramite piattaforme di localizzazione esterne            |
+| **Routing Localizzato**                                      | Integrato, supporto middleware                                                                                                              | Plugin o configurazione manuale                                             | Non integrato                                                  | Plugin/configurazione manuale                                  | Integrato                                                      | Integrato                                                      | Manuale tramite Vue Router (gestito da Nuxt i18n)                         |
+| **Generazione Dinamica delle Rotte**                         | Sì                                                                                                                                          | Plugin/ecosistema o configurazione manuale                                  | Non fornito                                                    | Plugin/manuale                                                 | Sì                                                             | Sì                                                             | Non fornito (fornito da Nuxt i18n)                                        |
+| **Pluralizzazione**                                          | Modelli basati su enumerazione; vedere la documentazione                                                                                    | Configurabile (plugin come i18next-icu)                                     | Avanzato (ICU)                                                 | Avanzato (ICU/messageformat)                                   | Buono                                                          | Buono                                                          | Avanzato (regole di plurale integrate)                                    |
+| **Formattazione (date, numeri, valute)**                     | Formatter ottimizzati (Intl sotto il cofano)                                                                                                | Tramite plugin o uso personalizzato di Intl                                 | Formatter ICU avanzati                                         | Helper ICU/CLI                                                 | Buono (helper Intl)                                            | Buono (helper Intl)                                            | Formatter integrati per date/numeri (Intl)                                |
+| **Formato del Contenuto**                                    | .tsx, .ts, .js, .json, .md, .txt                                                                                                            | .json                                                                       | .json, .js                                                     | .po, .json                                                     | .json, .js, .ts                                                | .json                                                          | .json, .js                                                                |
+| **Supporto ICU**                                             | In lavorazione (ICU nativo)                                                                                                                 | Tramite plugin (i18next-icu)                                                | Sì                                                             | Sì                                                             | Sì                                                             | Tramite plugin (i18next-icu)                                   | Tramite formatter/compiler personalizzato                                 |
+| **Helper SEO (hreflang, sitemap)**                           | Strumenti integrati: helper per sitemap, **robots.txt**, metadata                                                                           | Plugin della community/manuale                                              | Non core                                                       | Non core                                                       | Buono                                                          | Buono                                                          | Non core (Nuxt i18n fornisce helper)                                      |
+| **Ecosistema / Comunità**                                    | Più piccolo ma in rapida crescita e reattivo                                                                                                | Il più grande e maturo                                                      | Grande, enterprise                                             | In crescita, più piccolo                                       | Di medie dimensioni, focalizzato su Next.js                    | Di medie dimensioni, focalizzato su Next.js                    | Grande nell'ecosistema Vue                                                |
+| **Rendering lato server e Componenti Server**                | Sì, ottimizzato per SSR / Componenti Server di React                                                                                        | Supportato, necessita di qualche configurazione                             | Supportato in Next.js                                          | Supportato                                                     | Supporto completo                                              | Supporto completo                                              | SSR tramite Nuxt/Vue SSR (senza RSC)                                      |
+| **Tree-shaking (caricamento solo del contenuto utilizzato)** | Sì, per componente al momento della build tramite plugin Babel/SWC                                                                          | Di solito carica tutto (può essere migliorato con namespace/code-splitting) | Di solito carica tutto                                         | Non di default                                                 | Parziale                                                       | Parziale                                                       | Parziale (con code-splitting/configurazione manuale)                      |
+| **Caricamento lazy**                                         | Sì, per locale/per componente                                                                                                               | Sì (es. backend/namespace su richiesta)                                     | Sì (bundle di locale suddivisi)                                | Sì (import dinamico del catalogo)                              | Sì (per rotta/per locale)                                      | Sì (per rotta/per locale)                                      | Sì (messaggi di locale asincroni)                                         |
+| **Gestione di Grandi Progetti**                              | Incoraggia la modularità, adatto per design-system                                                                                          | Richiede una buona disciplina dei file                                      | I cataloghi centrali possono diventare grandi                  | Può diventare complesso                                        | Modulare con configurazione                                    | Modulare con configurazione                                    | Modulare con configurazione Vue Router/Nuxt i18n                          |
+
+## Storia del Documento
+
+| Versione | Data       | Modifiche                         |
+| -------- | ---------- | --------------------------------- |
+| 5.8.0    | 2025-08-19 | Aggiornamento tabella comparativa |
+| 5.5.10   | 2025-06-29 | Inizializzazione della storia     |

package/docs/it/introduction.md

@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -63,8 +63,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -82,8 +82,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };