@intlayer/docs 5.5.8

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

@@ -0,0 +1,237 @@
+# Integrazione Next.js: Documentazione del Hook `useIntlayer`
+
+Il hook `useIntlayer` è progettato per le applicazioni Next.js per recuperare e gestire contenuti localizzati in modo efficiente. Questa documentazione si concentrerà su come utilizzare il hook nei progetti Next.js, garantendo pratiche di localizzazione corrette.
+
+## Importare `useIntlayer` in Next.js
+
+A seconda che si stia lavorando su componenti lato client o lato server in un'applicazione Next.js, è possibile importare il hook `useIntlayer` come segue:
+
+- **Componente Client:**
+
+  ```typescript codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer"; // Utilizzato nei componenti lato client
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer"; // Utilizzato nei componenti lato client
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer"); // Utilizzato nei componenti lato client
+  ```
+
+- **Componente Server:**
+
+  ```tsx codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer/server"; // Utilizzato nei componenti lato server
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer/server"; // Utilizzato nei componenti lato server
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer/server"); // Utilizzato nei componenti lato server
+  ```
+
+## Parametri
+
+1. **`key`**: Un identificatore stringa per la chiave del dizionario da cui si desidera recuperare il contenuto.
+2. **`locale`** (opzionale): Una specifica localizzazione da utilizzare. Se omesso, il hook utilizza per impostazione predefinita la localizzazione impostata nel contesto client o server.
+
+## File del Dizionario
+
+È fondamentale che tutte le chiavi dei contenuti siano definite all'interno dei file di dichiarazione dei contenuti per prevenire errori di runtime e garantire la sicurezza dei tipi. Questo approccio facilita anche l'integrazione con TypeScript per la validazione durante la compilazione.
+
+Le istruzioni per configurare i file di dichiarazione dei contenuti sono disponibili [qui](https://github.com/aymericzip/intlayer/blob/main/docs/it/dictionary/get_started.md).
+
+## Esempio di Utilizzo in Next.js
+
+Ecco come è possibile implementare il hook `useIntlayer` all'interno di una pagina Next.js per caricare dinamicamente contenuti localizzati in base alla localizzazione corrente dell'applicazione:
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
+import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";
+
+const HomePage: NextPageIntlayer = async ({ params }) => {
+  const { locale } = await params;
+
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/pages/[locale]/index.csx" codeFormat="esm"
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+const {
+  ClientComponentExample,
+} = require("@components/ClientComponentExample");
+const {
+  ServerComponentExample,
+} = require("@components/ServerComponentExample");
+const { IntlayerClientProvider } = require("next-intlayer");
+const { useIntlayer } = require("next-intlayer/server");
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
+"use-client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ClientComponentExample: FC = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.msx" codeFormat="esm"
+"use-client";
+
+import { useIntlayer } from "next-intlayer";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+"use-client";
+
+const { useIntlayer } = require("next-intlayer");
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer/server";
+
+const ServerComponentExample: FC = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
+import { useIntlayer } from "next-intlayer/server";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.csx" codeFormat="commonjs"
+const { useIntlayer } = require("next-intlayer/server");
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+## Gestione della Localizzazione degli Attributi
+
+Per localizzare attributi come `alt`, `title`, `href`, `aria-label`, ecc., assicurarsi di fare riferimento correttamente al contenuto:
+
+```tsx
+<img src={content.image.src.value} alt={content.image.alt.value} />
+```
+
+## Ulteriori Informazioni
+
+- **Editor Visivo Intlayer**: Scopri come utilizzare l'editor visivo per una gestione più semplice dei contenuti [qui](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_visual_editor.md).
+
+Questa documentazione descrive l'uso del hook `useIntlayer` specificamente negli ambienti Next.js, fornendo una soluzione robusta per gestire la localizzazione nelle applicazioni Next.js.

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

@@ -0,0 +1,211 @@
+# Integrazione Next.js: Documentazione del hook `useIntlayerAsync`
+
+Il hook `useIntlayerAsync` estende la funzionalità di `useIntlayer` non solo restituendo dizionari pre-renderizzati, ma anche recuperando aggiornamenti in modo asincrono, rendendolo ideale per applicazioni che aggiornano frequentemente i loro contenuti localizzati dopo il rendering iniziale.
+
+## Panoramica
+
+- **Caricamento Asincrono dei Dizionari:**  
+  Sul lato client, `useIntlayerAsync` restituisce inizialmente il dizionario della lingua pre-renderizzato (come `useIntlayer`) e successivamente recupera e unisce asincronamente eventuali nuovi dizionari remoti disponibili.
+- **Gestione dello Stato di Progresso:**  
+  Il hook fornisce anche uno stato `isLoading`, che indica quando un dizionario remoto è in fase di recupero. Questo consente agli sviluppatori di mostrare indicatori di caricamento o stati scheletrici per un'esperienza utente più fluida.
+
+## Configurazione dell'Ambiente
+
+Intlayer fornisce un sistema di Content Source Management (CSM) senza testa che consente ai non sviluppatori di gestire e aggiornare i contenuti delle applicazioni senza problemi. Utilizzando il dashboard intuitivo di Intlayer, il tuo team può modificare testi localizzati, immagini e altre risorse senza modificare direttamente il codice. Questo semplifica il processo di gestione dei contenuti, favorisce la collaborazione e garantisce che gli aggiornamenti possano essere effettuati rapidamente e facilmente.
+
+Per iniziare con Intlayer, è necessario registrarsi e ottenere un token di accesso su [https://intlayer.org/dashboard](https://intlayer.org/dashboard). Una volta ottenute le credenziali, aggiungile al file di configurazione come mostrato di seguito:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+export default {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+} satisfies IntlayerConfig;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { type IntlayerConfig } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+module.exports = config;
+```
+
+Dopo aver configurato le credenziali, puoi caricare un nuovo dizionario di lingua su Intlayer eseguendo:
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key
+```
+
+Questo comando carica i tuoi dizionari di contenuti iniziali, rendendoli disponibili per il recupero asincrono e la modifica tramite la piattaforma Intlayer.
+
+## Importazione di `useIntlayerAsync` in Next.js
+
+Poiché `useIntlayerAsync` è destinato ai componenti **client-side**, lo importerai dallo stesso punto di ingresso client di `useIntlayer`:
+
+```tsx codeFormat="typescript"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="esm"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="commonjs"
+"use client";
+
+const { useIntlayerAsync } = require("next-intlayer");
+```
+
+Assicurati che il file di importazione sia annotato con `"use client"` nella parte superiore, se stai utilizzando il Router App di Next.js con componenti server e client separati.
+
+## Parametri
+
+1. **`key`**:  
+   **Tipo**: `DictionaryKeys`  
+   La chiave del dizionario utilizzata per identificare il blocco di contenuto localizzato. Questa chiave deve essere definita nei file di dichiarazione dei contenuti.
+
+2. **`locale`** (opzionale):  
+   **Tipo**: `Locales`  
+   La lingua specifica che desideri targetizzare. Se omessa, il hook utilizza la lingua dal contesto client.
+
+3. **`isRenderEditor`** (opzionale, predefinito `true`):  
+   **Tipo**: `boolean`  
+   Determina se il contenuto deve essere pronto per il rendering con la sovrapposizione dell'editor Intlayer. Se impostato su `false`, i dati del dizionario restituiti escluderanno le funzionalità specifiche dell'editor.
+
+## Valore Restituito
+
+Il hook restituisce un oggetto dizionario contenente contenuti localizzati indicizzati da `key` e `locale`. Include anche un booleano `isLoading` che indica se un dizionario remoto è attualmente in fase di recupero.
+
+## Esempio di Utilizzo in Next.js
+
+### Esempio di Componente Client-Side
+
+```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import { useEffect, type FC } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+export const AsyncClientComponentExample: FC = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Il contenuto è in caricamento...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
+"use client";
+
+import { useEffect } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Il contenuto è in caricamento...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
+"use client";
+
+const { useEffect } = require("react");
+const { useIntlayerAsync } = require("next-intlayer");
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("Il contenuto è in caricamento...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+**Punti Chiave:**
+
+- Al rendering iniziale, `title` e `description` provengono dal dizionario della lingua pre-renderizzato.
+- Mentre `isLoading` è `true`, viene effettuata una richiesta remota in background per recuperare un dizionario aggiornato.
+- Una volta completato il recupero, `title` e `description` vengono aggiornati con i contenuti più recenti e `isLoading` torna a `false`.
+
+## Gestione della Localizzazione degli Attributi
+
+Come con `useIntlayer`, puoi recuperare valori di attributi localizzati per varie proprietà HTML (ad esempio, `alt`, `title`, `aria-label`):
+
+```tsx
+<img src={title.image.src.value} alt={title.image.alt.value} />
+```
+
+## File dei Dizionari
+
+Tutte le chiavi di contenuto devono essere definite nei file di dichiarazione dei contenuti per garantire la sicurezza dei tipi e prevenire errori a runtime. Questi file abilitano la validazione TypeScript, assicurandoti di fare sempre riferimento a chiavi e lingue esistenti.
+
+Le istruzioni per configurare i file di dichiarazione dei contenuti sono disponibili [qui](https://github.com/aymericzip/intlayer/blob/main/docs/it/dictionary/get_started.md).
+
+## Ulteriori Informazioni
+
+- **Editor Visivo Intlayer:**  
+  Integra con l'editor visivo Intlayer per gestire e modificare i contenuti direttamente dall'interfaccia utente. Maggiori dettagli [qui](https://github.com/aymericzip/intlayer/blob/main/docs/it/intlayer_visual_editor.md).
+
+---
+
+**In sintesi**, `useIntlayerAsync` è un potente hook client-side progettato per migliorare l'esperienza utente e mantenere freschi i contenuti combinando dizionari pre-renderizzati con aggiornamenti asincroni. Sfruttando `isLoading` e le dichiarazioni di contenuti basate su TypeScript, puoi integrare senza problemi contenuti dinamici e localizzati nelle tue applicazioni Next.js.

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

@@ -0,0 +1,105 @@
+# Integrazione Next.js: Documentazione del hook `useLocale` per `next-intlayer`
+
+Questa sezione offre una documentazione dettagliata sul hook `useLocale` progettato per applicazioni Next.js all'interno della libreria `next-intlayer`. È progettato per gestire i cambiamenti di lingua e il routing in modo efficiente.
+
+## Importare `useLocale` in Next.js
+
+Per utilizzare il hook `useLocale` nella tua applicazione Next.js, importalo come mostrato di seguito:
+
+```javascript
+import { useLocale } from "next-intlayer"; // Utilizzato per gestire le lingue e il routing in Next.js
+```
+
+## Utilizzo
+
+Ecco come implementare il hook `useLocale` all'interno di un componente Next.js:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Lingua corrente: {locale}</h1>
+      <p>Lingua predefinita: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+"use client";
+
+import { Locales } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Lingua corrente: {locale}</h1>
+      <p>Lingua predefinita: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
+"use client";
+
+const { Locales } = require("intlayer");
+const { useLocale } = require("next-intlayer");
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>Lingua corrente: {locale}</h1>
+      <p>Lingua predefinita: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+## Parametri e Valori Restituiti
+
+Quando invochi il hook `useLocale`, restituisce un oggetto contenente le seguenti proprietà:
+
+- **`locale`**: La lingua corrente impostata nel contesto React.
+- **`defaultLocale`**: La lingua principale definita nella configurazione.
+- **`availableLocales`**: Un elenco di tutte le lingue disponibili come definito nella configurazione.
+- **`setLocale`**: Una funzione per cambiare la lingua dell'applicazione e aggiornare l'URL di conseguenza. Si occupa delle regole di prefisso, se aggiungere o meno la lingua al percorso in base alla configurazione. Utilizza `useRouter` da `next/navigation` per funzioni di navigazione come `push` e `refresh`.
+- **`pathWithoutLocale`**: Una proprietà calcolata che restituisce il percorso senza la lingua. È utile per confrontare gli URL. Ad esempio, se la lingua corrente è `fr`, e l'url `fr/my_path`, il percorso senza lingua è `/my_path`. Utilizza `usePathname` da `next/navigation` per ottenere il percorso corrente.
+
+## Conclusione
+
+Il hook `useLocale` di `next-intlayer` è uno strumento cruciale per gestire le lingue nelle applicazioni Next.js. Offre un approccio integrato per adattare la tua applicazione a più lingue gestendo lo storage delle lingue, la gestione dello stato e le modifiche agli URL in modo fluido.

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

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/preact-intlayer/index.md