@intlayer/docs 9.4.3 → 9.5.0

package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md

@@ -40,16 +40,12 @@ Ci concentriamo su **Next.js 13+ App Router** (con **React Server Components**)
 
 > Una confusione comune tra gli sviluppatori è pensare che `next-intl` sia la versione Next.js di `react-intl`. Non è così: `next-intl` è mantenuto da [Amann](https://github.com/amannn), mentre `react-intl` è mantenuto da [FormatJS](https://github.com/formatjs/formatjs).
 
----
-
 ## In breve
 
 - **next-intl** - Formattazione dei messaggi leggera e semplice con un solido supporto per Next.js. I cataloghi centralizzati sono comuni; l'esperienza sviluppatore (DX) è semplice, ma la sicurezza e la manutenzione su larga scala rimangono per lo più a tuo carico.
 - **next-i18next** - i18next in versione Next.js. Ecosistema maturo e funzionalità tramite plugin (ad esempio, ICU), ma la configurazione può essere verbosa e i cataloghi tendono a centralizzarsi con la crescita dei progetti.
 - **Intlayer** - Modello di contenuto incentrato sui componenti per Next.js, **tipizzazione TS rigorosa**, **controlli a tempo di compilazione**, **tree-shaking**, **middleware integrati e helper SEO**, **Editor Visivo/CMS** opzionale e **traduzioni assistite da AI**.
 
----
-
 | Library                | GitHub Stars                                                                                                                                                                     | Total Commits                                                                                                                                                                        | Last Commit                                                                                                                                           | First Version | NPM Version                                                                                                         | NPM Downloads                                                                                                                  |
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | `aymericzip/intlayer`  | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers)   | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)   | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)   | April 2024    | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         |
@@ -59,8 +55,6 @@ Ci concentriamo su **Next.js 13+ App Router** (con **React Server Components**)
 
 > I badge si aggiornano automaticamente. Gli snapshot varieranno nel tempo.
 
----
-
 ## Confronto delle Funzionalità Affiancate (focalizzato su Next.js)
 
 | Funzionalità                                            | `next-intlayer` (Intlayer)                                                                                                                     | `next-intl`                                                                                                                      | `next-i18next`                                                                                                                   |
@@ -86,16 +80,12 @@ Ci concentriamo su **Next.js 13+ App Router** (con **React Server Components**)
 | **Gestione di progetti di grandi dimensioni**           | ✅ Favorisce la modularità, adatto per sistemi di design                                                                                       | ✅ Modulare con configurazione                                                                                                   | ✅ Modulare con configurazione                                                                                                   |
 | **Test delle traduzioni mancanti (CLI/CI)**             | ✅ CLI: `npx intlayer content test` (audit compatibile con CI)                                                                                 | ⚠️ Non integrato; la documentazione suggerisce `npx @lingual/i18n-check`                                                         | ⚠️ Non integrato; si fa affidamento sugli strumenti i18next / runtime `saveMissing`                                              |
 
----
-
 ## Introduzione
 
 Next.js offre supporto integrato per il routing internazionalizzato (es. segmenti di localizzazione). Ma questa funzionalità non gestisce le traduzioni da sola. Serve comunque una libreria per rendere contenuti localizzati agli utenti.
 
 Esistono molte librerie i18n, ma nel mondo Next.js oggi tre stanno guadagnando popolarità: next-i18next, next-intl e Intlayer.
 
----
-
 ## Architettura e scalabilità
 
 - **next-intl / next-i18next**: Predefinito a **cataloghi centralizzati** per locale (più **namespace** in i18next). Funziona bene all'inizio, ma spesso diventa una grande area condivisa con un aumento del coupling e del churn delle chiavi.
@@ -103,8 +93,6 @@ Esistono molte librerie i18n, ma nel mondo Next.js oggi tre stanno guadagnando p
 
 **Perché è importante:** In grandi codebase o configurazioni di design system, il **contenuto modulare** scala meglio rispetto ai cataloghi monolitici.
 
----
-
 ## Dimensioni del bundle e dipendenze
 
 Dopo la compilazione dell'applicazione, il bundle è il JavaScript che il browser caricherà per rendere la pagina. La dimensione del bundle è quindi importante per le prestazioni dell'applicazione.
@@ -170,8 +158,6 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
 | ![bundle ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![bundle non ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
----
-
 ## TypeScript e sicurezza
 
 <Columns>
@@ -196,12 +182,11 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 - **Genera tipi rigorosi** dal tuo contenuto. **Completamento automatico nell’IDE** e **errori a tempo di compilazione** individuano errori di battitura e chiavi mancanti prima del deploy.
 
   </Column>
+
 </Columns>
 
 **Perché è importante:** La tipizzazione forte sposta i fallimenti a sinistra (CI/build) invece che a destra (runtime).
 
----
-
 ## Gestione delle traduzioni mancanti
 
 **next-intl**
@@ -218,8 +203,6 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 
 **Perché è importante:** Individuare le lacune durante la build previene “stringhe misteriose” in produzione e si allinea con rigide regole di rilascio.
 
----
-
 ## Routing, middleware e strategia URL
 
 <Columns>
@@ -244,12 +227,11 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 - Tutto quanto sopra, più **middleware i18n** (rilevamento della localizzazione tramite header/cookie) e **helper** per generare URL localizzati e tag `<link rel="alternate" hreflang="…">`.
 
   </Column>
+
 </Columns>
 
 **Perché è importante:** Meno livelli di collegamento personalizzati; **UX coerente** e **SEO pulito** tra le diverse localizzazioni.
 
----
-
 ## Allineamento con Server Components (RSC)
 
 <Columns>
@@ -274,12 +256,11 @@ Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle uti
 - Supporta Next.js 13+ e facilita il **confine server/client** con un'API coerente e provider orientati a RSC, evitando il passaggio continuo di formatter o funzioni t.
 
   </Column>
+
 </Columns>
 
 **Perché è importante:** Modello mentale più pulito e meno casi limite negli alberi ibridi.
 
----
-
 ## Integrazione con piattaforme di localizzazione (TMS)
 
 Le grandi organizzazioni spesso si affidano a Sistemi di Gestione delle Traduzioni (TMS) come **Crowdin**, **Phrase**, **Lokalise**, **Localizely** o **Localazy**.
@@ -786,8 +767,6 @@ const ClientComponentExample = () => {
   - **next-intl** è flessibile; carica i messaggi come preferisci.
   - **Intlayer** memorizza i contenuti in dizionari TS/JS e risolve tramite chiave.
 
----
-
 ### Utilizzo in un componente server
 
 Prendiamo il caso di un componente UI. Questo componente è un componente server e dovrebbe poter essere inserito come figlio di un componente client. (pagina (componente server) -> componente client -> componente server). Poiché questo componente può essere inserito come figlio di un componente client, non può essere async.
@@ -885,7 +864,7 @@ Ecco una lista di buone pratiche riguardanti la SEO multilingue.
 Gli sviluppatori spesso dimenticano di referenziare correttamente le loro pagine tra le diverse localizzazioni.
 
 <Tabs defaultTab="next-intl" group='techno'>
- 
+
   <Tab label="next-i18next" value="next-i18next">
 
 ```ts fileName="i18n.config.ts"
@@ -1144,8 +1123,6 @@ export default robots;
 
 > Intlayer fornisce una funzione `getMultilingualUrls` per generare URL multilingue per la tua sitemap.
 
----
-
 ### Middleware per il routing delle lingue
 
 <Tabs defaultTab="next-intl" group='techno'>
@@ -1263,9 +1240,8 @@ La configurazione del middleware è centralizzata nel file `intlayer.config.ts`.
 - **Tooling integrato**: Approfitta del routing integrato, degli helper SEO e del supporto dell'editor visuale.
 
   </Tab>
-</Tabs>
 
----
+</Tabs>
 
 ## E il vincitore è…
 
@@ -1293,6 +1269,7 @@ Non è semplice. Ogni opzione ha dei compromessi. Ecco come la vedo:
 - costruito per Next.js moderno, con contenuti modulari, sicurezza dei tipi, strumenti e meno codice boilerplate. Se apprezzi **contenuti a livello di componente**, **TypeScript rigoroso**, **garanzie a tempo di build**, **tree-shaking** e strumenti **completi** per routing/SEO/editor - specialmente per **Next.js App Router**, sistemi di design e **codebase grandi e modulari**.
 
   </Column>
+
 </Columns>
 
 Se preferisci una configurazione minima e accetti un po' di collegamenti manuali, next-intl è una buona scelta. Se hai bisogno di tutte le funzionalità e non ti dispiace la complessità, next-i18next funziona. Ma se vuoi una soluzione moderna, scalabile, modulare con strumenti integrati, Intlayer mira a offrirti tutto questo pronto all'uso.
@@ -1307,8 +1284,6 @@ Le stelle di GitHub sono un forte indicatore della popolarità di un progetto, d
 
 [![Grafico della Storia delle Stelle](https://api.star-history.com/chart?repos=i18next/next-i18next%2Camannn/next-intl%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/next-i18next&amannn/next-intl&aymericzip/intlayer)
 
----
-
 ## Conclusione
 
 Tutte e tre le librerie riescono nella localizzazione di base. La differenza è **quanto lavoro devi fare** per ottenere una configurazione robusta e scalabile in **Next.js moderno**:

package/blog/it/nextjs-multilingual-seo-comparison.md

@@ -26,8 +26,6 @@ Se la tua app Next.js multilingue non indica ai motori di ricerca come eseguire
 
 In questo blog, esploreremo **perché l’i18n è un superpotere per la SEO** e come implementarla correttamente in Next.js con `next-intl`, `next-i18next` e `Intlayer`.
 
----
-
 ## Perché SEO e i18n
 
 Aggiungere lingue non riguarda solo l’esperienza utente (UX). È anche una leva potente per la **visibilità organica**. Ecco perché:
@@ -37,8 +35,6 @@ Aggiungere lingue non riguarda solo l’esperienza utente (UX). È anche una lev
 3. **Migliore UX:** I visitatori arrivano immediatamente alla versione giusta del tuo sito.
 4. **Vantaggio competitivo:** Pochi siti implementano correttamente la SEO multilingue, il che significa che puoi distinguerti.
 
----
-
 ## Best practice per la SEO multilingue in Next.js
 
 Ecco una checklist che ogni app multilingue dovrebbe implementare:
@@ -57,8 +53,6 @@ Ecco una checklist che ogni app multilingue dovrebbe implementare:
 
 Questi sono passaggi semplici, ma saltarli può costarti visibilità.
 
----
-
 ## Esempi di Implementazione
 
 Gli sviluppatori spesso dimenticano di riferire correttamente le loro pagine tra le diverse localizzazioni, quindi vediamo come funziona in pratica con diverse librerie.
@@ -344,14 +338,10 @@ export default robots;
   </Tab>
 </Tabs>
 
----
-
 ## Controlla il tuo sito web con Intlayer SEO Scanner
 
 Per garantire che la tua app multilingue sia perfettamente ottimizzata, ti consigliamo di utilizzare [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). È uno strumento specializzato nel controllo di siti web multilingue, che ti aiuta a identificare tag hreflang mancanti, collegamenti interrotti e altri problemi SEO in tutte le tue pagine localizzate.
 
----
-
 ## Conclusione
 
 Gestire correttamente l'i18n in Next.js non significa solo tradurre il testo, ma assicurarsi che i motori di ricerca e gli utenti sappiano esattamente quale versione del tuo contenuto mostrare.

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

@@ -39,16 +39,12 @@ Valutiamo:
 
 > **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.
 
----
-
 ## Posizionamento ad alto livello
 
 - **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.
 
----
-
 ## Matrice delle funzionalità (focus su React)
 
 | Funzionalità                                            | `react-intlayer` (Intlayer)                                                                                                                    | `react-i18next` (i18next)                                                                                                        | `react-intl` (FormatJS)                                                                                        |
@@ -73,8 +69,6 @@ Valutiamo:
 | **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                                                         |
 
----
-
 ## Confronto Approfondito
 
 ### 1) Architettura e scalabilità
@@ -84,8 +78,6 @@ Valutiamo:
 
 **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.
 
----
-
 ### 2) TypeScript e sicurezza
 
 - **react-intl**: Tipizzazioni solide, ma **nessuna tipizzazione automatica delle chiavi**; devi applicare tu stesso i pattern di sicurezza.
@@ -94,8 +86,6 @@ Valutiamo:
 
 **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.
 
----
-
 ### 3) Gestione delle traduzioni mancanti
 
 - **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.
@@ -103,8 +93,6 @@ Valutiamo:
 
 **Perché è importante:** Il fallimento della CI su stringhe mancanti previene la “misteriosa” presenza di inglese nelle interfacce non inglesi.
 
----
-
 ### 4) Contenuti ricchi e formattazione
 
 - **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.
@@ -113,8 +101,6 @@ Valutiamo:
 
 **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) 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.
@@ -122,8 +108,6 @@ Valutiamo:
 
 **Perché è importante:** Bundle più piccoli e meno stringhe inutilizzate migliorano le prestazioni di avvio e navigazione.
 
----
-
 ### 6) DX, strumenti e manutenzione
 
 - **react-intl / react-i18next**: Ampio ecosistema comunitario; per i flussi editoriali solitamente si adottano piattaforme di localizzazione esterne.
@@ -131,24 +115,18 @@ Valutiamo:
 
 **Perché è importante:** Gli strumenti integrati accorciano il ciclo tra sviluppatori e autori di contenuti - meno codice di collegamento, meno dipendenze da fornitori.
 
----
-
 ## Quando scegliere quale?
 
 - **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**.
 
----
-
 ## Interoperabilità con `react-intl` e `react-i18next`
 
 `intlayer` può aiutarti anche a gestire i tuoi namespace `react-intl` e `react-i18next`.
 
 Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua libreria i18n preferita, e intlayer genererà i tuoi namespace nella posizione di tua scelta (esempio: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## Note pratiche per la migrazione (react-intl / react-i18next → Intlayer)
 
 - **Migra in modo incrementale**: Inizia con una funzionalità o una rotta; mantieni i cataloghi legacy in parallelo durante la transizione.
@@ -156,8 +134,6 @@ Utilizzando `intlayer`, puoi dichiarare i tuoi contenuti nel formato della tua l
 - **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.
 
----
-
 ## Conclusione
 
 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**:

package/blog/it/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,294 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Come rendere multilingue (i18n) un'applicazione Next.js esistente a posteriori (Guida i18n 2026)"
+description: "La guida 2026 per rendere multilingue (i18n) un'app Next.js esistente senza complesse refactoring. Scopri l'estrazione automatica, traduzione AI e routing con Intlayer."
+keywords:
+  - Next.js i18n
+  - Internazionalizzazione
+  - Tradurre app Next.js esistente
+  - Next.js 16
+  - Intlayer
+  - Multilingue
+  - React i18n
+  - Compilatore
+  - Traduzione AI
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Come rendere multilingue (i18n) un'applicazione Next.js esistente a posteriori (Guida i18n 2026)
+
+Aggiungere l'internazionalizzazione (i18n) a un progetto Next.js fin dal primo giorno è relativamente semplice. Ma cosa succede quando hai già un'applicazione Next.js matura e in produzione in una sola lingua e devi renderla multilingue **a posteriori**?
+
+Con librerie tradizionali come `next-intl` o `next-i18next`, il processo è spesso estenuante:
+
+- Cercare manualmente stringhe hardcoded in centinaia di file JSX/TSX.
+- Creare file JSON nidificati e inventare chiavi di traduzione arbitrarie (`pages.dashboard.header.title`, ecc.).
+- Sostituire il testo con chiamate a hook (`t('...')`).
+- Ristrutturare l'intera cartella `app/` in `app/[locale]/...`, rompendo rotte esistenti e indicizzazione sui motori di ricerca.
+
+Nel 2026 non devi riscrivere il tuo codice. Con **Intlayer**, puoi integrare l'i18n in un'applicazione Next.js esistente in pochi minuti grazie all'estrazione automatica, alla traduzione con IA e a un routing flessibile.
+
+> Cerchi la guida tecnica completa passo-passo per Next.js 16 App Router? Consulta la nostra documentazione: [Tradurre Next.js 16 con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_16.md).
+
+## Indice
+
+<TOC/>
+
+## Il dilemma del retrofit: Perché internazionalizzare un'app esistente è difficile
+
+Tre ostacoli principali affrontano gli sviluppatori:
+
+1. **Interruzione della codebase**: Estrarre manualmente testi in dizionari JSON impone modifiche a quasi tutti i componenti.
+2. **Vincoli di routing**: Le librerie tradizionali forzano lo spostamento di layout e pagine in un segmento `[locale]`.
+3. **Lavoro noioso di traduzione**: Tradurre dizionari in decine di lingue richiede infiniti copia-incolla.
+
+Intlayer risolve tutto con **estrazione assistita da compilatore**, **dizionari dichiarativi** e **routing non invasivo**.
+
+## Estrazione automatica dei contenuti (senza ricerca manuale)
+
+### Opzione A: Estrattore da CLI (`npx intlayer extract`)
+
+Esegui il comando di estrazione sul tuo progetto:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Questo comando estrae automaticamente il testo e crea file dichiarativi (`.content.ts`) accanto ai tuoi componenti.
+
+### Opzione B: Compilatore Intlayer (Estrazione al build)
+
+Continua a scrivere testo normale nei componenti. Al momento del build, il compilatore estrae i testi e inietta i contenuti localizzati:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+Dietro le quinte, Intlayer genera il dizionario e collega il componente al suo contenuto localizzato, eliminando completamente la necessità di refactoring manuale.
+
+In questo caso, verrà generato un file `src/app/page.content.ts` con il seguente contenuto:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traduzione automatica con IA e il tuo LLM preferito
+
+Traduci in pochi secondi con OpenAI, Anthropic, DeepSeek o Mistral usando la CLI integrata:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Dashboard SaaS per produttività e collaborazione di team",
+  },
+};
+
+export default config;
+```
+
+L'esecuzione di `npx intlayer fill` popola le dichiarazioni `.content.ts` con le traduzioni per tutte le lingue configurate:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      it: "Benvenuto nella nostra piattaforma",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      it: "Inizia a esplorare le nostre funzionalità moderne oggi stesso.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Poiché Intlayer fornisce un `applicationContext` di alto livello all'LLM, le traduzioni generate mantengono le sfumature tecniche, il tono del brand e il contesto grammaticale molto meglio rispetto ai tradizionali strumenti automatizzati.
+
+Per verificare che nessuna stringa sia stata dimenticata prima di andare in produzione:
+
+```bash
+npx intlayer test
+```
+
+## Aggiungi routing multilingue senza rompere le URL esistenti
+
+Intlayer offre modalità di routing flessibili:
+
+- **Parametri URL / Cookie (`search-params`)**: Mantieni intatta la struttura delle cartelle senza spostare nulla in `[locale]`.
+- **Modalità prefisso (`prefix` / `prefix-all-locales`)**: Gestisci prefissi SEO-friendly senza complessità.
+
+Configura l'integrazione con Next.js in pochi secondi:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Avvolgi il tuo root layout con `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## SEO multilingue
+
+Genera automaticamente metadati localizzati e tag `hreflang` per farti scoprire in tutto il mondo:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Approfondimento: Pronto per la guida passo-passo?
+
+Per seguire la guida tecnica completa con middleware, generazione statica (`generateStaticParams`) e Server Components, visita la documentazione ufficiale:
+
+👉 **[Guida completa per tradurre Next.js 16 con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_nextjs_16.md)**
+
+## Domande Frequenti (FAQ)
+
+<FAQ>
+
+<Question title="Posso rendere multilingue la mia app Next.js senza spostare file in app/[locale]?">
+
+Sì. Intlayer supporta `routing.mode: "search-params"` e rilevamento tramite cookie/header, preservando le URL e la struttura esistente.
+
+</Question>
+<Question title="Devo sostituire manualmente tutte le stringhe di testo?">
+
+No. Con `npx intlayer extract` o il compilatore Intlayer i testi vengono estratti automaticamente.
+
+</Question>
+<Question title="In che modo Intlayer riduce la dimensione del bundle rispetto a next-intl?">
+
+Grazie all'estrazione mirata per componente e all'ottimizzazione macro in fase di build.
+
+</Question>
+<Question title="Posso usare l'IA per tradurre automaticamente la mia applicazione?">
+
+Sì, con il comando `npx intlayer fill` integrato direttamente con i principali modelli LLM.
+
+</Question>
+</FAQ>