@intlayer/docs 5.7.6 → 5.7.8

package/docs/it/packages/react-intlayer/useIntlayerAsync.md

@@ -1,252 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: Documentazione Hook useIntlayerAsync | react-intlayer
-description: Scopri come utilizzare l'hook useIntlayerAsync per il pacchetto react-intlayer
-keywords:
-  - useIntlayerAsync
-  - dizionario
-  - chiave
-  - Intlayer
-  - Internazionalizzazione
-  - Documentazione
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-intlayer
-  - useIntlayerAsync
----
-
-# Integrazione React: Documentazione Hook `useIntlayerAsync`
-
-L'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 il loro contenuto localizzato dopo il rendering iniziale.
-
-## Panoramica
-
-- **Caricamento asincrono del dizionario:**  
-  Al montaggio iniziale, `useIntlayerAsync` restituisce prima qualsiasi dizionario locale pre-caricato o incluso staticamente (proprio come farebbe `useIntlayer`) e poi recupera e unisce in modo asincrono eventuali nuovi dizionari remoti disponibili.
-- **Gestione dello stato di progresso:**  
-  L'hook fornisce anche uno stato `isLoading`, che indica quando un dizionario remoto è in fase di recupero. Questo permette agli sviluppatori di mostrare indicatori di caricamento o stati scheletro per un'esperienza utente più fluida.
-
-## Configurazione dell'Ambiente
-
-Intlayer fornisce un sistema headless di Content Source Management (CSM) che permette anche ai non sviluppatori di gestire e aggiornare i contenuti dell'applicazione in modo semplice e fluido. Utilizzando la dashboard intuitiva di Intlayer, il tuo team può modificare testi localizzati, immagini e altre risorse senza dover intervenire direttamente sul 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:
-
-1. **Registrati e ottieni un token di accesso** su [https://intlayer.org/dashboard](https://intlayer.org/dashboard).
-2. **Aggiungi le credenziali al tuo file di configurazione:**  
-   Nel tuo progetto React, configura il client Intlayer con le tue credenziali:
-
-   ```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;
-   ```
-
-3. **Inviare un nuovo dizionario di localizzazione a Intlayer:**
-
-   ```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.
-
-## Importare `useIntlayerAsync` in React
-
-Nei tuoi componenti React, importa `useIntlayerAsync`:
-
-```ts codeFormat="typescript"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="esm"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="commonjs"
-const { useIntlayerAsync } = require("react-intlayer");
-```
-
-## Parametri
-
-1. **`key`**:  
-   **Tipo**: `DictionaryKeys`  
-   La chiave del dizionario utilizzata per identificare il blocco di contenuto localizzato. Questa chiave dovrebbe essere definita nei tuoi file di dichiarazione dei contenuti.
-
-2. **`locale`** (opzionale):  
-   **Tipo**: `Locales`  
-   La locale specifica che vuoi utilizzare. Se omessa, il hook utilizza la locale dal contesto Intlayer corrente.
-
-3. **`isRenderEditor`** (opzionale, predefinito a `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 di ritorno
-
-Il hook restituisce un oggetto dizionario contenente il contenuto localizzato indicizzato da `key` e `locale`. Include anche un booleano `isLoading` che indica se un dizionario remoto è attualmente in fase di recupero.
-
-## Esempio di utilizzo in un componente React
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
-import { useEffect, type FC } from "react";
-import { useIntlayerAsync } from "react-intlayer";
-
-export const ComponentExample: FC = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto si sta caricando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Caricamento…</h1>
-          <p>Attendere mentre il contenuto viene aggiornato.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
-import { useEffect } from "react";
-import { useIntlayerAsync } from "react-intlayer";
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto è in caricamento...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Caricamento…</h1>
-          <p>Attendere prego mentre il contenuto si aggiorna.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
-const { useEffect } = require("react");
-const { useIntlayerAsync } = require("react-intlayer");
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto si sta caricando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>Caricamento…</h1>
-          <p>Attendere prego mentre il contenuto si aggiorna.</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-**Punti Chiave:**
-
-- Al primo rendering, `title` e `description` provengono dal dizionario locale pre-caricato o incorporato staticamente.
-- Mentre `isLoading` è `true`, una richiesta in background recupera un dizionario aggiornato.
-- Una volta completato il recupero, `title` e `description` vengono aggiornati con il contenuto più recente, e `isLoading` torna a `false`.
-
-## Gestione della Localizzazione degli Attributi
-
-Puoi anche recuperare valori localizzati per vari attributi HTML (ad esempio, `alt`, `title`, `aria-label`):
-
-```jsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## File del Dizionario
-
-Tutte le chiavi di contenuto devono essere definite nei tuoi file di dichiarazione del contenuto per garantire la sicurezza dei tipi e prevenire errori a runtime. Questi file abilitano la validazione TypeScript, assicurando che tu faccia sempre riferimento a chiavi e localizzazioni esistenti.
-
-Istruzioni per la configurazione dei file di dichiarazione dei contenuti sono disponibili [qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md).
-
-## Ulteriori Informazioni
-
-- **Editor Visuale Intlayer:**  
-  Integra l'editor visuale Intlayer per gestire e modificare i contenuti direttamente dall'interfaccia utente. Maggiori dettagli [qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
-
----
-
-**In sintesi**, `useIntlayerAsync` è un potente hook di React progettato per migliorare l'esperienza utente e mantenere la freschezza dei contenuti unendo dizionari pre-renderizzati o pre-caricati con aggiornamenti asincroni dei dizionari. Sfruttando `isLoading` e le dichiarazioni di contenuto basate su TypeScript, puoi integrare senza soluzione di continuità contenuti dinamici e localizzati nelle tue applicazioni React.
-
-## Cronologia del documento
-
-- 5.5.10 - 2025-06-29: Inizio cronologia

package/docs/ja/packages/next-intlayer/useIntlayerAsync.md

@@ -1,237 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: useIntlayerAsync フック ドキュメント | next-intlayer
-description: next-intlayer パッケージの useIntlayerAsync フックの使い方をご覧ください
-keywords:
-  - useIntlayerAsync
-  - 辞書
-  - キー
-  - Intlayer
-  - 国際化
-  - ドキュメント
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - next-intlayer
-  - useIntlayerAsync
----
-
-# Next.js 統合: `useIntlayerAsync` フック ドキュメント
-
-`useIntlayerAsync` フックは、プリレンダリングされた辞書を返すだけでなく、更新を非同期に取得する機能を `useIntlayer` から拡張しており、初回レンダリング後にローカライズされたコンテンツを頻繁に更新するアプリケーションに最適です。
-
-## 概要
-
-- **非同期辞書読み込み:**  
-  クライアント側では、`useIntlayerAsync` はまずプリレンダリングされたロケール辞書を返し（`useIntlayer` と同様）、その後に非同期で新たに利用可能なリモート辞書を取得してマージします。
-- **進行状態管理:**  
-  このフックは、リモート辞書が取得中であることを示す `isLoading` 状態も提供します。これにより、開発者は読み込みインジケーターやスケルトン状態を表示して、よりスムーズなユーザー体験を実現できます。
-
-## 環境設定
-
-Intlayerは、非開発者でもアプリケーションのコンテンツをシームレスに管理・更新できるヘッドレスコンテンツソース管理（CSM）システムを提供します。Intlayerの直感的なダッシュボードを使用することで、チームはコードを直接変更することなく、ローカライズされたテキスト、画像、その他のリソースを編集できます。これにより、コンテンツ管理プロセスが効率化され、コラボレーションが促進され、迅速かつ容易に更新が行えるようになります。
-
-Intlayerを始めるには、まず[ダッシュボード](https://intlayer.org/dashboard)で登録し、アクセストークンを取得する必要があります。認証情報を取得したら、以下のように設定ファイルに追加してください。
-
-```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;
-```
-
-資格情報を設定した後、次のコマンドを実行して新しいロケール辞書をIntlayerにプッシュできます：
-
-```bash
-npx intlayer dictionary push -d my-first-dictionary-key
-```
-
-このコマンドは初期のコンテンツ辞書をアップロードし、Intlayerプラットフォームを通じて非同期に取得および編集できるようにします。
-
-## Next.jsでの`useIntlayerAsync`のインポート
-
-`useIntlayerAsync`は**クライアントサイド**コンポーネント向けのため、`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");
-```
-
-Next.jsのApp Routerでサーバーコンポーネントとクライアントコンポーネントが分かれている場合は、インポートするファイルの先頭に必ず `"use client"` の注釈を付けてください。
-
-## パラメーター
-
-1. **`key`**:  
-   **型**: `DictionaryKeys`  
-   ローカライズされたコンテンツブロックを識別するための辞書キーです。このキーはコンテンツ宣言ファイルで定義されている必要があります。
-
-2. **`locale`**（省略可能）:  
-   **型**: `Locales`  
-   対象とする特定のロケールです。省略した場合、フックはクライアントコンテキストのロケールを使用します。
-
-3. **`isRenderEditor`**（省略可能、デフォルトは `true`）:  
-    **型**: `boolean`  
-   コンテンツがIntlayerエディターのオーバーレイでレンダリング可能な状態にするかどうかを決定します。`false`に設定すると、返される辞書データにはエディター固有の機能が含まれません。
-
-## 戻り値
-
-このフックは、`key`と`locale`でキー付けされたローカライズされたコンテンツを含む辞書オブジェクトを返します。また、遠隔辞書が現在取得中かどうかを示す`isLoading`というブール値も含まれます。
-
-## Next.jsでの使用例
-
-### クライアントサイドコンポーネントの例
-
-```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("コンテンツを読み込み中...");
-    }
-  }, [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("コンテンツを読み込み中...");
-    }
-  }, [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("コンテンツを読み込み中です...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-**重要なポイント:**
-
-- 初回レンダリング時、`title` と `description` は事前レンダリングされたロケール辞書から取得されます。
-- `isLoading` が `true` の間は、バックグラウンドでリモートリクエストが行われ、更新された辞書が取得されます。
-- フェッチが完了すると、`title` と `description` は最新のコンテンツに更新され、`isLoading` は `false` に戻ります。
-
-## 属性のローカライズ処理
-
-`useIntlayer` と同様に、さまざまなHTML属性（例：`alt`、`title`、`aria-label`）のローカライズされた値を取得できます：
-
-```tsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## 辞書ファイル
-
-すべてのコンテンツキーは、型の安全性を確保し実行時エラーを防ぐために、コンテンツ宣言ファイルで定義する必要があります。これらのファイルはTypeScriptの検証を可能にし、常に存在するキーとロケールを参照していることを保証します。
-
-コンテンツ宣言ファイルの設定手順は[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)でご覧いただけます。
-
-## さらに詳しく
-
-- **Intlayer ビジュアルエディター:**  
-  Intlayer ビジュアルエディターと統合することで、UIから直接コンテンツの管理や編集が可能になります。詳細は[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)をご覧ください。
-
----
-
-**まとめ**、`useIntlayerAsync` は、事前レンダリングされた辞書と非同期の辞書更新を組み合わせることで、ユーザー体験を向上させ、コンテンツの鮮度を維持するために設計された強力なクライアントサイドフックです。`isLoading` と TypeScript ベースのコンテンツ宣言を活用することで、Next.js アプリケーションに動的でローカライズされたコンテンツをシームレスに統合できます。
-
-## ドキュメント履歴
-
-- 5.5.10 - 2025-06-29: 履歴の初期化