@intlayer/docs 5.5.8

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

@@ -0,0 +1,326 @@
+# Documentazione: Funzione `t` in `next-intlayer`
+
+La funzione `t` nel pacchetto `next-intlayer` è uno strumento fondamentale per l'internazionalizzazione inline all'interno della tua applicazione Next.js. Ti consente di definire traduzioni direttamente nei tuoi componenti, rendendo semplice la visualizzazione di contenuti localizzati in base alla lingua corrente.
+
+---
+
+## Panoramica
+
+La funzione `t` viene utilizzata per fornire traduzioni per diverse lingue direttamente nei tuoi componenti. Passando un oggetto contenente traduzioni per ogni lingua supportata, `t` restituisce la traduzione appropriata in base al contesto della lingua corrente nella tua applicazione Next.js.
+
+---
+
+## Caratteristiche principali
+
+- **Traduzioni inline**: Ideale per testi rapidi e inline che non richiedono una dichiarazione di contenuto separata.
+- **Selezione automatica della lingua**: Restituisce automaticamente la traduzione corrispondente alla lingua corrente.
+- **Supporto TypeScript**: Fornisce sicurezza dei tipi e completamento automatico quando utilizzato con TypeScript.
+- **Integrazione semplice**: Funziona perfettamente sia nei componenti client che server in Next.js.
+
+---
+
+## Firma della funzione
+
+```typescript
+t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string
+```
+
+### Parametri
+
+- `translations`: Un oggetto in cui le chiavi sono codici lingua (ad esempio, `en`, `fr`, `es`) e i valori sono le stringhe tradotte corrispondenti.
+
+### Restituisce
+
+- Una stringa che rappresenta il contenuto tradotto per la lingua corrente.
+
+---
+
+## Esempi di utilizzo
+
+### Utilizzo di `t` in un componente client
+
+Assicurati di includere la direttiva `'use client';` all'inizio del file del tuo componente quando utilizzi `t` in un componente lato client.
+
+```tsx codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { t } from "next-intlayer";
+
+export const ClientComponentExample: FC = () => (
+  <p>
+    {t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido d un ejemplo de componente cliente",
+    })}
+  </p>
+);
+```
+
+```javascript codeFormat="esm"
+import { t } from "next-intlayer";
+
+const ClientComponentExample = () => (
+  <p>
+    {t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido d un esempio di componente cliente",
+    })}
+  </p>
+);
+```
+
+```javascript codeFormat="commonjs"
+const { t } = require("next-intlayer");
+
+const ClientComponentExample = () => (
+  <p>
+    {t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido d un esempio di componente cliente",
+    })}
+  </p>
+);
+```
+
+### Utilizzo di `t` in un componente server
+
+```tsx codeFormat="typescript"
+import type { FC } from "react";
+import { t } from "next-intlayer/server";
+
+export const ServerComponentExample: FC = () => (
+  <p>
+    {t({
+      en: "This is the content of a server component example",
+      fr: "Ceci est le contenu d'un exemple de composant serveur",
+      es: "Este es el contenido de un esempio di componente server",
+    })}
+  </p>
+);
+```
+
+```javascript codeFormat="esm"
+import { t } from "next-intlayer/server";
+
+const ServerComponentExample = () => (
+  <p>
+    {t({
+      en: "This is the content of a server component example",
+      fr: "Ceci est le contenu d'un exemple de composant serveur",
+      es: "Este es el contenido de un esempio di componente server",
+    })}
+  </p>
+);
+```
+
+```javascript codeFormat="commonjs"
+const { t } = require("next-intlayer/server");
+
+const ServerComponentExample = () => (
+  <p>
+    {t({
+      en: "This is the content of a server component example",
+      fr: "Ceci est le contenu d'un exemple de composant serveur",
+      es: "Este es il contenuto di un esempio di componente server",
+    })}
+  </p>
+);
+```
+
+### Traduzioni inline negli attributi
+
+La funzione `t` è particolarmente utile per traduzioni inline negli attributi JSX.
+Quando localizzi attributi come `alt`, `title`, `href` o `aria-label`, puoi utilizzare `t` direttamente all'interno dell'attributo.
+
+```jsx
+<button
+  aria-label={t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+  })}
+>
+  {t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+  })}
+  <img
+    src="/path/to/image"
+    alt={t({
+      en: "A beautiful scenery",
+      fr: "Un beau paysage",
+      es: "Un hermoso paisaje",
+    })}
+  />
+</button>
+```
+
+---
+
+## Argomenti avanzati
+
+### Integrazione con TypeScript
+
+La funzione `t` è sicura per i tipi quando utilizzata con TypeScript, garantendo che tutte le lingue richieste siano fornite.
+
+```typescript codeFormat="typescript"
+import type { IConfigLocales } from "intlayer";
+import { t } from "next-intlayer";
+
+const translations: IConfigLocales<string> = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="esm"
+import type { IConfigLocales } from "intlayer";
+import { t } from "next-intlayer";
+
+/** @type {import('next-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t } = require("next-intlayer");
+
+/** @type {import('next-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+};
+
+const greeting = t(translations);
+```
+
+### Rilevamento della lingua e contesto
+
+In `next-intlayer`, la lingua corrente è gestita tramite i provider di contesto: `IntlayerClientProvider` e `IntlayerServerProvider`. Assicurati che questi provider avvolgano i tuoi componenti e che la prop `locale` sia passata correttamente.
+
+#### Esempio:
+
+```tsx codeFormat="typescript"
+import type { FC } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+
+const Page: FC<{ locale: Locales }> = ({ locale }) => (
+  <IntlayerServerProvider locale={locale}>
+    <IntlayerClientProvider locale={locale}>
+      {/* I tuoi componenti qui */}
+    </IntlayerClientProvider>
+  </IntlayerServerProvider>
+);
+```
+
+```javascript codeFormat="esm"
+import { IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+
+const Page = ({ locale }) => (
+  <IntlayerServerProvider locale={locale}>
+    <IntlayerClientProvider locale={locale}>
+      {/* I tuoi componenti qui */}
+    </IntlayerClientProvider>
+  </IntlayerServerProvider>
+);
+```
+
+```javascript codeFormat="commonjs"
+const { IntlayerClientProvider } = require("next-intlayer");
+const { IntlayerServerProvider } = require("next-intlayer/server");
+
+const Page = ({ locale }) => (
+  <IntlayerServerProvider locale={locale}>
+    <IntlayerClientProvider locale={locale}>
+      {/* I tuoi componenti qui */}
+    </IntlayerClientProvider>
+  </IntlayerServerProvider>
+);
+```
+
+---
+
+## Errori comuni e risoluzione dei problemi
+
+### `t` restituisce undefined o una traduzione errata
+
+- **Causa**: La lingua corrente non è impostata correttamente o la traduzione per la lingua corrente manca.
+- **Soluzione**:
+  - Verifica che `IntlayerClientProvider` o `IntlayerServerProvider` siano configurati correttamente con la lingua appropriata.
+  - Assicurati che il tuo oggetto di traduzioni includa tutte le lingue necessarie.
+
+### Traduzioni mancanti in TypeScript
+
+- **Causa**: L'oggetto delle traduzioni non soddisfa le lingue richieste, causando errori in TypeScript.
+- **Soluzione**: Usa il tipo `IConfigLocales` per garantire la completezza delle traduzioni.
+
+```typescript codeFormat="typescript"
+const translations: IConfigLocales<string> = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // Mancanza di 'es' causerà un errore in TypeScript [!code error]
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="esm"
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // Mancanza di 'es' causerà un errore in TypeScript [!code error]
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t } = require("next-intlayer");
+
+/** @type {import('next-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // Mancanza di 'es' causerà un errore in TypeScript [!code error]
+};
+
+const text = t(translations);
+```
+
+---
+
+## Consigli per un utilizzo efficace
+
+1. **Usa `t` per traduzioni inline semplici**: Ideale per tradurre piccoli pezzi di testo direttamente nei tuoi componenti.
+2. **Preferisci `useIntlayer` per contenuti strutturati**: Per traduzioni più complesse e riutilizzo dei contenuti, definisci il contenuto nei file di dichiarazione e usa `useIntlayer`.
+3. **Fornitura coerente della lingua**: Assicurati che la tua lingua sia fornita in modo coerente in tutta l'applicazione tramite i provider appropriati.
+4. **Sfrutta TypeScript**: Usa i tipi TypeScript per individuare traduzioni mancanti e garantire la sicurezza dei tipi.
+
+---
+
+## Conclusione
+
+La funzione `t` in `next-intlayer` è uno strumento potente e conveniente per gestire traduzioni inline nelle tue applicazioni Next.js. Integrandola efficacemente, migliori le capacità di internazionalizzazione della tua app, offrendo un'esperienza migliore agli utenti di tutto il mondo.
+
+Per un utilizzo più dettagliato e funzionalità avanzate, consulta la [documentazione di next-intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_visual_editor.md).
+
+---
+
+**Nota**: Ricorda di configurare correttamente i tuoi `IntlayerClientProvider` e `IntlayerServerProvider` per garantire che la lingua corrente venga passata correttamente ai tuoi componenti. Questo è cruciale affinché la funzione `t` restituisca le traduzioni corrette.

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

@@ -0,0 +1,242 @@
+# Integrazione React: Documentazione del Hook `useDictionary`
+
+Questa sezione fornisce una guida dettagliata sull'utilizzo dell'hook `useDictionary` all'interno delle applicazioni React, consentendo una gestione efficiente dei contenuti localizzati senza un editor visivo.
+
+## Importare `useDictionary` in React
+
+L'hook `useDictionary` può essere integrato nelle applicazioni React importandolo in base al contesto:
+
+- **Componente Client:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "next-intlayer"; // Utilizzato nei componenti React lato client
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "next-intlayer"; // Utilizzato nei componenti React lato client
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("next-intlayer"); // Utilizzato nei componenti React lato client
+  ```
+
+- **Componente Server:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "next-intlayer/server"; // Utilizzato nei componenti React lato server
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "next-intlayer/server"; // Utilizzato nei componenti React lato server
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("next-intlayer/server"); // Utilizzato nei componenti React lato server
+  ```
+
+## Parametri
+
+L'hook accetta due parametri:
+
+1. **`dictionary`**: Un oggetto dizionario dichiarato contenente contenuti localizzati per chiavi specifiche.
+2. **`locale`** (opzionale): La lingua desiderata. Se non specificata, utilizza la lingua del contesto corrente.
+
+## Dizionario
+
+Tutti gli oggetti dizionario devono essere dichiarati in file di contenuto strutturati per garantire la sicurezza dei tipi ed evitare errori a runtime. Puoi trovare le istruzioni di configurazione [qui](https://github.com/aymericzip/intlayer/blob/main/docs/it/dictionary/get_started.md). Ecco un esempio di dichiarazione di contenuto:
+
+```typescript fileName="component.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+    }),
+  },
+} satisfies Dictionary;
+
+export default exampleContent;
+```
+
+```javascript fileName="component.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+    }),
+  },
+};
+
+export default exampleContent;
+```
+
+```javascript fileName="component.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const exampleContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un esempio di componente cliente",
+    }),
+  },
+};
+
+module.exports = exampleContent;
+```
+
+## Esempio di Utilizzo in un Componente Client React
+
+Di seguito un esempio di utilizzo dell'hook `useDictionary` in un componente React:
+
+```tsx fileName="ClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer";
+import clientComponentExampleContent from "./component.content";
+
+const ClientComponentExample: FC = () => {
+  const { title, content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ClientComponentExample.mjs" codeFormat="esm"
+"use client";
+
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer";
+import exampleContent from "./component.content";
+
+const ClientComponentExample: FC = () => {
+  const { title, content } = useDictionary(exampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ClientComponentExample.cjs" codeFormat="commonjs"
+"use client";
+
+const { useDictionary } = require("next-intlayer");
+const exampleContent = require("./component.content");
+
+const ClientComponentExample = () => {
+  const { title, content } = useDictionary(exampleContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+## Esempio di Utilizzo in un Componente Server React
+
+Se utilizzi l'hook `useDictionary` al di fuori del `IntlayerServerProvider`, la lingua deve essere fornita esplicitamente come parametro durante il rendering del componente:
+
+```tsx fileName="ServerComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample: FC = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ServerComponentExample.mjs" codeFormat="esm"
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="ServerComponentExample.cjs" codeFormat="commonjs"
+import { useDictionary } from "next-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample = () => {
+  const { content } = useDictionary(clientComponentExampleContent);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+## Note sugli Attributi
+
+A differenza delle integrazioni che utilizzano editor visivi, attributi come `buttonTitle.value` non si applicano qui. Accedi direttamente alle stringhe localizzate come dichiarato nel tuo contenuto.
+
+```jsx
+<button title={content.title}>{content.content}</button>
+```
+
+## Suggerimenti Aggiuntivi
+
+- **Sicurezza dei Tipi**: Utilizza sempre `Dictionary` per definire i tuoi dizionari per garantire la sicurezza dei tipi.
+- **Aggiornamenti di Localizzazione**: Quando aggiorni i contenuti, assicurati che tutte le lingue siano coerenti per evitare traduzioni mancanti.
+
+Questa documentazione si concentra sull'integrazione dell'hook `useDictionary`, fornendo un approccio semplificato alla gestione dei contenuti localizzati senza fare affidamento sulle funzionalità di editor visivi.