@intlayer/docs 6.1.5 → 6.1.6

package/docs/it/intlayer_with_astro.md

@@ -0,0 +1,246 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-10-03
+title: Iniziare con Intlayer in Astro
+description: Scopri come aggiungere l'internazionalizzazione (i18n) alla tua applicazione Vite e React usando Intlayer. Segui questa guida per rendere la tua app multilingue.
+keywords:
+  - Internazionalizzazione
+  - Documentazione
+  - Intlayer
+  - Vite
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - astro
+applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+---
+
+# Iniziare con l'internazionalizzazione (i18n) usando Intlayer e Astro
+
+Consulta il [Template dell'Applicazione](https://github.com/aymericzip/intlayer-astro-template) su GitHub.
+
+## Cos'è Intlayer?
+
+**Intlayer** è una libreria innovativa e open-source per l'internazionalizzazione (i18n) progettata per semplificare il supporto multilingue nelle moderne applicazioni web.
+
+Con Intlayer, puoi:
+
+- **Gestire facilmente le traduzioni** utilizzando dizionari dichiarativi a livello di componente.
+- **Localizzare dinamicamente i metadata**, le rotte e i contenuti.
+- **Garantire il supporto a TypeScript** con tipi autogenerati, migliorando l'autocompletamento e il rilevamento degli errori.
+- **Beneficiare di funzionalità avanzate**, come il rilevamento e il cambio dinamico della lingua.
+
+---
+
+## Guida passo-passo per configurare Intlayer in Astro
+
+### Passo 1: Installa le dipendenze
+
+Installa i pacchetti necessari usando il tuo gestore di pacchetti:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+# Optional: add React island support
+npm install react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer astro-intlayer
+# Opzionale: aggiungi il supporto per React island
+pnpm add react react-dom react-intlayer @astrojs/react
+```
+
+```bash packageManager="yarn"
+yarn add intlayer astro-intlayer
+# Opzionale: aggiungi il supporto per React island
+yarn add react react-dom react-intlayer @astrojs/react
+```
+
+- **intlayer**
+  Il pacchetto principale che fornisce strumenti di internazionalizzazione per la gestione della configurazione, la traduzione, la [dichiarazione dei contenuti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md), la traspilazione e i [comandi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_cli.md).
+
+- **astro-intlayer**
+  Include il plugin di integrazione Astro per integrare Intlayer con il [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), oltre a middleware per rilevare la lingua preferita dall'utente, gestire i cookie e gestire il reindirizzamento degli URL.
+
+### Passo 2: Configurazione del tuo progetto
+
+Crea un file di configurazione per configurare le lingue della tua applicazione:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Le tue altre lingue
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+> Attraverso questo file di configurazione, puoi impostare URL localizzati, il reindirizzamento del middleware, i nomi dei cookie, la posizione e l'estensione delle tue dichiarazioni di contenuto, disabilitare i log di Intlayer nella console e altro ancora. Per un elenco completo dei parametri disponibili, consulta la [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md).
+
+### Passo 3: Integra Intlayer nella tua configurazione Astro
+
+Aggiungi il plugin intlayer nella tua configurazione.
+
+```typescript fileName="astro.config.ts"
+// @ts-check
+
+import { intlayer } from "astro-intlayer";
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [intlayer()],
+});
+```
+
+> Il plugin di integrazione `intlayer()` per Astro viene utilizzato per integrare Intlayer con Astro. Garantisce la creazione dei file di dichiarazione del contenuto e li monitora in modalità sviluppo. Definisce le variabili d'ambiente di Intlayer all'interno dell'applicazione Astro. Inoltre, fornisce alias per ottimizzare le prestazioni.
+
+### Passo 4: Dichiara il tuo contenuto
+
+Crea e gestisci le tue dichiarazioni di contenuto per memorizzare le traduzioni:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+> Le tue dichiarazioni di contenuto possono essere definite ovunque nella tua applicazione non appena sono incluse nella directory `contentDir` (di default, `./src`). E devono corrispondere all'estensione del file di dichiarazione del contenuto (di default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+
+> Per maggiori dettagli, consulta la [documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md).
+
+### Passo 5: Usa il tuo contenuto in Astro
+
+Puoi utilizzare i dizionari direttamente nei file `.astro` usando gli helper core esportati da `intlayer`.
+
+```astro fileName="src/pages/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+import appContent from "../app.content";
+
+const { title } = getIntlayer('app');
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <h1>{title}</h1>
+  </body>
+</html>
+```
+
+### Passo 6: Routing localizzato
+
+Crea un segmento di route dinamico per servire pagine localizzate, ad esempio `src/pages/[locale]/index.astro`:
+
+```astro fileName="src/pages/[locale]/index.astro"
+<!-- astro -->
+---
+import { getIntlayer } from "intlayer";
+
+const { title } = getIntlayer('app');
+---
+
+<h1>{title}</h1>
+```
+
+L'integrazione con Astro aggiunge un middleware Vite durante lo sviluppo che aiuta con il routing consapevole della localizzazione e le definizioni dell'ambiente. Puoi comunque collegarti tra le localizzazioni usando la tua logica o funzioni di utilità come `getLocalizedUrl` da `intlayer`.
+
+### Passo 7: Continua a usare il tuo framework preferito
+
+Continua a usare il tuo framework preferito per costruire la tua applicazione.
+
+- 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)
+
+### Configurare TypeScript
+
+Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Le tue configurazioni TypeScript esistenti
+  "include": [
+    // ... Le tue configurazioni TypeScript esistenti
+    ".intlayer/**/*.ts", // Includi i tipi generati automaticamente
+  ],
+}
+```
+
+### Configurazione Git
+
+Si consiglia di ignorare i file generati da Intlayer. Questo ti permette di evitare di committarli nel tuo repository Git.
+
+Per fare ciò, puoi aggiungere le seguenti istruzioni al tuo file `.gitignore`:
+
+```plaintext
+# Ignora i file generati da Intlayer
+.intlayer
+```
+
+### Estensione VS Code
+
+Per migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'**Estensione ufficiale Intlayer per VS Code**.
+
+[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Questa estensione offre:
+
+- **Completamento automatico** per le chiavi di traduzione.
+- **Rilevamento errori in tempo reale** per traduzioni mancanti.
+- **Anteprime inline** del contenuto tradotto.
+- **Azioni rapide** per creare e aggiornare facilmente le traduzioni.
+
+Per maggiori dettagli su come utilizzare l'estensione, consulta la [documentazione dell'Estensione Intlayer per VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
+### Vai oltre
+
+Per andare oltre, puoi implementare l'[editor visuale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md) o esternalizzare i tuoi contenuti utilizzando il [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md).
+
+---
+
+## Cronologia della documentazione
+
+| Versione | Data       | Modifiche                                                      |
+| -------- | ---------- | -------------------------------------------------------------- |
+| 6.2.0    | 2025-10-03 | Aggiornamento per integrazione Astro, configurazione, utilizzo |

package/docs/it/intlayer_with_create_react_app.md

@@ -1094,9 +1094,10 @@ Applicando queste modifiche, la tua applicazione:
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
 Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente.
 
 ```json5 fileName="tsconfig.json"

package/docs/it/intlayer_with_express.md

@@ -368,9 +368,9 @@ Per impostazione predefinita, `express-intlayer` interpreta l'intestazione `Acce
 
 `express-intlayer` sfrutta le potenti capacità di TypeScript per migliorare il processo di internazionalizzazione. Il typing statico di TypeScript garantisce che ogni chiave di traduzione sia considerata, riducendo il rischio di traduzioni mancanti e migliorando la manutenibilità.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che i tipi autogenerati (di default in ./types/intlayer.d.ts) siano inclusi nel tuo file tsconfig.json.
 

package/docs/it/intlayer_with_nestjs.md

@@ -219,9 +219,9 @@ Per impostazione predefinita, `express-intlayer` interpreterà l'intestazione `A
 
 `express-intlayer` sfrutta le potenti capacità di TypeScript per migliorare il processo di internazionalizzazione. Il typing statico di TypeScript garantisce che ogni chiave di traduzione sia considerata, riducendo il rischio di traduzioni mancanti e migliorando la manutenibilità.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che i tipi generati automaticamente (di default in ./types/intlayer.d.ts) siano inclusi nel tuo file tsconfig.json.
 

package/docs/it/intlayer_with_nextjs_14.md

@@ -1224,9 +1224,9 @@ Integrando questo componente `Link` in tutta la tua applicazione, mantieni un'es
 
 Intlayer utilizza l'augmentazione dei moduli per ottenere i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che la configurazione di TypeScript includa i tipi autogenerati.
 

package/docs/it/intlayer_with_nextjs_15.md

@@ -1479,9 +1479,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.
 

package/docs/it/intlayer_with_nextjs_page_router.md

@@ -1433,9 +1433,9 @@ yarn add @intlayer/swc --save-dev
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.
 

package/docs/it/intlayer_with_nuxt.md

@@ -755,9 +755,9 @@ module.exports = aboutMetaContent;
 
 Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Assicurati che la tua configurazione di TypeScript includa i tipi generati automaticamente.
 

package/docs/it/intlayer_with_react_native+expo.md

@@ -148,28 +148,25 @@ module.exports = (async () => {
 
 ## Passo 4: Aggiungi il provider Intlayer
 
-Per mantenere sincronizzata la lingua dell'utente in tutta l'applicazione, è necessario avvolgere il componente root con il componente `IntlayerProvider` proveniente da `react-intlayer`.
+Per mantenere sincronizzata la lingua dell'utente in tutta l'applicazione, devi avvolgere il componente radice con il componente `IntlayerProvider` da `react-intlayer-native`.
 
-Inoltre, è necessario aggiungere la funzione `intlayerPolyfill` al file `index.js` per garantire che Intlayer possa funzionare correttamente.
+> Assicurati di utilizzare il provider da `react-native-intlayer` invece di `react-intlayer`. L'export da `react-native-intlayer` include polyfills per l'API web.
 
 ```tsx fileName="app/_layout.tsx" codeFormat="typescript"
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
-import { IntlayerProviderContent } from "react-intlayer";
-import { intlayerPolyfill } from "react-native-intlayer";
+import { IntlayerProvider } from "react-native-intlayer";
 import { type FC } from "react";
 
-intlayerPolyfill();
-
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout: FC = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };
 
@@ -179,20 +176,17 @@ export default RootLayout;
 ```jsx fileName="app/_layout.mjx" codeFormat="esm"
 import { Stack } from "expo-router";
 import { getLocales } from "expo-localization";
-import { IntlayerProviderContent } from "react-intlayer";
-import { intlayerPolyfill } from "react-native-intlayer";
-
-intlayerPolyfill();
+import { IntlayerProvider } from "react-native-intlayer";
 
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };
 
@@ -202,22 +196,18 @@ export default RootLayout;
 ```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
 const { Stack } = require("expo-router");
 const { getLocales } = require("expo-localization");
-const { IntlayerProviderContent } = require("react-intlayer");
-const { intlayerPolyfill } = require("react-native-intlayer");
-
-// Applichiamo il polyfill di Intlayer per garantire la compatibilità
-intlayerPolyfill();
+const { IntlayerProvider } = require("react-native-intlayer");
 
 // Funzione per ottenere la lingua del dispositivo
 const getDeviceLocale = () => getLocales()[0]?.languageTag;
 
 const RootLayout = () => {
   return (
-    <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
+    <IntlayerProvider defaultLocale={getDeviceLocale()}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       </Stack>
-    </IntlayerProviderContent>
+    </IntlayerProvider>
   );
 };