@intlayer/docs 5.7.8 → 5.8.0

package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md

@@ -1,14 +1,14 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-06-29
-title: react-i18n vs react-intl vs Intlayer
+title: react-i18next vs react-intl vs Intlayer
 description: Integra react-i18next con next-intl e Intlayer per l'internazionalizzazione (i18n) di un'app React
 keywords:
   - next-intl
   - react-i18next
   - Intlayer
   - Internazionalizzazione
-  - Blogumentazione
+  - Blog
   - Next.js
   - JavaScript
   - React
@@ -17,178 +17,137 @@ slugs:
   - react-i18next-vs-react-intl-vs-intlayer
 ---
 
-# React-Intl VS React-i18next VS Intlayer | Internazionalizzazione React (i18n)
+# react-Intl VS react-i18next VS intlayer | Internazionalizzazione (i18n) in React
 
-Di seguito è presentato un confronto conciso di tre popolari librerie i18n (internazionalizzazione) per React: **React-Intl**, **React-i18next** e **Intlayer**. Ogni libreria offre funzionalità uniche e flussi di lavoro per integrare il supporto multilingue nella tua applicazione React. Dopo aver letto questo, dovresti essere in grado di decidere quale soluzione soddisfa meglio le tue esigenze.
+Questa guida confronta tre opzioni consolidate per l'i18n in **React**: **react-intl** (FormatJS), **react-i18next** (i18next) e **Intlayer**.
+Ci concentriamo su applicazioni **React plain** (ad esempio, Vite, CRA, SPA). Se usi Next.js, consulta il nostro confronto dedicato a Next.js.
 
----
-
-## 1. Introduzione
-
-L'internazionalizzazione (i18n) nelle applicazioni React può essere realizzata in diversi modi. Le tre librerie presentate qui hanno filosofie di design diverse, set di funzionalità e supporto della comunità:
+Valutiamo:
 
-1. **React-Intl**
-2. **React-i18next**
-3. **Intlayer**
+- Architettura e organizzazione dei contenuti
+- TypeScript e sicurezza
+- Gestione delle traduzioni mancanti
+- Contenuti ricchi e capacità di formattazione
+- Prestazioni e comportamento di caricamento
+- Esperienza sviluppatore (DX), strumenti e manutenzione
+- SEO/routing (dipendente dal framework)
 
-Di seguito, troverai una panoramica di ciascuna soluzione, seguita da un confronto delle funzionalità, vantaggi e svantaggi, e casi d'uso esemplificativi.
+> **tl;dr**: Tutti e tre possono localizzare un'app React. Se desideri **contenuti a livello di componente**, **tipi TypeScript rigorosi**, **controlli delle chiavi mancanti in fase di build**, **dizionari ottimizzati con tree-shaking** e strumenti editoriali integrati (Visual Editor/CMS + traduzione AI opzionale), **Intlayer** è la scelta più completa per codebase React modulari.
 
 ---
 
-## 2. React-Intl
-
-### Panoramica
-
-[**React-Intl**](https://formatjs.io/docs/react-intl/) è parte della suite [FormatJS](https://formatjs.io/). Fornisce un potente set di **API e componenti** per gestire la formattazione dei messaggi, la pluralizzazione, la data/ora e la formattazione dei numeri. React-Intl è ampiamente utilizzato nelle applicazioni aziendali, principalmente perché fa parte di un ecosistema che standardizza la sintassi e la formattazione dei messaggi.
-
-### Caratteristiche Chiave
-
-- **Sintassi del Messaggio ICU**: Offre una sintassi completa per l'interpolazione dei messaggi, la pluralizzazione e altro.
-- **Formattazione Localizzata**: Utilità integrate per formattare date, ore, numeri e tempi relativi in base alla lingua.
-- **Componenti Dichiarativi**: Espone `<FormattedMessage>`, `<FormattedNumber>`, `<FormattedDate>`, ecc., per un utilizzo senza soluzione di continuità in JSX.
-- **Ecosistema Ricco**: Si integra bene con gli strumenti FormatJS (ad es., [babel-plugin-react-intl](https://formatjs.io/docs/tooling/babel-plugin/)) per estrarre, gestire e compilare messaggi.
-
-### Flusso di Lavoro Tipico
-
-1. **Definisci cataloghi di messaggi** (solitamente file JSON per ogni lingua).
-2. **Avvolgi la tua app** in `<IntlProvider locale="it" messages={messages}>`.
-3. **Usa** `<FormattedMessage id="myMessage" defaultMessage="Ciao mondo" />` o il hook `useIntl()` per accedere alle stringhe di traduzione.
-
-### Vantaggi
-
-- Ben consolidato e utilizzato in molti ambienti di produzione.
-- Formattazione di messaggi avanzata, inclusa pluralizzazione, genere, fusi orari e altro.
-- Supporto forte per gli strumenti per l'estrazione e la compilazione dei messaggi.
-
-### Svantaggi
+## Posizionamento ad alto livello
 
-- Richiede familiarità con il **formato dei messaggi ICU**, che può essere verboso.
-- Non è così semplice gestire traduzioni dinamiche o complesse che sono più di semplici stringhe.
+- **react-intl** - Formattazione basata su ICU e allineata agli standard (date/numeri/plurali) con un'API matura. I cataloghi sono tipicamente centralizzati; la sicurezza delle chiavi e la validazione in fase di build dipendono in gran parte da te.
+- **react-i18next** - Estremamente popolare e flessibile; namespaces, rilevatori e molti plugin (ICU, backend). Potente, ma la configurazione può espandersi man mano che i progetti crescono.
+- **Intlayer** - Modello di contenuto incentrato sul componente per React, **tipizzazione TS rigorosa**, **controlli in fase di build**, **tree-shaking**, oltre a **Visual Editor/CMS** e **traduzioni assistite da AI**. Funziona con React Router, Vite, CRA, ecc.
 
 ---
 
-## 3. React-i18next
+## Matrice delle funzionalità (focus su React)
+
+| Funzionalità                                            | `react-intlayer` (Intlayer)                                                                                                                    | `react-i18next` (i18next)                                                                                                        | `react-intl` (FormatJS)                                                                                        |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| **Traduzioni Vicino ai Componenti**                     | ✅ Sì, contenuto collocato con ogni componente                                                                                                 | ❌ No                                                                                                                            | ❌ No                                                                                                          |
+| **Integrazione TypeScript**                             | ✅ Avanzata, tipi rigorosi generati automaticamente                                                                                            | ⚠️ Base; configurazione extra per sicurezza                                                                                      | ✅ Buona, ma meno rigorosa                                                                                     |
+| **Rilevamento Traduzioni Mancanti**                     | ✅ Evidenziazione errori TypeScript e errori/avvisi in fase di compilazione                                                                    | ⚠️ Principalmente stringhe di fallback a runtime                                                                                 | ⚠️ Stringhe di fallback                                                                                        |
+| **Contenuto Ricco (JSX/Markdown/componenti)**           | ✅ Supporto diretto                                                                                                                            | ⚠️ Limitato / solo interpolazione                                                                                                | ⚠️ Sintassi ICU, non vero JSX                                                                                  |
+| **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                                                                                                          |
+| **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                                              |
+| **Routing Localizzato**                                 | ✅ Sì, supporta percorsi localizzati out of the box (funziona con Next.js e Vite)                                                              | ⚠️ Non integrato, richiede plugin (es. `next-i18next`) o configurazione personalizzata del router                                | ❌ No, solo formattazione dei messaggi, il routing deve essere manuale                                         |
+| **Generazione Dinamica delle Rotte**                    | ✅ Sì                                                                                                                                          | ⚠️ Plugin/ecosistema o configurazione manuale                                                                                    | ❌ Non fornito                                                                                                 |
+| **Pluralizzazione**                                     | ✅ Modelli basati su enumerazioni                                                                                                              | ✅ Configurabile (plugin come i18next-icu)                                                                                       | ✅ (ICU)                                                                                                       |
+| **Formattazione (date, numeri, valute)**                | ✅ Formatter ottimizzati (Intl sotto il cofano)                                                                                                | ⚠️ Tramite plugin o utilizzo personalizzato di Intl                                                                              | ✅ Formatter ICU                                                                                               |
+| **Formato del contenuto**                               | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                               | ⚠️ .json                                                                                                                         | ✅ .json, .js                                                                                                  |
+| **Supporto ICU**                                        | ⚠️ In lavorazione                                                                                                                              | ⚠️ Tramite plugin (i18next-icu)                                                                                                  | ✅ Sì                                                                                                          |
+| **SEO Helpers (hreflang, sitemap)**                     | ✅ Strumenti integrati: helper per sitemap, robots.txt, metadata                                                                               | ⚠️ Plugin della community/manuale                                                                                                | ❌ Non incluso nel core                                                                                        |
+| **Ecosistema / Community**                              | ⚠️ Più piccolo ma in rapida crescita e reattivo                                                                                                | ✅ Il più grande e maturo                                                                                                        | ✅ Grande                                                                                                      |
+| **Rendering lato server e Componenti Server**           | ✅ Sì, ottimizzato per SSR / Componenti Server React                                                                                           | ⚠️ Supportato a livello di pagina ma è necessario passare le funzioni t sull'albero dei componenti per i componenti server figli | ❌ Non supportato, è necessario passare le funzioni t sull'albero dei componenti per i componenti server figli |
+| **Tree-shaking (caricamento solo del contenuto usato)** | ✅ Sì, per componente al momento della build tramite plugin Babel/SWC                                                                          | ⚠️ Di solito carica tutto (può essere migliorato con namespace/suddivisione del codice)                                          | ⚠️ Di solito carica tutto                                                                                      |
+| **Lazy loading**                                        | ✅ Sì, per locale / per dizionario                                                                                                             | ✅ Sì (ad esempio, backend/namespace su richiesta)                                                                               | ✅ Sì (bundle di locale suddivisi)                                                                             |
+| **Rimozione del contenuto non utilizzato**              | ✅ Sì, per dizionario al momento della build                                                                                                   | ❌ No, solo tramite segmentazione manuale dei namespace                                                                          | ❌ No, tutti i messaggi dichiarati sono inclusi nel bundle                                                     |
+| **Gestione di Grandi Progetti**                         | ✅ Favorisce la modularità, adatto per sistemi di design                                                                                       | ⚠️ Richiede una buona disciplina nella gestione dei file                                                                         | ⚠️ I cataloghi centrali possono diventare molto grandi                                                         |
 
-### Panoramica
-
-[**React-i18next**](https://react.i18next.com/) è un'estensione React di [i18next](https://www.i18next.com/), uno dei framework i18n JavaScript più popolari. Offre **caratteristiche estensive** per traduzioni a runtime, caricamento lazy e rilevamento della lingua, rendendolo estremamente flessibile per una vasta gamma di casi d'uso.
-
-### Caratteristiche Chiave
-
-- **Struttura di Traduzione Flessibile**: Non legato a un formato singolo come ICU. Puoi memorizzare traduzioni in JSON, utilizzare l'interpolazione, la pluralizzazione, ecc.
-- **Cambio Lingua Dinamico**: Plugin di rilevamento lingua integrati e aggiornamenti a runtime.
-- **Traduzioni Annidate e Strutturate**: Puoi annidare facilmente le traduzioni all'interno del JSON.
-- **Ecosistema di Plugin Estensivo**: Per rilevamento (browser, percorso, sottodominio, ecc.), caricamento delle risorse, caching e altro.
-
-### Flusso di Lavoro Tipico
-
-1. **Installa `i18next` & `react-i18next`.**
-2. **Configura i18n** per caricare traduzioni (JSON) e impostare il rilevamento o il fallback della lingua.
-3. **Avvolgi la tua app** in `I18nextProvider`.
-4. **Usa il hook `useTranslation()`** o il componente `<Trans>` per visualizzare le traduzioni.
+---
 
-### Vantaggi
+## Confronto Approfondito
 
-- Altamente **flessibile** e ricco di funzionalità.
-- Comunità molto attiva e grande ecosistema di plugin.
-- Facilità di **caricamento dinamico** delle traduzioni (ad es., da un server, su richiesta).
+### 1) Architettura e scalabilità
 
-### Svantaggi
+- **react-intl / react-i18next**: La maggior parte delle configurazioni mantiene **cartelle di locale centralizzate** per lingua, a volte suddivise in **namespace** (i18next). Funziona bene all'inizio ma diventa una superficie condivisa man mano che le app crescono.
+- **Intlayer**: Promuove **dizionari per componente (o per funzionalità)** **collocati insieme** all'interfaccia utente che servono. Questo mantiene chiara la proprietà, facilita la duplicazione/migrazione dei componenti e riduce il turnover delle chiavi tra i team. Il contenuto non utilizzato è più facile da identificare e rimuovere.
 
-- **La configurazione può essere verbosa**, specialmente se hai necessità più avanzate.
-- Se preferisci traduzioni fortemente tipizzate, potresti aver bisogno di configurazioni TypeScript aggiuntive.
+**Perché è importante:** Il contenuto modulare rispecchia l'interfaccia utente modulare. I grandi codebase React rimangono più puliti quando le traduzioni vivono con i componenti a cui appartengono.
 
 ---
 
-## 4. Intlayer
+### 2) TypeScript e sicurezza
 
-### Panoramica
+- **react-intl**: Tipizzazioni solide, ma **nessuna tipizzazione automatica delle chiavi**; devi applicare tu stesso i pattern di sicurezza.
+- **react-i18next**: Tipizzazioni forti per gli hook; la **tipizzazione rigorosa delle chiavi** richiede tipicamente configurazioni extra o generatori.
+- **Intlayer**: **Genera automaticamente tipi rigorosi** dal tuo contenuto. L'autocompletamento dell'IDE e gli **errori a tempo di compilazione** individuano errori di battitura e chiavi mancanti prima dell'esecuzione.
 
-[**Intlayer**](https://github.com/aymericzip/intlayer) è una libreria i18n open-source più recente focalizzata su **dichiarazioni di contenuto a livello di componente**, sicurezza dei tipi e **routing dinamico**. È progettata per flussi di lavoro React moderni, supportando sia **Create React App** che configurazioni **Vite**. Include anche funzionalità avanzate come **routing basato sulla lingua** e **tipi TypeScript auto-generati** per le traduzioni.
+**Perché è importante:** Spostare i fallimenti **a sinistra** (alla fase di build/CI) riduce i problemi in produzione e accelera i cicli di feedback per gli sviluppatori.
 
-### Caratteristiche Chiave
+---
 
-- **File di Contenuto Dichiarativi**: Ogni componente o modulo può dichiarare le proprie traduzioni in file dedicati `.content.tsx` o `.content.json`, mantenendo il contenuto vicino a dove viene utilizzato.
-- **Routing & Middleware Integrati**: Moduli opzionali per routing localizzati (ad es., `/it/about`, `/fr/about`) e middleware server per rilevare la lingua dell'utente.
-- **Tipi TypeScript Auto-generati**: Garantisce sicurezza dei tipi con funzionalità come completamento automatico e rilevamento degli errori a tempo di compilazione.
-- **Traduzioni Dinamiche e Ricche**: Può includere JSX/TSX nelle traduzioni per casi d'uso più complessi (ad es., link, testo in grassetto, icone nelle traduzioni).
+### 3) Gestione delle traduzioni mancanti
 
-### Flusso di Lavoro Tipico
+- **react-intl / react-i18next**: Di default usano **fallback a runtime** (eco della chiave o lingua predefinita). Puoi aggiungere linting/plugin, ma non è garantito durante la build.
+- **Intlayer**: **Rilevamento a tempo di build** con avvisi o errori quando mancano lingue/chiavi richieste.
 
-1. **Installa `intlayer` e `react-intlayer`.**
-2. **Crea `intlayer.config.ts`** per definire le lingue disponibili e la lingua predefinita.
-3. **Usa la CLI di Intlayer** o un plugin per **trasformare** le dichiarazioni di contenuto.
-4. **Avvolgi la tua app** in `<IntlayerProvider>` e recupera il contenuto con `useIntlayer("keyName")`.
+**Perché è importante:** Il fallimento della CI su stringhe mancanti previene la “misteriosa” presenza di inglese nelle interfacce non inglesi.
 
-### Vantaggi
+---
 
-- **Amichevole con TypeScript** con generazione di tipi integrata e rilevamento degli errori.
-- **Contenuto ricco** possibile (ad es., passando nodi React come traduzioni).
-- **Routing Localizzato** pronto all'uso.
-- Integrato con strumenti di build popolari (CRA, Vite) per una facile configurazione.
+### 4) Contenuti ricchi e formattazione
 
-### Svantaggi
+- **react-intl**: Eccellente supporto **ICU** per plurali, selezioni, date/numeri e composizione dei messaggi. JSX può essere usato, ma il modello mentale rimane incentrato sul messaggio.
+- **react-i18next**: Interpolazione flessibile e **`<Trans>`** per incorporare elementi/componenti; ICU disponibile tramite plugin.
+- **Intlayer**: I file di contenuto possono includere **nodi ricchi** (JSX/Markdown/componenti) e **metadati**. La formattazione utilizza Intl sotto il cofano; i modelli di plurale sono ergonomici.
 
-- Ancora **relativamente nuova** rispetto a React-Intl o React-i18next.
-- Maggiore attenzione a un approccio di "dichiarazione di contenuto a livello di componente", potrebbe rappresentare un cambiamento rispetto ai tipici cataloghi .json.
-- Ecosistema e comunità più piccoli rispetto alle librerie più consolidate.
+**Perché è importante:** I testi UI complessi (link, parti in grassetto, componenti inline) sono più facili da gestire quando la libreria supporta chiaramente i nodi React.
 
 ---
 
-## 5. Confronto delle Caratteristiche
+### 5) Prestazioni e comportamento di caricamento
+
+- **react-intl / react-i18next**: Di solito gestisci manualmente la **divisione dei cataloghi** e il **caricamento lazy** (namespace/import dinamici). Efficace ma richiede disciplina.
+- **Intlayer**: Esegue il **tree-shaking** dei dizionari non utilizzati e supporta il **caricamento lazy per dizionario/per locale** out-of-the-box.
 
-| **Caratteristica**                  | **React-Intl**                                                                      | **React-i18next**                                                                                                                | **Intlayer**                                                                                                                                     |
-| ----------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Caso d'uso principale**           | Traduzioni basate su stringhe, formattazione di date/numero, sintassi messaggio ICU | i18n completo con facile cambio dinamico, annidamento, ecosistema di plugin                                                      | Traduzioni tipizzate con focus su contenuti dichiarativi, routing localizzato & middleware server opzionale                                      |
-| **Approccio**                       | Utilizza `<IntlProvider>` & componenti di messaggio FormatJS                        | Utilizza `I18nextProvider` & il hook `useTranslation()`                                                                          | Utilizza `<IntlayerProvider>` & il hook `useIntlayer()` con dichiarazioni di contenuto                                                           |
-| **Formato di Localizzazione**       | Stringhe basate su ICU (cataloghi JSON o JavaScript)                                | File risorsa JSON (o caricamenti personalizzati). Formato ICU opzionale tramite plugin i18next                                   | Dichiarazioni `.content.[ts/js/tsx]` o JSON; possono contenere stringhe o componenti React                                                       |
-| **Routing**                         | Gestito esternamente (nessun routing localizzato integrato)                         | Gestito esternamente con plugin i18next (rilevamento percorso, sottodominio, ecc.)                                               | Supporto per routing localizzato integrato (ad es., `/it/about`, `/fr/about`), più middleware server opzionale (per SSR/Vite)                    |
-| **Supporto TypeScript**             | Buono (tipi per pacchetti ufficiali)                                                | Buono ma configurazione extra per traduzioni tipizzate se si desidera un controllo rigido                                        | Eccellente (definizioni di tipo auto-generate per chiavi di contenuto e traduzioni)                                                              |
-| **Pluralizzazione e Formattazione** | Avanzata: formattazione integrata di data/ora/numero, supporto plural/gender        | Pluralizzazione configurabile. La formattazione di data/ora viene tipicamente eseguita tramite librerie esterne o plugin i18next | Può fare affidamento su standard JavaScript Intl o includere logica nel contenuto. Non è specializzato come FormatJS, ma gestisce i casi tipici. |
-| **Comunità & Ecosistema**           | Ampia, parte dell'ecosistema FormatJS                                               | Molto ampia, altamente attiva, molti plugin (rilevamento, caching, framework)                                                    | Più piccola ma in crescita; approccio moderno e open-source                                                                                      |
-| **Curva di Apprendimento**          | Moderata (apprendimento della sintassi del messaggio ICU, convenzioni FormatJS)     | Bassa a moderata (utilizzo diretto, ma configurazione avanzata può diventare verbosa)                                            | Moderata (concetto di dichiarazioni di contenuto e passaggi di build specializzati)                                                              |
+**Perché è importante:** Bundle più piccoli e meno stringhe inutilizzate migliorano le prestazioni di avvio e navigazione.
 
 ---
 
-## 6. Quando Scegliere Ciascuno
+### 6) DX, strumenti e manutenzione
 
-1. **React-Intl**
+- **react-intl / react-i18next**: Ampio ecosistema comunitario; per i flussi editoriali solitamente si adottano piattaforme di localizzazione esterne.
+- **Intlayer**: Include un **Editor Visivo gratuito** e un **CMS opzionale** (mantieni i contenuti in Git o esternalizzali). Offre inoltre un’**estensione per VSCode** per la creazione di contenuti e una **traduzione assistita da AI** utilizzando le tue chiavi provider.
 
-   - Hai bisogno di **formattazione potente** per date/ore/numeri e forte **sintassi di messaggio ICU**.
-   - Preferisci un approccio più “**basato sugli standard**” alle traduzioni.
-   - Non hai bisogno di routing localizzati o chiavi di traduzione fortemente tipizzate.
+**Perché è importante:** Gli strumenti integrati accorciano il ciclo tra sviluppatori e autori di contenuti - meno codice di collegamento, meno dipendenze da fornitori.
 
-2. **React-i18next**
+---
 
-   - Hai bisogno di una soluzione **flessibile e consolidata** con caricamento di traduzioni **dinamico** e **su richiesta**.
-   - Vuoi un rilevamento lingua **basato su plugin** (ad es., da URL, cookie, storage locale) o caching avanzato.
-   - Hai bisogno del più grande ecosistema, con molte integrazioni esistenti per vari framework (Next.js, React Native, ecc.).
+## Quando scegliere quale?
 
-3. **Intlayer**
-   - Vuoi un'integrazione **forte con TypeScript** con _tipi autogenerati_, assicurandoti di non perdere mai una chiave di traduzione.
-   - Preferisci contenuti **dichiarativi** vicino al componente, eventualmente includendo nodi React o logica avanzata nelle traduzioni.
-   - Hai bisogno di **routing localizzato integrato** o vuoi facilmente incorporarlo nella tua configurazione SSR o Vite.
-   - Desideri un approccio moderno o semplicemente vuoi una singola libreria che copra sia la **gestione del contenuto** (i18n) che il **routing** in modo sicuro rispetto ai tipi.
+- **Scegli react-intl** se desideri un formato messaggi **ICU-first** con un’API semplice e conforme agli standard e il tuo team è a suo agio nel mantenere manualmente cataloghi e controlli di sicurezza.
+- **Scegli react-i18next** se ti serve l’**ampiezza dell’ecosistema di i18next** (rilevatori, backend, plugin ICU, integrazioni) e accetti una configurazione più complessa per ottenere maggiore flessibilità.
+- **Scegli Intlayer** se apprezzi il **contenuto a livello di componente**, il **TypeScript rigoroso**, le **garanzie a tempo di compilazione**, il **tree-shaking** e gli strumenti editoriali **completi** - specialmente per applicazioni React **grandi e modulari**.
 
 ---
 
-## 7. Conclusione
-
-Ogni libreria offre una soluzione robusta per l'internazionalizzazione di un'applicazione React:
-
-- **React-Intl** eccelle nella formattazione dei messaggi ed è una scelta popolare per soluzioni aziendali che si concentrano sulla sintassi dei messaggi ICU.
-- **React-i18next** fornisce un ambiente altamente flessibile e guidato dai plugin per esigenze i18n avanzate o dinamiche.
-- **Intlayer** offre un approccio **moderno e fortemente tipizzato** che unisce dichiarazioni di contenuto, routing localizzato avanzato e integrazioni basate su plugin (CRA, Vite).
+## Note pratiche per la migrazione (react-intl / react-i18next → Intlayer)
 
-La tua scelta dipende in gran parte dai requisiti di progetto, dall'esperienza dello sviluppatore desiderata (DX) e da quanto siano importanti le traduzioni tipizzate o il routing avanzato. Se dai valore al routing localizzato integrato e all'integrazione TypeScript, **Intlayer** potrebbe risultare più allettante. Se desideri una soluzione collaudata e ricca di ecosistemi, **React-i18next** è una grande scelta. Per esigenze di formattazione basate su ICU semplici, **React-Intl** è un'opzione affidabile.
+- **Migra in modo incrementale**: Inizia con una funzionalità o una rotta; mantieni i cataloghi legacy in parallelo durante la transizione.
+- **Adotta dizionari per componente**: Colloca il contenuto insieme ai componenti per ridurre l'accoppiamento.
+- **Abilita controlli rigorosi**: Lascia che gli errori a tempo di compilazione evidenzino precocemente chiavi/locale mancanti in CI.
+- **Misura i bundle**: Aspettati riduzioni man mano che le stringhe inutilizzate vengono eliminate.
 
 ---
 
-### Ulteriori Letture
+## Conclusione
 
-- [Documentazione React-Intl](https://formatjs.io/docs/react-intl/)
-- [Documentazione React-i18next](https://react.i18next.com/)
-- [Guida all'Inizio con Intlayer + CRA](/#) (dal tuo documento)
-- [Guida all'Inizio con Intlayer + Vite & React](/#) (dal tuo documento)
+Tutte e tre le librerie localizzano React in modo efficace. La differenza sta in quanta **infrastruttura** devi costruire per raggiungere una configurazione **sicura e scalabile**:
 
-Sentiti libero di mescolare e abbinare approcci per soddisfare i tuoi requisiti, non esiste una soluzione "taglia unica" e ogni libreria continua a evolversi per affrontare nuovi casi d'uso nell'ecosistema React.
+- Con **Intlayer**, **contenuti modulari**, **tipizzazione TypeScript rigorosa**, **sicurezza a tempo di compilazione**, **bundle ottimizzati con tree-shaking** e **strumenti editoriali** sono impostazioni predefinite - non incombenze.
+- Se il tuo team valorizza la **manutenibilità e la velocità** in app React multi-locale e basate su componenti, Intlayer offre il flusso di lavoro per sviluppatori e contenuti più **completo** oggi disponibile.

package/blog/it/vue-i18n_vs_intlayer.md

@@ -0,0 +1,268 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-08-23
+title: vue-i18n vs Intlayer
+description: Confronta vue-i18n con Intlayer per l'internazionalizzazione (i18n) in app Vue/Nuxt
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internazionalizzazione
+  - i18n
+  - Blog
+  - Vue
+  - Nuxt
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer
+---
+
+# vue-i18n VS Intlayer | Internazionalizzazione Vue (i18n)
+
+Questa guida confronta due popolari opzioni i18n per **Vue 3** (e **Nuxt**): **vue-i18n** e **Intlayer**.
+Ci concentriamo sugli strumenti moderni di Vue (Vite, Composition API) e valutiamo:
+
+1. **Architettura e organizzazione dei contenuti**
+2. **TypeScript e sicurezza**
+3. **Gestione delle traduzioni mancanti**
+4. **Routing e strategia URL**
+5. **Prestazioni e comportamento di caricamento**
+6. **Esperienza sviluppatore (DX), strumenti e manutenzione**
+7. **SEO e scalabilità per progetti di grandi dimensioni**
+
+> **tl;dr**: Entrambi possono localizzare app Vue. Se desideri **contenuti a livello di componente**, **tipi TypeScript rigorosi**, **controlli delle chiavi mancanti in fase di build**, **dizionari tree-shaken** e **helper integrati per router/SEO** oltre a **Editor Visivo e traduzioni AI**, **Intlayer** è la scelta più completa e moderna.
+
+---
+
+## Posizionamento ad alto livello
+
+- **vue-i18n** - La libreria i18n de-facto per Vue. Formattazione flessibile dei messaggi (stile ICU), blocchi SFC `<i18n>` per messaggi locali e un grande ecosistema. La sicurezza e la manutenzione su larga scala dipendono principalmente da te.
+- **Intlayer** - Modello di contenuto incentrato sui componenti per Vue/Vite/Nuxt con **tipizzazione TS rigorosa**, **controlli in fase di build**, **tree-shaking**, **helper per router e SEO**, **Editor Visivo/CMS** opzionale e **traduzioni assistite da AI**.
+
+---
+
+## Confronto delle funzionalità affiancate (focalizzato su Vue)
+
+| Funzionalità                                        | **Intlayer**                                                                      | **vue-i18n**                                                                                             |
+| --------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| **Traduzioni vicino ai componenti**                 | ✅ Sì, contenuto collocato per componente (es. `MyComp.content.ts`)               | ✅ Sì, tramite blocchi SFC `<i18n>` (opzionale)                                                          |
+| **Integrazione TypeScript**                         | ✅ Avanzata, tipi **rigorosi** generati automaticamente e completamento chiavi    | ✅ Buona tipizzazione; **sicurezza rigorosa delle chiavi richiede configurazioni/discipline aggiuntive** |
+| **Rilevamento traduzioni mancanti**                 | ✅ Avvisi/errori in **fase di build** e visibilità in TS                          | ⚠️ Fallback/avvisi a runtime                                                                             |
+| **Contenuti ricchi (componenti/Markdown)**          | ✅ Supporto diretto per nodi ricchi e file di contenuto Markdown                  | ⚠️ Limitato (componenti tramite `<i18n-t>`, Markdown tramite plugin esterni)                             |
+| **Traduzione con AI**                               | ✅ Flussi di lavoro integrati usando le tue chiavi provider AI                    | ❌ Non integrato                                                                                         |
+| **Editor Visivo / CMS**                             | ✅ Editor Visivo gratuito e CMS opzionale                                         | ❌ Non integrato (usa piattaforme esterne)                                                               |
+| **Routing localizzato**                             | ✅ Helper per Vue Router/Nuxt per generare percorsi localizzati, URL e `hreflang` | ⚠️ Non core (usa Nuxt i18n o configurazioni personalizzate di Vue Router)                                |
+| **Generazione dinamica delle rotte**                | ✅ Sì                                                                             | ❌ Non fornito (fornito da Nuxt i18n)                                                                    |
+| **Pluralizzazione e formattazione**                 | ✅ Schemi di enumerazione; formatter basati su Intl                               | ✅ Messaggi in stile ICU; formatter Intl                                                                 |
+| **Formati di contenuto**                            | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML in lavorazione)                     | ✅ `.json`, `.js` (più blocchi SFC `<i18n>`)                                                             |
+| **Supporto ICU**                                    | ⚠️ In lavorazione                                                                 | ✅ Sì                                                                                                    |
+| **Helper SEO (sitemap, robots, metadata)**          | ✅ Helper integrati (indipendenti dal framework)                                  | ❌ Non core (Nuxt i18n/comunità)                                                                         |
+| **SSR/SSG**                                         | ✅ Funziona con Vue SSR e Nuxt; non blocca il rendering statico                   | ✅ Funziona con Vue SSR/Nuxt                                                                             |
+| **Tree-shaking (spedire solo il contenuto usato)**  | ✅ Per componente al momento della build                                          | ⚠️ Parziale; richiede suddivisione manuale del codice/messaggi asincroni                                 |
+| **Caricamento lazy**                                | ✅ Per locale / per dizionario                                                    | ✅ Supporta messaggi di locale asincroni                                                                 |
+| **Rimozione del contenuto non utilizzato**          | ✅ Sì (a tempo di build)                                                          | ❌ Non integrato                                                                                         |
+| **Manutenibilità di progetti di grandi dimensioni** | ✅ Favorisce una struttura modulare e amichevole per i design system              | ✅ Possibile, ma richiede una forte disciplina su file/namespace                                         |
+| **Ecosistema / comunità**                           | ⚠️ Più piccolo ma in rapida crescita                                              | ✅ Grande e maturo nell'ecosistema Vue                                                                   |
+
+---
+
+## Confronto approfondito
+
+### 1) Architettura e scalabilità
+
+- **vue-i18n**: Le configurazioni comuni utilizzano **cataloghi centralizzati** per locale (opzionalmente suddivisi in file/namespace). I blocchi SFC `<i18n>` permettono messaggi locali, ma i team spesso tornano ai cataloghi condivisi man mano che i progetti crescono.
+- **Intlayer**: Promuove **dizionari per componente** memorizzati accanto al componente che servono. Questo riduce i conflitti tra team, mantiene il contenuto facilmente rintracciabile e limita naturalmente la deriva/chiavi non utilizzate.
+
+**Perché è importante:** In grandi app Vue o design system, il **contenuto modulare** scala meglio rispetto ai cataloghi monolitici.
+
+---
+
+### 2) TypeScript e sicurezza
+
+- **vue-i18n**: Buon supporto TS; la **tipizzazione rigorosa delle chiavi** richiede tipicamente schemi/generici personalizzati e convenzioni attente.
+- **Intlayer**: **Genera tipi rigorosi** dal tuo contenuto, offrendo **autocompletamento nell’IDE** e **errori a tempo di compilazione** per errori di battitura o chiavi mancanti.
+
+**Perché è importante:** Il typing forte intercetta i problemi **prima** del runtime.
+
+---
+
+### 3) Gestione delle traduzioni mancanti
+
+- **vue-i18n**: Avvisi/fallback **a runtime** (es. fallback su locale o chiave).
+- **Intlayer**: Rilevamento **a build-time** con avvisi/errori su tutte le localizzazioni e chiavi.
+
+**Perché è importante:** L’applicazione a build-time mantiene l’interfaccia di produzione pulita e coerente.
+
+---
+
+### 4) Strategia di routing e URL (Vue Router/Nuxt)
+
+- **Entrambi** possono funzionare con rotte localizzate.
+- **Intlayer** fornisce helper per **generare percorsi localizzati**, **gestire i prefissi di localizzazione** ed emettere **`<link rel="alternate" hreflang>`** per la SEO. Con Nuxt, integra il routing del framework.
+
+**Perché è importante:** Meno strati di collegamento personalizzati e **SEO più pulita** tra le localizzazioni.
+
+---
+
+### 5) Prestazioni e comportamento di caricamento
+
+- **vue-i18n**: Supporta messaggi di localizzazione asincroni; evitare un bundle eccessivo è responsabilità tua (dividi i cataloghi con attenzione).
+- **Intlayer**: **Ottimizza l’albero** durante la build e **carica in modo lazy per dizionario/località**. Il contenuto non utilizzato non viene incluso.
+
+**Perché è importante:** Bundle più piccoli e avvio più veloce per app Vue multi-localizzazione.
+
+---
+
+### 6) Esperienza sviluppatore e strumenti
+
+- **vue-i18n**: Documentazione e community mature; solitamente ti affiderai a **piattaforme di localizzazione esterne** per i flussi editoriali.
+- **Intlayer**: Fornisce un **Editor Visivo gratuito**, un **CMS** opzionale (compatibile con Git o esternalizzato), un’**estensione VSCode**, utility **CLI/CI** e **traduzioni assistite da AI** utilizzando le tue chiavi provider.
+
+**Perché è importante:** Costi operativi ridotti e un ciclo sviluppo–contenuto più breve.
+
+---
+
+### 7) SEO, SSR & SSG
+
+- **Entrambi** funzionano con Vue SSR e Nuxt.
+- **Intlayer**: Aggiunge **helper SEO** (sitemap/metadata/`hreflang`) indipendenti dal framework e ben integrati con le build Vue/Nuxt.
+
+**Perché è importante:** SEO internazionale senza configurazioni personalizzate complesse.
+
+---
+
+## Perché Intlayer? (Problema e approccio)
+
+La maggior parte degli stack i18n (incluso **vue-i18n**) parte da **cataloghi centralizzati**:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Oppure con cartelle per locale:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+└── src
+    └── components
+        └── MyComponent.vue
+```
+
+Questo spesso rallenta lo sviluppo man mano che le app crescono:
+
+1. **Per un nuovo componente** crei/modifichi cataloghi remoti, colleghi namespace e traduci (spesso tramite copia/incolla manuale da strumenti AI).
+2. **Quando modifichi componenti** cerchi chiavi condivise, traduci, mantieni i locali sincronizzati, rimuovi chiavi inutilizzate e allinei le strutture JSON.
+
+**Intlayer** delimita il contenuto **per componente** e lo mantiene **vicino al codice**, come già facciamo con CSS, storie, test e documentazione:
+
+```bash
+.
+└── components
+    └── MyComponent
+        ├── MyComponent.content.ts
+        └── MyComponent.vue
+```
+
+**Dichiarazione del contenuto** (per componente):
+
+```ts fileName="./components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    greeting: t({
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+**Utilizzo in Vue** (Composition API):
+
+```vue fileName="./components/MyComponent/MyComponent.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer"; // Integrazione Vue
+const { greeting } = useIntlayer("component-example");
+</script>
+
+<template>
+  <span>{{ greeting }}</span>
+</template>
+```
+
+Questo approccio:
+
+- **Accelera lo sviluppo** (dichiara una volta; completamento automatico IDE/AI).
+- **Pulisce il codice** (1 componente = 1 dizionario).
+- **Facilita duplicazione/migrazione** (copia un componente e il suo contenuto insieme).
+- **Evita chiavi inutilizzate** (i componenti non usati non importano contenuti).
+- **Ottimizza il caricamento** (i componenti caricati in modo lazy portano con sé il loro contenuto).
+
+---
+
+## Funzionalità aggiuntive di Intlayer (rilevanti per Vue)
+
+- **Supporto cross-framework**: Funziona con Vue, Nuxt, Vite, React, Express e altri.
+- **Gestione contenuti basata su JavaScript**: Dichiara nel codice con piena flessibilità.
+- **File di dichiarazione per ogni locale**: Definisci tutte le localizzazioni e lascia che gli strumenti generino il resto.
+- **Ambiente con tipizzazione sicura**: Configurazione TS robusta con completamento automatico.
+- **Recupero contenuti semplificato**: Un singolo hook/composable per ottenere tutti i contenuti di un dizionario.
+- **Codebase organizzata**: 1 componente = 1 dizionario nella stessa cartella.
+- **Routing migliorato**: Helper per percorsi e metadata localizzati di **Vue Router/Nuxt**.
+- **Supporto Markdown**: Importa Markdown remoto/locale per ogni locale; espone il frontmatter al codice.
+- **Editor Visuale gratuito & CMS opzionale**: Creazione contenuti senza piattaforme di localizzazione a pagamento; sincronizzazione compatibile con Git.
+- **Contenuti tree-shakable**: Include solo ciò che viene utilizzato; supporta il caricamento lazy.
+- **Compatibile con rendering statico**: Non blocca la generazione statica (SSG).
+- **Traduzioni potenziate dall’IA**: Traduci in 231 lingue utilizzando il tuo provider AI/chiave API.
+- **Server MCP & estensione VSCode**: Automatizza i flussi di lavoro i18n e la creazione di contenuti direttamente nel tuo IDE.
+- **Interoperabilità**: Collegamenti con **vue-i18n**, **react-i18next** e **react-intl** quando necessario.
+
+---
+
+## Quando scegliere quale?
+
+- **Scegli vue-i18n** se vuoi l’**approccio standard di Vue**, ti senti a tuo agio a gestire cataloghi/namespace da solo e la tua app è di **dimensioni piccole o medie** (o già usi Nuxt i18n).
+- **Scegli Intlayer** se apprezzi il **contenuto scoped per componente**, il **TypeScript rigoroso**, le **garanzie a build-time**, il **tree-shaking** e gli strumenti **batteries-included** per routing/SEO/editor-specialmente per **codebase Vue/Nuxt grandi e modulari**.
+
+---
+
+## Note pratiche per la migrazione (vue-i18n → Intlayer)
+
+- **Inizia per funzionalità**: Sposta una rotta/vista/componente alla volta nei dizionari locali di Intlayer.
+- **Collega durante la migrazione**: Mantieni i cataloghi vue-i18n in parallelo; sostituisci gradualmente le ricerche.
+- **Abilita controlli rigorosi**: Permetti al rilevamento in fase di build di evidenziare presto chiavi/locale mancanti.
+- **Adotta helper per router/SEO**: Standardizza il rilevamento della localizzazione e i tag `hreflang`.
+- **Misura i bundle**: Aspettati **riduzioni delle dimensioni del bundle** man mano che il contenuto non utilizzato viene escluso.
+
+---
+
+## Conclusione
+
+Sia **vue-i18n** che **Intlayer** localizzano bene le app Vue. La differenza è **quanto devi costruire da solo** per ottenere una configurazione robusta e scalabile:
+
+- Con **Intlayer**, **contenuti modulari**, **TypeScript rigoroso**, **sicurezza a tempo di compilazione**, **bundle ottimizzati con tree-shaking** e **strumenti per router/SEO/editor** sono disponibili **pronti all'uso**.
+- Se il tuo team dà priorità a **manutenibilità e velocità** in un'app Vue/Nuxt multilingue e basata su componenti, Intlayer offre l'esperienza **più completa** oggi disponibile.
+
+Consulta il documento ['Perché Intlayer?'](https://intlayer.org/doc/why) per maggiori dettagli.

package/blog/ja/intlayer_with_next-i18next.md

@@ -1,6 +1,6 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: Intlayerとnext-i18next
 description: Next.jsアプリのためにnext-i18nextとIntlayerを連携する
 keywords:
@@ -24,7 +24,6 @@ Both next-i18next and Intlayer are open-source internationalization (i18n) frame
 Both solutions include three principal notions:
 
 1. **コンテンツ宣言**: アプリケーションの翻訳可能なコンテンツを定義するための方法。
-
    - `i18next`の場合は`resource`として名付けられ、コンテンツ宣言は、1つまたは複数の言語の翻訳のためのキー-バリューのペアを含む構造化されたJSONオブジェクトです。詳細については、[i18nextのドキュメント](https://www.i18next.com/translation-function/essentials)を参照してください。
    - `Intlayer`の場合は`content declaration file`として名付けられ、コンテンツ宣言は構造化データをエクスポートするJSON、JS、またはTSファイルになることができます。詳細については、[Intlayerのドキュメント](https://intlayer.org/fr/doc/concept/content)を参照してください。
 
@@ -209,8 +208,8 @@ const content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -227,8 +226,8 @@ const content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -242,8 +241,8 @@ module.exports = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };