@intlayer/docs 6.1.5 → 6.1.6

package/docs/it/intlayer_with_vite+preact.md

@@ -1059,38 +1059,38 @@ const App = () => (
 module.exports = App;
 ```
 
-In parallelo, puoi anche utilizzare il `intlayerMiddlewarePlugin` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, verrà effettuato un reindirizzamento alla locale predefinita.
+In parallelo, puoi anche utilizzare il `intlayerMiddleware` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, verrà effettuato un reindirizzamento alla locale predefinita.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const preact = require("@preact/preset-vite");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1636,9 +1636,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 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 TypeScript includa i tipi generati automaticamente.
 

package/docs/it/intlayer_with_vite+react.md

@@ -1008,38 +1008,38 @@ const App = () => (
 );
 ```
 
-In parallelo, puoi anche utilizzare il `intlayerMiddlewarePlugin` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, verrà effettuato un reindirizzamento alla locale predefinita.
+In parallelo, puoi anche utilizzare il `intlayerMiddleware` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, verrà effettuato un reindirizzamento alla locale predefinita.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const react = require("@vitejs/plugin-react-swc");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1597,9 +1597,9 @@ Integrando questo componente `Link` in tutta la tua applicazione, mantieni un'es
 
 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.
 
@@ -1615,9 +1615,11 @@ Integrando questo componente `Link` in tutta la tua applicazione, mantieni un'es
 
 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)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.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)
+
 
 Assicurati che la tua configurazione TypeScript includa i tipi generati automaticamente.
 

package/docs/it/intlayer_with_vite+vue.md

@@ -691,46 +691,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-Parallelamente, puoi anche utilizzare il `intlayerMiddlewarePlugin` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, effettuerà un reindirizzamento alla locale predefinita.
+Parallelamente, puoi anche utilizzare il `intlayerMiddleware` per aggiungere il routing lato server alla tua applicazione. Questo plugin rileverà automaticamente la locale corrente basandosi sull'URL e imposterà il cookie della locale appropriata. Se non viene specificata alcuna locale, il plugin determinerà la locale più adatta in base alle preferenze linguistiche del browser dell'utente. Se non viene rilevata alcuna locale, effettuerà un reindirizzamento alla locale predefinita.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1035,9 +1035,9 @@ const { myMarkdownContent } = useIntlayer("my-component");
 
 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/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Estensione Ufficiale per VS Code
-description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
+description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra i contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
 keywords:
   - Estensione VS Code
   - Intlayer
@@ -23,96 +23,40 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) è l'estensione ufficiale di Visual Studio Code per **Intlayer**, progettata per migliorare l'esperienza dello sviluppatore quando si lavora con contenuti localizzati nei tuoi progetti.
 
-![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Link all'estensione: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funzionalità
 
-### Navigazione Istantanea
+![Riempi dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Supporto Vai alla Definizione** – Usa `⌘ + Click` (Mac) o `Ctrl + Click` (Windows/Linux) su una chiave `useIntlayer` per aprire immediatamente il file di contenuto corrispondente.  
-**Integrazione Perfetta** – Funziona senza problemi con i progetti **react-intlayer** e **next-intlayer**.  
-**Supporto Multilingue** – Supporta contenuti localizzati in diverse lingue.  
-**Integrazione con VS Code** – Si integra fluidamente con la navigazione e la palette dei comandi di VS Code.
+- **Navigazione Istantanea** – Passa rapidamente al file di contenuto corretto cliccando su una chiave `useIntlayer`.
+- **Riempi Dizionari** – Riempi i dizionari con i contenuti del tuo progetto.
 
-### Comandi per la Gestione dei Dizionari
+![Elenca comandi](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gestisci i tuoi dizionari di contenuti direttamente da VS Code:
+- **Accesso facile ai comandi Intlayer** – Costruisci, invia, scarica, riempi, testa i dizionari di contenuti con facilità.
 
-- **Costruisci Dizionari** – Genera file di contenuto basati sulla struttura del tuo progetto.
-- **Carica Dizionari** – Carica l'ultimo contenuto del dizionario nel tuo repository.
-- **Scarica Dizionari** – Sincronizza l'ultimo contenuto del dizionario dal tuo repository al tuo ambiente locale.
-- **Riempi Dizionari** – Popola i dizionari con contenuti dal tuo progetto.
-- **Testa Dizionari** – Identifica traduzioni mancanti o incomplete.
+![Crea file di contenuto](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Generatore di Dichiarazioni di Contenuto
+- **Generatore di dichiarazioni di contenuto** – Crea file di contenuto del dizionario in vari formati (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Genera facilmente file di dizionario strutturati in diversi formati:
+![Test dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Se stai lavorando su un componente, genererà per te il file `.content.{ts,tsx,js,jsx,mjs,cjs,json}`.
+- **Test dizionari** – Testa i dizionari per traduzioni mancanti.
 
-Esempio di componente:
+![Ricostruisci dizionario](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Mantieni i tuoi dizionari aggiornati** – Mantieni i tuoi dizionari aggiornati con i contenuti più recenti del tuo progetto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-File generato in formato TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Formati disponibili:
-
-- **TypeScript (`.ts`)**
-- **Modulo ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Scheda Intlayer (Barra delle Attività)
+![Scheda Intlayer (Barra attività)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Apri la scheda Intlayer cliccando sull'icona Intlayer nella barra delle attività di VS Code. Contiene due viste:
+- **Scheda Intlayer (Barra attività)** – Naviga e cerca nei dizionari da una scheda laterale dedicata con barra degli strumenti e azioni contestuali (Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa, Crea file).
 
-- **Ricerca**: Una barra di ricerca live per filtrare rapidamente i dizionari e i loro contenuti. La digitazione aggiorna i risultati istantaneamente.
-- **Dizionari**: Una vista ad albero dei tuoi ambienti/progetti, delle chiavi del dizionario e dei file che contribuiscono con voci. Puoi:
-  - Cliccare su un file per aprirlo nell'editor.
-  - Usare la barra degli strumenti per eseguire azioni: Build, Pull, Push, Fill, Refresh, Test e Create Dictionary File.
-  - Usare il menu contestuale per azioni specifiche dell'elemento:
-    - Su un dizionario: Pull o Push
-    - Su un file: Fill Dictionary
-  - Quando cambi editor, l'albero rivelerà il file corrispondente se appartiene a un dizionario.
+## Uso
 
-## Installazione
-
-Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
-
-1. Apri **VS Code**.
-2. Vai al **Marketplace delle Estensioni**.
-3. Cerca **"Intlayer"**.
-4. Clicca su **Installa**.
-
-## Utilizzo
-
-### Navigazione Rapida
+### Navigazione rapida
 
 1. Apri un progetto che utilizza **react-intlayer**.
 2. Individua una chiamata a `useIntlayer()`, come:
@@ -122,62 +66,57 @@ Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
    ```
 
 3. **Command-click** (`⌘+Click` su macOS) o **Ctrl+Click** (su Windows/Linux) sulla chiave (ad esempio, `"app"`).
-4. VS Code aprirà automaticamente il file del dizionario corrispondente, ad esempio `src/app.content.ts`.
-
-### Gestione dei Dizionari di Contenuto
+4. VS Code aprirà automaticamente il file dizionario corrispondente, ad esempio, `src/app.content.ts`.
 
-### Scheda Intlayer (Barra delle Attività)
+### Scheda Intlayer (Barra attività)
 
 Usa la scheda laterale per navigare e gestire i dizionari:
 
-- Apri l'icona Intlayer nella Barra delle Attività.
-- In **Ricerca**, digita per filtrare dizionari e voci in tempo reale.
-- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruire, Scaricare, Caricare, Riempire, Aggiornare, Testare e Creare File Dizionario. Clic destro per azioni contestuali (Scarica/Carica sui dizionari, Riempi sui file). Il file attualmente aperto nell’editor si rivela automaticamente nell’albero quando applicabile.
+- Apri l'icona Intlayer nella Barra attività.
+- In **Cerca**, digita per filtrare dizionari e voci in tempo reale.
+- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa e Crea file dizionario. Clic destro per azioni contestuali (Scarica/Invia sui dizionari, Riempi sui file). Il file attualmente aperto nell'editor si evidenzia automaticamente nell'albero quando applicabile.
 
-#### Costruire Dizionari
+### Accesso ai comandi
 
-Genera tutti i file di contenuto dei dizionari con:
+Puoi accedere ai comandi dalla **Command Palette**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Cerca **Costruisci Dizionari** ed esegui il comando.
-
-#### Caricare Dizionari
-
-Carica l’ultimo contenuto dei dizionari:
-
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Carica Dizionari**.
-3. Seleziona i dizionari da caricare e conferma.
-
-#### Scaricare Dizionari
+- **Costruisci Dizionari**
+- **Invia Dizionari**
+- **Scarica Dizionari**
+- **Riempi Dizionari**
+- **Testa Dizionari**
+- **Crea File Dizionario**
 
-Sincronizza l’ultimo contenuto del dizionario:
+### Caricamento delle Variabili d'Ambiente
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Scarica Dizionari**.
-3. Scegli i dizionari da scaricare.
+Intlayer consiglia di memorizzare le chiavi API AI, così come l'ID client e il segreto di Intlayer, nelle variabili d'ambiente.
 
-#### Riempire Dizionari
+L'estensione può caricare le variabili d'ambiente dal tuo workspace per eseguire i comandi Intlayer con il contesto corretto.
 
-Riempi i dizionari con contenuti dal tuo progetto:
+- **Ordine di caricamento (per priorità)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Non distruttivo**: i valori esistenti in `process.env` non vengono sovrascritti.
+- **Ambito**: i file vengono risolti dalla directory base configurata (predefinita alla radice del workspace).
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Riempi Dizionari**.
-3. Esegui il comando per popolare i dizionari.
+#### Selezione dell'ambiente attivo
 
-#### Testare Dizionari
+- **Palette dei Comandi**: apri la palette ed esegui `Intlayer: Select Environment`, quindi scegli l'ambiente (ad esempio, `development`, `staging`, `production`). L'estensione tenterà di caricare il primo file disponibile nella lista di priorità sopra indicata e mostrerà una notifica come “Caricato env da .env.<env>.local”.
+- **Impostazioni**: vai su `Impostazioni → Estensioni → Intlayer`, e imposta:
+  - **Ambiente**: il nome dell'ambiente usato per risolvere i file `.env.<env>*`.
+  - (Opzionale) **File Env**: un percorso esplicito a un file `.env`. Quando fornito, ha la precedenza sulla lista dedotta.
 
-Valida i dizionari e trova le traduzioni mancanti:
+#### Monorepo e directory personalizzate
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Testa Dizionari**.
-3. Rivedi i problemi segnalati e correggili se necessario.
+Se i tuoi file `.env` si trovano al di fuori della radice dello spazio di lavoro, imposta la **Directory Base** in `Impostazioni → Estensioni → Intlayer`. Il loader cercherà i file `.env` relativi a quella directory.
 
 ## Cronologia Documentazione
 
-| Versione | Data       | Modifiche         |
-| -------- | ---------- | ----------------- |
-| 5.5.10   | 2025-06-29 | Inizio cronologia |
+| Versione | Data       | Modifiche                           |
+| -------- | ---------- | ----------------------------------- |
+| 6.1.5    | 2025-09-30 | Aggiunta gif demo                   |
+| 6.1.0    | 2025-09-24 | Aggiunta sezione selezione ambiente |
+| 6.0.0    | 2025-09-22 | Comandi Intlayer Tab / Fill & Test  |
+| 5.5.10   | 2025-06-29 | Inizializzazione cronologia         |

package/docs/ja/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React と Next.js でコンポーネントを多言語対応（i18n）にする方法
+description: Intlayer を使って多言語対応の React または Next.js コンポーネントを作成するために、ローカライズされたコンテンツの宣言と取得方法を学びます。
+keywords:
+  - i18n
+  - コンポーネント
+  - react
+  - 多言語対応
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer でコンポーネントを多言語対応（i18n）にする方法
+
+このガイドでは、2つの一般的なセットアップで UI コンポーネントを多言語対応にするための最小限の手順を示します：
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+まずコンテンツを宣言し、その後コンポーネント内で取得します。
+
+## 1) コンテンツを宣言する（React と Next.js 共通）
+
+コンポーネントの近くにコンテンツ宣言ファイルを作成します。これにより、翻訳が使用される場所に近くなり、型安全性も確保されます。
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+設定ファイルとして JSON を使いたい場合もサポートされています。
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "多言語対応のReactコンポーネント",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) コンテンツの取得
+
+### ケースA — Reactアプリ（Vite/SPA）
+
+デフォルトの方法：キーで取得するために `useIntlayer` を使用します。これによりコンポーネントはシンプルかつ型安全に保たれます。
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+サーバーサイドレンダリングやプロバイダー外での使用：`react-intlayer/server` を使用し、必要に応じて明示的に `locale` を渡します。
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+代替案：呼び出し元で構造をまとめておきたい場合は、`useDictionary` を使って宣言済みのオブジェクト全体を読み取ることができます。
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### ケースB — Next.js（App Router）
+
+データの安全性とパフォーマンスのためにサーバーコンポーネントを優先してください。サーバーファイルでは `next-intlayer/server` から `useIntlayer` を使用し、クライアントコンポーネントでは `next-intlayer` から `useIntlayer` を使用します。
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+ヒント: ページのメタデータやSEOのために、`getIntlayer` を使用してコンテンツを取得し、`getMultilingualUrls` を使って多言語URLを生成することもできます。
+
+## なぜIntlayerのコンポーネントアプローチが最適なのか
+
+- **コロケーション**: コンテンツの宣言がコンポーネントの近くに存在するため、ズレが減り、デザインシステム全体での再利用が向上します。
+- **型安全性**: キーや構造が強く型付けされており、翻訳の欠落は実行時ではなくビルド時に検出されます。
+- **サーバーファースト**: サーバーコンポーネントでネイティブに動作し、セキュリティとパフォーマンスを向上させます。クライアントフックは引き続き使いやすいままです。
+- **ツリーシェイキング**: コンポーネントで使用されるコンテンツのみがバンドルされるため、大規模アプリでもペイロードを小さく保てます。
+- **DX（開発者体験）＆ツール**: 組み込みのミドルウェア、SEOヘルパー、オプションのビジュアルエディター／AI翻訳が日々の作業を効率化します。
+
+Next.jsに特化した比較とパターンのまとめはこちらをご覧ください: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 関連ガイドと参考資料
+
+- Reactセットアップ（Vite）: https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStackスタート: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js セットアップ: https://intlayer.org/doc/environment/nextjs
+- なぜ Intlayer を選ぶのか vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+これらのページには、エンドツーエンドのセットアップ、プロバイダー、ルーティング、および SEO ヘルパーが含まれています。

package/docs/ja/intlayer_with_angular.md

@@ -618,9 +618,9 @@ export const appConfig: ApplicationConfig = {
 
 Intlayerはモジュール拡張を利用してTypeScriptの利点を活かし、コードベースをより強固にします。
 
-![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)
 
 TypeScriptの設定に自動生成された型が含まれていることを確認してください。