@intlayer/docs 5.5.8

package/it/packages/intlayer-editor/index.md

@@ -0,0 +1,113 @@
+# intlayer-editor: Pacchetto NPM per utilizzare l'editor visivo di Intlayer
+
+**Intlayer** è una suite di pacchetti progettati specificamente per sviluppatori JavaScript. È compatibile con framework come React, React e Express.js.
+
+Il pacchetto **`intlayer-editor`** è un pacchetto NPM che integra l'editor visivo di Intlayer nel tuo progetto React.
+
+## Come funziona l'Editor di Intlayer
+
+L'editor di Intlayer consente di interagire con il dizionario remoto di Intlayer. Può essere installato lato client e trasformare la tua applicazione in un editor simile a un CMS per gestire i contenuti del tuo sito in tutte le lingue configurate.
+
+![Interfaccia Editor di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_ui.png)
+
+## Installazione
+
+Installa il pacchetto necessario utilizzando il tuo gestore di pacchetti preferito:
+
+```bash packageManager="npm"
+npm install intlayer-editor
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer-editor
+```
+
+```bash packageManager="yarn"
+yarn add intlayer-editor
+```
+
+### Configurazione
+
+Nel file di configurazione di Intlayer, puoi personalizzare le impostazioni dell'editor:
+
+```typescript
+const config: IntlayerConfig = {
+  // ... altre impostazioni di configurazione
+  editor: {
+    enabled: process.env.INTLAYER_ENABLED === "true", // Se false, l'editor è inattivo e non può essere accessibile.
+    // Client ID e client secret sono richiesti per abilitare l'editor.
+    // Permettono di identificare l'utente che sta modificando il contenuto.
+    // Possono essere ottenuti creando un nuovo client nella Dashboard di Intlayer - Progetti (https://intlayer.org/dashboard/projects).
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+```
+
+> Se non hai un client ID e un client secret, puoi ottenerli creando un nuovo client nella [Dashboard di Intlayer - Progetti](https://intlayer.org/dashboard/projects).
+
+> Per vedere tutti i parametri disponibili, consulta la [documentazione di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/configuration.md)
+
+Il pacchetto `intlayer-editor` si basa su Intlayer ed è disponibile per applicazioni JavaScript, come React (Create React App), Vite + React e Next.js.
+
+Per maggiori dettagli su come installare il pacchetto, consulta la sezione pertinente qui sotto:
+
+### Integrazione con Next.js
+
+Per l'integrazione con Next.js, consulta la [guida alla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_nextjs_15.md).
+
+### Integrazione con Create React App
+
+Per l'integrazione con Create React App, consulta la [guida alla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_create_react_app.md)
+
+### Integrazione con Vite + React
+
+Per l'integrazione con Vite + React, consulta la [guida alla configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_vite+react.md)
+
+### Esempio di integrazione
+
+Per integrare l'editor visivo di Intlayer nel tuo progetto React, segui questi passaggi:
+
+- Importa il componente dell'editor di Intlayer nella tua applicazione React:
+
+  ```tsx fileName="src/App.jsx"
+  import { IntlayerEditorProvider } from "intlayer-editor";
+  import { IntlayerProvider } from "react-intlayer";
+
+  export default function App() {
+    return (
+      <IntlayerProvider>
+        <IntlayerEditorProvider>
+          <IntlayerEditor>{/* Contenuto della tua App qui */}</IntlayerEditor>
+        </IntlayerEditorProvider>
+      </IntlayerProvider>
+    );
+  }
+  ```
+
+- Importa gli stili dell'editor di Intlayer nella tua applicazione Next.js:
+
+  ```tsx fileName="src/app/[locale]/layout.jsx"
+  import { IntlayerEditorStyles } from "intlayer-editor";
+
+  export default async function RootLayout({ children, params }) {
+    const { locale } = await params;
+    return (
+      <IntlayerClientProvider locale={locale}>
+        <IntlayerEditorProvider>
+          <html lang={locale}>
+            <body className={IntlayerEditorStyles}>{children}</body>
+          </html>
+        </IntlayerEditorProvider>
+      </IntlayerClientProvider>
+    );
+  }
+  ```
+
+## Utilizzo dell'Editor
+
+Quando l'editor è installato, abilitato e avviato, puoi visualizzare ogni campo indicizzato da Intlayer passando il cursore sopra il contenuto.
+
+![Passando il cursore sopra il contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/assets/intlayer_editor_hover_content.png)
+
+Se il tuo contenuto è evidenziato, puoi tenerlo premuto a lungo per visualizzare il cassetto di modifica.

package/it/packages/lynx-intlayer/index.md

@@ -0,0 +1,58 @@
+**Intlayer** è una suite di pacchetti progettata specificamente per sviluppatori JavaScript. È compatibile con framework come React, React e Express.js.
+
+**Il pacchetto `lynx-intlayer`** ti consente di internazionalizzare la tua applicazione Vite. Include il plugin Metro per configurare le variabili d'ambiente nel [bundler Lynx](https://lynxjs.org/index.html).
+
+## Perché Internazionalizzare la Tua Applicazione Lynx?
+
+Internazionalizzare la tua applicazione Lynx è essenziale per servire efficacemente un pubblico globale. Consente alla tua applicazione di fornire contenuti e messaggi nella lingua preferita di ciascun utente. Questa capacità migliora l'esperienza utente e amplia la portata della tua applicazione rendendola più accessibile e rilevante per persone di diversi background linguistici.
+
+## Configurazione
+
+Il pacchetto `lynx-intlayer` funziona perfettamente con il [`pacchetto react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/react-intlayer/index.md) e il [`pacchetto intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/intlayer/index.md). Consulta la documentazione pertinente per maggiori informazioni.
+
+## Installazione
+
+Installa il pacchetto necessario utilizzando il tuo gestore di pacchetti preferito:
+
+```bash packageManager="npm"
+npm install lynx-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add lynx-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add lynx-intlayer
+```
+
+## Esempio di utilizzo
+
+Ecco un esempio di come includere i plugin nella configurazione di Vite.
+
+```ts
+// lynx.config.ts
+import { defineConfig } from "@lynx-js/rspeedy";
+import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
+
+export default defineConfig({
+  plugins: [
+    // ... altri plugin
+    pluginIntlayerLynx(),
+  ],
+});
+```
+
+## Padroneggiare l'internazionalizzazione della tua applicazione Vite
+
+Intlayer offre molte funzionalità per aiutarti a internazionalizzare la tua applicazione Vite.
+
+**Per saperne di più su queste funzionalità, consulta la guida [Internazionalizzazione (i18n) di React con Intlayer e Lynx](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_lynx+react.md) per le applicazioni Lynx.**
+
+## Leggi di più su Intlayer
+
+- [Sito Web di Intlayer](https://intlayer.org)
+- [Documentazione di Intlayer](https://intlayer.org/doc)
+- [GitHub di Intlayer](https://github.com/aymericzip/intlayer)
+
+- [Fai le tue domande alla nostra documentazione intelligente](https://intlayer.org/docchat)

package/it/packages/next-intlayer/index.md

@@ -0,0 +1,267 @@
+# next-intlayer: Pacchetto NPM per internazionalizzare (i18n) un'applicazione Next.js
+
+**Intlayer** è una suite di pacchetti progettata specificamente per sviluppatori JavaScript. È compatibile con framework come React, Next.js ed Express.js.
+
+**Il pacchetto `next-intlayer`** consente di internazionalizzare la tua applicazione Next.js. Fornisce provider di contesto e hook per l'internazionalizzazione di Next.js. Inoltre, include il plugin Next.js per integrare Intlayer con [Webpack](https://webpack.js.org/) o [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), nonché middleware per rilevare la lingua preferita dell'utente, gestire i cookie e gestire il reindirizzamento degli URL.
+
+## Perché internazionalizzare la tua applicazione Next.js?
+
+Internazionalizzare la tua applicazione Next.js è essenziale per servire efficacemente un pubblico globale. Permette alla tua applicazione di fornire contenuti e messaggi nella lingua preferita di ogni utente. Questa capacità migliora l'esperienza utente e amplia la portata della tua applicazione rendendola più accessibile e rilevante per persone di diversi background linguistici.
+
+## Perché integrare Intlayer?
+
+- **Gestione dei contenuti basata su JavaScript**: Sfrutta la flessibilità di JavaScript per definire e gestire i tuoi contenuti in modo efficiente.
+- **Ambiente Type-Safe**: Utilizza TypeScript per garantire che tutte le definizioni dei tuoi contenuti siano precise e prive di errori.
+- **File di contenuto integrati**: Mantieni le tue traduzioni vicine ai rispettivi componenti, migliorando la manutenibilità e la chiarezza.
+
+## Installazione
+
+Installa il pacchetto necessario utilizzando il tuo gestore di pacchetti preferito:
+
+```bash packageManager="npm"
+npm install next-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add next-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add next-intlayer
+```
+
+## Esempio di utilizzo
+
+Con Intlayer, puoi dichiarare i tuoi contenuti in modo strutturato ovunque nel tuo codice.
+
+Per impostazione predefinita, Intlayer esegue la scansione dei file con estensione `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`.
+
+> Puoi modificare l'estensione predefinita impostando la proprietà `contentDir` nel [file di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/configuration.md).
+
+```bash codeFormat="typescript"
+.
+├── intlayer.config.ts
+└── src
+    └── components
+        ├── ClientComponent
+        │   ├── index.content.ts
+        │   └── index.tsx
+        └── ServerComponent
+            ├── index.content.ts
+            └── index.tsx
+```
+
+```bash codeFormat="esm"
+.
+├── intlayer.config.mjs
+└── src
+    └── components
+        ├── ClientComponent
+        │   ├── index.content.mjs
+        │   └── index.mjx
+        └── ServerComponent
+            ├── index.content.mjs
+            └── index.mjx
+```
+
+```bash codeFormat="commonjs"
+.
+├── intlayer.config.cjs
+└── src
+    └── components
+        ├── ClientComponent
+        │   ├── index.content.cjs
+        │   └── index.cjx
+        └── ServerComponent
+            ├── index.content.cjs
+            └── index.cjx
+```
+
+### Dichiarare i tuoi contenuti
+
+`next-intlayer` è progettato per funzionare con il pacchetto [`intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/intlayer/index.md). `intlayer` è un pacchetto che consente di dichiarare i tuoi contenuti ovunque nel tuo codice. Converte le dichiarazioni di contenuti multilingue in dizionari strutturati che si integrano perfettamente nella tua applicazione.
+
+Ecco un esempio di dichiarazione di contenuti:
+
+```tsx fileName="src/ClientComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      it: "Ciao Mondo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+} satisfies Dictionary;
+
+export default clientComponentContent;
+```
+
+```jsx fileName="src/ClientComponent/index.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      it: "Ciao Mondo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+};
+
+export default clientComponentContent;
+```
+
+```jsx fileName="src/ClientComponent/index.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+      it: "Ciao Mondo",
+    }),
+    numberOfCar: enu({
+      "<-1": "Meno di meno una macchina",
+      "-1": "Meno una macchina",
+      "0": "Nessuna macchina",
+      "1": "Una macchina",
+      ">5": "Alcune macchine",
+      ">19": "Molte macchine",
+    }),
+  },
+};
+
+module.exports = clientComponentContent;
+```
+
+```json fileName="src/ClientComponent/index.content.json" codeFormat="json"
+{
+  "key": "client-component",
+  "content": {
+    "myTranslatedContent": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Hello World",
+        "fr": "Bonjour le monde",
+        "es": "Hola Mundo",
+        "it": "Ciao Mondo"
+      }
+    },
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Meno di meno una macchina",
+        "-1": "Meno una macchina",
+        "0": "Nessuna macchina",
+        "1": "Una macchina",
+        ">5": "Alcune macchine",
+        ">19": "Molte macchine"
+      }
+    }
+  }
+}
+```
+
+### Utilizzare i contenuti nel tuo codice
+
+Una volta dichiarati i tuoi contenuti, puoi utilizzarli nel tuo codice. Ecco un esempio di come utilizzare i contenuti in un componente React:
+
+```tsx {4,7} fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+export const ClientComponentExample: FC = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Creare dichiarazione di contenuti correlati
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+```jsx {3,6} fileName="src/components/ClientComponentExample.mjx" codeFormat="esm"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+const ClientComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Creare dichiarazione di contenuti correlati
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+```jsx {3,6} fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+"use client";
+
+const { useIntlayer } = require("next-intlayer");
+
+const ClientComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("client-component"); // Creare dichiarazione di contenuti correlati
+
+  return (
+    <div>
+      <p>{myTranslatedContent}</p>
+    </div>
+  );
+};
+```
+
+## Padroneggiare l'internazionalizzazione della tua applicazione Next.js
+
+Intlayer offre molte funzionalità per aiutarti a internazionalizzare la tua applicazione Next.js. Ecco alcune delle caratteristiche principali:
+
+- **Internazionalizzazione dei componenti server**: Intlayer consente di internazionalizzare i tuoi componenti server nello stesso modo dei componenti client. Ciò significa che puoi utilizzare le stesse dichiarazioni di contenuti per entrambi i componenti client e server.
+- **Middleware per il rilevamento della lingua**: Intlayer fornisce middleware per rilevare la lingua preferita dell'utente. Questo middleware viene utilizzato per rilevare la lingua preferita dell'utente e reindirizzarlo all'URL appropriato come specificato nella [configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/it/configuration.md).
+- **Internazionalizzazione dei metadati**: Intlayer fornisce un modo per internazionalizzare i tuoi metadati, come il titolo della tua pagina, utilizzando la funzione `generateMetadata` fornita da Next.js. Puoi utilizzare la funzione `getTranslation` per tradurre i tuoi metadati.
+- **Internazionalizzazione di sitemap.xml e robots.txt**: Intlayer consente di internazionalizzare i tuoi file sitemap.xml e robots.txt. Puoi utilizzare la funzione `getMultilingualUrls` per generare URL multilingue per la tua sitemap.
+- **Internazionalizzazione degli URL**: Intlayer consente di internazionalizzare i tuoi URL utilizzando la funzione `getMultilingualUrls`. Questa funzione genera URL multilingue per la tua sitemap.
+
+**Per saperne di più su queste funzionalità, consulta la guida [Internazionalizzazione (i18n) di Next.js con Intlayer e Next.js 15 App Router](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_with_nextjs_15.md).**
+
+## Funzioni fornite dal pacchetto `next-intlayer`
+
+Il pacchetto `next-intlayer` fornisce anche alcune funzioni per aiutarti a internazionalizzare la tua applicazione.
+
+- [`t()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/next-intlayer/t.md)
+- [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/next-intlayer/useIntlayer.md)
+- [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/next-intlayer/useDictionary.md)
+- [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/next-intlayer/useLocale.md)
+- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/it/packages/next-intlayer/useIntlayerAsync.md)