@intlayer/docs 9.5.4 → 9.5.6

package/docs/it/how_works_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-12
-updatedAt: 2026-08-30
+updatedAt: 2026-09-19
 title: Come funziona Intlayer
 description: Scopri come funziona Intlayer internamente. Comprendi l'architettura e i componenti che rendono Intlayer potente.
 keywords:
@@ -135,49 +135,105 @@ Intlayer è composto da diversi pacchetti, ognuno con un ruolo specifico nel pro
 
 Il pacchetto `intlayer` è utilizzato nelle applicazioni per dichiarare contenuti nei file di contenuto.
 
-### react-intlayer
+### Framework Frontend
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
 Il pacchetto `react-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni React.
 
-### next-intlayer
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
 Il pacchetto `next-intlayer` è utilizzato come layer sopra `react-intlayer` per rendere i dizionari di Intlayer utilizzabili nelle applicazioni Next.js. Integra funzionalità essenziali per far funzionare Intlayer in un ambiente Next.js, come il middleware di traduzione, il routing o la configurazione del file `next.config.js`.
 
-### vue-intlayer
+  </Tab>
+  <Tab label="Vue" value="vue">
 
 Il pacchetto `vue-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Vue.
 
-### nuxt-intlayer
+  </Tab>
+  <Tab label="Nuxt" value="nuxt">
 
 Il pacchetto `nuxt-intlayer` è un modulo Nuxt per rendere utilizzabili i dizionari Intlayer nelle applicazioni Nuxt. Integra funzionalità essenziali per far funzionare Intlayer in un ambiente Nuxt, come il middleware per la traduzione, il routing e la configurazione del file `nuxt.config.js`.
 
-### svelte-intlayer
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
 Il pacchetto `svelte-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Svelte.
 
-### solid-intlayer (WIP)
+  </Tab>
+  <Tab label="Solid" value="solid">
 
 Il pacchetto `solid-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Solid.js.
 
-### preact-intlayer
+  </Tab>
+  <Tab label="Preact" value="preact">
 
 Il pacchetto `preact-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Preact.
 
-### angular-intlayer (WIP)
+  </Tab>
+  <Tab label="Angular" value="angular">
 
 Il pacchetto `angular-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Angular.
 
-### express-intlayer
+  </Tab>
+  <Tab label="Astro" value="astro">
 
-Il pacchetto `express-intlayer` è utilizzato per utilizzare Intlayer su un backend Express.js.
+Il pacchetto `astro-intlayer` fornisce gli strumenti necessari per integrare Intlayer nelle applicazioni Astro. Configura il routing basato sulla locale e la gestione dei dizionari.
+
+  </Tab>
+  <Tab label="Remix" value="remix">
+
+Il pacchetto `remix-intlayer` fornisce gli strumenti necessari per integrare Intlayer nelle applicazioni Remix. Configura il routing basato sulla locale, il contesto lato server e la gestione dei dizionari.
 
-### react-native-intlayer
+  </Tab>
+  <Tab label="React Native" value="react-native">
 
 Il pacchetto `react-native-intlayer` fornisce strumenti che integrano plugin per far funzionare Intlayer con il Metro bundler.
 
-### lynx-intlayer
+  </Tab>
+  <Tab label="Lit" value="lit">
+
+Il pacchetto `lit-intlayer` fornisce strumenti e componenti per interpretare e utilizzare i dizionari di Intlayer nelle applicazioni Lit.
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Il pacchetto `vanilla-intlayer` fornisce strumenti per integrare Intlayer in applicazioni JavaScript vanilla, HTML o PHP.
+
+  </Tab>
+</Tabs>
+
+### Framework Backend
+
+<Tabs group="backend">
+  <Tab label="Express" value="express">
+
+Il pacchetto `express-intlayer` è utilizzato per utilizzare Intlayer su un backend Express.js.
+
+  </Tab>
+  <Tab label="Fastify" value="fastify">
+
+Il pacchetto `fastify-intlayer` fornisce un plugin per applicazioni Fastify per gestire l'internazionalizzazione. Rileva la locale dell'utente e decora l'oggetto request.
 
-Il pacchetto `lynx-intlayer` fornisce strumenti che integrano plugin per far funzionare Intlayer con il Lynx bundler.
+  </Tab>
+  <Tab label="Hono" value="hono">
+
+Il pacchetto `hono-intlayer` fornisce un middleware per le applicazioni Hono per gestire l'internazionalizzazione. Rileva la locale dell'utente e popola l'oggetto contesto.
+
+  </Tab>
+  <Tab label="Elysia" value="elysia">
+
+Il pacchetto `elysia-intlayer` fornisce un plugin per applicazioni Elysia per gestire l'internazionalizzazione. Rileva la locale dell'utente e inietta un oggetto `intlayer` nel contesto della route.
+
+  </Tab>
+  <Tab label="AdonisJS" value="adonis">
+
+Il pacchetto `adonis-intlayer` fornisce un middleware per le applicazioni AdonisJS per gestire l'internazionalizzazione. Rileva la locale dell'utente e fornisce funzioni di traduzione.
+
+  </Tab>
+</Tabs>
 
 ### vite-intlayer
 
@@ -187,6 +243,10 @@ Include il plugin Vite per integrare Intlayer con il [Vite bundler](https://vite
 
 Include i comandi e i plugin `react-scripts-intlayer` per integrare Intlayer con le applicazioni basate su Create React App. Questi plugin si basano su [craco](https://craco.js.org/) e includono configurazioni aggiuntive per il bundler [Webpack](https://webpack.js.org/).
 
+### eslint-plugin-intlayer
+
+Il pacchetto `eslint-plugin-intlayer` fornisce regole ESLint e oxlint per rilevare stringhe non tradotte, convalidare le definizioni del dizionario e applicare le migliori pratiche di i18n.
+
 ### intlayer-editor
 
 Il pacchetto `intlayer-editor` viene utilizzato per consentire l'uso dell'editor visivo. Questo pacchetto, opzionale, può essere installato nelle applicazioni e sarà utilizzato dal pacchetto `react-intlayer`.
@@ -220,6 +280,18 @@ Il pacchetto `@intlayer/cli` è un pacchetto NPM utilizzato per dichiarare gli s
 
 Il pacchetto `@intlayer/mcp` fornisce un server MCP (Model Context Protocol) che offre assistenza IDE potenziata dall'IA, specificamente progettata per l'ecosistema Intlayer. Carica automaticamente la documentazione e si integra con la CLI di Intlayer.
 
+### @intlayer/lsp
+
+Il pacchetto `@intlayer/lsp` fornisce un server Language Server Protocol (LSP) su misura per Intlayer. Offre funzionalità per IDE come Vai alla definizione, Trova riferimenti, anteprime al passaggio del mouse, completamento automatico delle chiavi del dizionario e avvisi di diagnostica.
+
+### @intlayer/ai
+
+Il pacchetto `@intlayer/ai` fornisce funzionalità SDK per le applicazioni Intlayer, consentendo la traduzione automatica e la generazione di contenuti tramite intelligenza artificiale.
+
+### @intlayer/analytics
+
+Il pacchetto `@intlayer/analytics` fornisce strumenti per raccogliere metriche sulle impressioni dei contenuti, analisi a livello di pagina/locale e di nodo, e supporta i test A/B dei contenuti.
+
 ### @intlayer/dictionaries-entry
 
 Il pacchetto `@intlayer/dictionaries-entry` restituisce il percorso di ingresso dei dizionari Intlayer: i dizionari uniti dalla sua radice, e quelli non uniti, remoti, dinamici e fetch dai suoi sottopercorsi `/unmerged`, `/remote`, `/dynamic` e `/fetch`. Poiché è impossibile cercare nel filesystem dal browser, non è possibile utilizzare bundler come Webpack o Rollup per recuperare il percorso di ingresso dei dizionari. Il pacchetto e i suoi sottopercorsi sono progettati per essere aliasati, consentendo l'ottimizzazione del bundling attraverso vari bundler come Vite, Webpack e Turbopack.

package/docs/it/intlayer_visual_editor.md

@@ -278,6 +278,13 @@ L'editor mostra la tua applicazione in un iframe, quindi la tua Content Security
 
 È progettato per lo sviluppo e lo staging, dove una ricostruzione dopo una modifica è accettabile. Per modificare il contenuto su un sito live senza un deployment, usa invece il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md) e i suoi dizionari remoti.
 
+</Question>
+<Question title="Qual è il costo dell'editor visuale? È eccessivo se non ne ho bisogno?">
+
+L'editor visuale di Intlayer ha un **costo pari a zero** sulla tua applicazione se non viene configurato. La logica aggiuntiva viene caricata solo se esplicitamente abilitata e necessaria.
+
+Se abilitato, l'impatto è estremamente ridotto (+5 KB, caricato dinamicamente solo quando attivato) poiché la maggior parte della logica è gestita dal server editor su [app.intlayer.org](https://app.intlayer.org) o tramite il pacchetto `intlayer-editor`. Se hai solo bisogno di una soluzione di traduzione semplice senza editing visuale, Intlayer non aggiunge alcun overhead alla tua applicazione.
+
 </Question>
 <Question title="L'editor visivo è gratuito?">
 

package/docs/it/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Astro multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Aggiunti gli hook useIntlayer / useLocale e il middleware Astro.locals ad astro-intlayer"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
@@ -152,7 +155,7 @@ bun add intlayer astro-intlayer
   Il pacchetto core che fornisce strumenti i18n per la gestione della configurazione, le traduzioni, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md), la transpilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md).
 
 - **astro-intlayer**
-  Include il plugin di integrazione Astro per collegare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire i reindirizzamenti degli URL.
+  Include il plugin di integrazione Astro per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware che risolve la locale di ciascuna richiesta in `Astro.locals.intlayer`, e gli hook `useIntlayer` / `useDictionary` / `useLocale`. Lo stesso percorso di importazione risolve all'implementazione server nel frontmatter `.astro` e a quella client (supportata da `vanilla-intlayer`) nei blocchi `<script>`.
 
 </Step>
 <Step number={2} title="Configura il tuo progetto">
@@ -230,26 +233,28 @@ export default appContent;
 </Step>
 <Step number={5} title="Utilizzare il contenuto in Astro">
 
-Puoi consumare i dizionari direttamente nei tuoi file `.astro` utilizzando gli helper core esportati da `intlayer`.
+Utilizza i tuoi dizionari nei file `.astro` con gli hook esportati da `astro-intlayer`. Condividono le firme di `react-intlayer`: `useIntlayer("key")` restituisce il contenuto di un dizionario e `useLocale()` la locale corrente, senza alcun argomento da passare.
+
+La locale proviene dal middleware `astro-intlayer`, che l'integrazione registra prima del tuo `src/middleware.ts`. La risolve per ogni richiesta, dal prefisso dell'URL, poi dalla locale memorizzata dal client (cookie o intestazione), quindi da `Accept-Language`, e la salva in `Astro.locals.intlayer`. Le pagine pre-renderizzate utilizzano solo l'URL, poiché vengono renderizzate una volta sola per ciascun visitatore.
+
+Dovresti anche aggiungere metadati SEO come hreflang e link canonici a ciascuna pagina e includere un selettore di lingua per consentire agli utenti di cambiare lingua.
 
 ```astro fileName="src/pages/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   defaultLocale,
   localeMap,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import LocaleSwitcher from "../components/LocaleSwitcher.astro";
 
-// Get the current locale from the URL (e.g. /es/about -> 'es')
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+// Locale risolta dal middleware (es. /it/about -> 'it')
+const { locale } = useLocale();
 
-// Get the content for the 'app' dictionary
-const { title } = getIntlayer("app", locale);
+// Contenuto del dizionario 'app' per questa locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -301,6 +306,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` espone anche `locale`, `defaultLocale` e `availableLocales` ai tuoi middleware ed endpoint. Passa una locale o un selettore come secondo argomento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) per sovrascrivere la locale della richiesta per una singola chiamata.
+
 </Step>
 <Step number={6} title="Routing localizzato">
 
@@ -325,44 +332,51 @@ Per consentire gli utenti di cambiare lingua, puoi creare un componente `LocaleS
 
 ```astro fileName="src/components/LocaleSwitcher.astro"
 ---
-import {
-  locales,
-  getLocaleName,
-  getLocalizedUrl,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  type LocalesValues,
-} from "intlayer";
+import { useLocale } from "astro-intlayer";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const { locale, availableLocales } = useLocale();
 const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ---
 
-<nav>
-  {
-    locales.map((localeItem) => (
-      <a
-        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
-        data-locale={localeItem}
-        aria-current={localeItem === locale ? "page" : undefined}
-      >
-        {getLocaleName(localeItem)}
-      </a>
-    ))
-  }
+<nav aria-label="Languages">
+  <ul>
+    {
+      availableLocales.map((localeItem) => (
+        <li key={localeItem} class="p-1">
+          <a
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            data-locale={localeItem}
+            aria-current={localeItem === locale ? "page" : undefined}
+          >
+            {getLocaleName(localeItem)}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </nav>
 
 <script>
-  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+  // Nel browser, la stessa importazione risolve all'implementazione client
+  import { useLocale } from "astro-intlayer";
+  import { getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  // Memorizza la scelta nel cookie locale e naviga verso l'URL localizzato
+  const { setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
+    },
+  });
 
   const localeLinks = document.querySelectorAll("[data-locale]");
 
   localeLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
+    link.addEventListener("click", (event) => {
       const locale = link.getAttribute("data-locale") as LocalesValues;
 
-      // Update the locale cookie
-      setLocaleInStorageClient(locale);
+      event.preventDefault();
+      setLocale(locale);
     });
   });
 </script>
@@ -372,6 +386,13 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
     display: flex;
     gap: 1rem;
   }
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 0.5rem;
+  }
   a[aria-current="page"] {
     font-weight: bold;
     text-decoration: underline;
@@ -380,7 +401,10 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Nota sulla persistenza:**
-> L'uso di `setLocaleInStorageClient` nello script lato client assicura che la preferenza della lingua dell'utente sia salvata in un cookie. Ciò consente al middleware Intlayer di ricordare la scelta e reindirizzare automaticamente l'utente alla sua lingua preferita nelle visite future.
+> `setLocale` da `useLocale` lato client salva la preferenza linguistica dell'utente in un cookie. Ciò consente a Intlayer di ricordare la scelta e reindirizzare automaticamente l'utente alla sua lingua preferita nelle visite successive: le pagine renderizzate su richiesta (un adapter con `output: 'server'` o `prerender = false`) vengono reindirizzate dal middleware Intlayer prima che venga inviato qualsiasi HTML, mentre le pagine pre-renderizzate, servite come file statici, vengono reindirizzate da un piccolo script che l'integrazione inietta in ogni pagina. Imposta `routing.enableProxy` su `false` per disattivare entrambi. In `astro dev`, il cookie viene ignorato come fonte di reindirizzamento a meno che `routing.enableProxy` non sia impostato su `true`, in modo che un cookie obsoleto non possa dirottare le pagine su cui stai lavorando.
+>
+> **Intercompatibilità server / client:**
+> `astro-intlayer` risolve ai suoi hook server nel frontmatter (leggendo `Astro.locals`) e agli hook client di `vanilla-intlayer` nei blocchi `<script>` e nelle isole, con gli stessi nomi e la stessa struttura dei contenuti. `setLocale` e `onChange` agiscono solo sul client, chiama `installIntlayer()` lì una volta per inizializzare lo store client. `astro-intlayer/client` espone l'entry client in modo esplicito.
 
 </Step>
 <Step number={8} title="Sitemap e Robots.txt">
@@ -404,10 +428,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -448,11 +472,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Continua a costruire la tua applicazione utilizzando il framework che preferisci.
 
-- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer con Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Estrarre il contenuto dei tuoi componenti" isOptional={true}>
@@ -518,21 +543,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilatore Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila la tua applicazione per trasformare i tuoi componenti ed estrarre il contenuto
 
 ```bash packageManager="npm"
 npm run build # Oppure npm run dev

package/docs/it/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro + Lit i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Astro + Lit multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Utilizzo degli hook useIntlayer / useLocale di astro-intlayer nella pagina Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Il pacchetto core che fornisce strumenti i18n per la gestione della configurazione, le traduzioni, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md), la transpilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md).
 
 - **astro-intlayer**
-  Include il plugin di integrazione Astro per collegare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire i reindirizzamenti degli URL.
+  Include il plugin di integrazione Astro per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware che risolve la locale di ciascuna richiesta in `Astro.locals.intlayer`, e gli hook `useIntlayer` / `useDictionary` / `useLocale`. Lo stesso percorso di importazione risolve all'implementazione server nel frontmatter `.astro` e a quella client (supportata da `vanilla-intlayer`) nei blocchi `<script>`.
 
 - **lit**
   Il pacchetto core di Lit per la creazione di Web Components veloci e leggeri.
@@ -246,19 +249,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Utilizzare il contenuto in Astro">
 
-Puoi consumare i dizionari direttamente nei tuoi file `.astro` utilizzando gli helper core esportati da `intlayer`. Dovresti anche aggiungere metadati SEO (come hreflang e link canonici) a ogni pagina. I Lit custom element vengono importati tramite uno `<script>` client e inseriti nel body.
+Utilizza i tuoi dizionari nei file `.astro` con gli hook esportati da `astro-intlayer`. Condividono le firme di `react-intlayer`: `useIntlayer("key")` restituisce il contenuto di un dizionario e `useLocale()` la locale corrente, senza alcun argomento da passare.
+
+La locale proviene dal middleware `astro-intlayer`, che l'integrazione registra prima del tuo `src/middleware.ts`. La risolve per ogni richiesta, dal prefisso dell'URL, poi dalla locale memorizzata dal client (cookie o intestazione), quindi da `Accept-Language`, e la salva in `Astro.locals.intlayer`. Le pagine pre-renderizzate utilizzano solo l'URL, poiché vengono renderizzate una volta sola per ciascun visitatore.
+
+I Lit custom element vengono importati tramite uno `<script>` client e inseriti nel body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -267,8 +272,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Locale risolta dal middleware (es. /it/about -> 'it')
+const { locale } = useLocale();
+
+// Contenuto del dizionario 'lit-demo' per questa locale
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -327,6 +335,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` espone anche `locale`, `defaultLocale` e `availableLocales` ai tuoi middleware ed endpoint. Passa una locale o un selettore come secondo argomento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) per sovrascrivere la locale della richiesta per una singola chiamata.
+
 > **Nota sulla configurazione del routing:**
 > La struttura delle directory che utilizzi dipende dall'impostazione `middleware.routing` in `intlayer.config.ts`:
 >
@@ -483,10 +493,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -586,21 +596,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilatore Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila la tua applicazione per trasformare i tuoi componenti ed estrarre il contenuto
 
 ```bash packageManager="npm"
 npm run build # Oppure npm run dev

package/docs/it/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-20
 title: "Astro + Preact i18n - Guida completa per tradurre la tua applicazione"
 description: "Niente più i18next. La guida 2026 per creare un'applicazione Astro + Preact multilingue (i18n). Traduci con agenti AI e ottimizza la dimensione del bundle, SEO e prestazioni."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Utilizzo degli hook useIntlayer / useLocale di astro-intlayer nella pagina Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aggiornare l'uso dell'API useIntlayer di Solid all'accesso diretto alle proprietà"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   Il pacchetto core che fornisce strumenti i18n per la gestione della configurazione, le traduzioni, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md), la transpilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md).
 
 - **astro-intlayer**
-  Include il plugin di integrazione Astro per collegare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre al middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire i reindirizzamenti degli URL.
+  Include il plugin di integrazione Astro per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware che risolve la locale di ciascuna richiesta in `Astro.locals.intlayer`, e gli hook `useIntlayer` / `useDictionary` / `useLocale`. Lo stesso percorso di importazione risolve all'implementazione server nel frontmatter `.astro` e a quella client (supportata da `vanilla-intlayer`) nei blocchi `<script>`.
 
 - **preact**
   Il pacchetto core di Preact - un'alternativa veloce e leggera a React.
@@ -243,19 +246,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Utilizzare il contenuto in Astro">
 
-Puoi consumare i dizionari direttamente nei tuoi file `.astro` utilizzando gli helper core esportati da `intlayer`. Dovresti anche aggiungere metadati SEO (come hreflang e link canonici) a ogni pagina e introdurre una Preact island per i contenuti interattivi lato client.
+Utilizza i tuoi dizionari nei file `.astro` con gli hook esportati da `astro-intlayer`. Condividono le firme di `react-intlayer`: `useIntlayer("key")` restituisce il contenuto di un dizionario e `useLocale()` la locale corrente, senza alcun argomento da passare.
+
+La locale proviene dal middleware `astro-intlayer`, che l'integrazione registra prima del tuo `src/middleware.ts`. La risolve per ogni richiesta, dal prefisso dell'URL, poi dalla locale memorizzata dal client (cookie o intestazione), quindi da `Accept-Language`, e la salva in `Astro.locals.intlayer`. Le pagine pre-renderizzate utilizzano solo l'URL, poiché vengono renderizzate una volta sola per ciascun visitatore.
+
+Dovresti anche aggiungere metadati SEO (come hreflang e link canonici) a ogni pagina e introdurre una Preact island per i contenuti interattivi lato client.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/ReactIsland";
 
@@ -265,8 +270,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Locale risolta dal middleware (es. /it/about -> 'it')
+const { locale } = useLocale();
+
+// Contenuto del dizionario 'app' per questa locale
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +330,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` espone anche `locale`, `defaultLocale` e `availableLocales` ai tuoi middleware ed endpoint. Passa una locale o un selettore come secondo argomento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) per sovrascrivere la locale della richiesta per una singola chiamata.
+
 > **Nota sulla configurazione del routing:**
 > La struttura delle directory che utilizzi dipende dall'impostazione `middleware.routing` in `intlayer.config.ts`:
 >
@@ -438,10 +448,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -541,21 +551,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilatore Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila la tua applicazione per trasformare i tuoi componenti ed estrarre il contenuto
 
 ```bash packageManager="npm"
 npm run build # Oppure npm run dev
@@ -722,6 +718,13 @@ Sì: [forme plurali](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
 
 Attraverso l'[editor visivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md), che gira sulla tua infrastruttura e permette a chiunque di modificare il testo sul posto nell'app in esecuzione, o il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md), che esternalizza il contenuto così può cambiare senza un deployment.
 
+</Question>
+<Question title="Qual è il costo dell'editor visuale? È eccessivo se non ne ho bisogno?">
+
+L'[editor visuale di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) ha un **costo pari a zero** sulla tua applicazione se non viene configurato. La logica aggiuntiva viene caricata solo se esplicitamente abilitata e necessaria.
+
+Se abilitato, l'impatto è estremamente ridotto (+5 KB, caricato dinamicamente solo quando attivato) poiché la maggior parte della logica è gestita dal server editor su [app.intlayer.org](https://app.intlayer.org) o tramite il pacchetto `intlayer-editor`. Se hai solo bisogno di una soluzione di traduzione semplice senza editing visuale, Intlayer non aggiunge alcun overhead alla tua applicazione.
+
 </Question>
 <Question title="Intlayer è gratuito e open source?">