@intlayer/docs 6.1.5 → 6.1.6

package/docs/de/intlayer_with_vite+preact.md

@@ -1050,38 +1050,38 @@ const App = () => (
 module.exports = App;
 ```
 
-Parallel dazu können Sie auch das `intlayerMiddlewarePlugin` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
+Parallel dazu können Sie auch das `intlayerMiddleware` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
 
 ```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()],
 });
 ```
 
@@ -1627,9 +1627,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
 
-![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)
 
 Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
 

package/docs/de/intlayer_with_vite+react.md

@@ -1016,38 +1016,38 @@ const App = () => (
 );
 ```
 
-Parallel dazu können Sie auch das `intlayerMiddlewarePlugin` verwenden, um serverseitiges Routing in Ihre Anwendung zu integrieren. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die passendste Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wird keine Locale erkannt, erfolgt eine Weiterleitung zur Standard-Locale.
+Parallel dazu können Sie auch das `intlayerMiddleware` verwenden, um serverseitiges Routing in Ihre Anwendung zu integrieren. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die passendste Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wird keine Locale erkannt, erfolgt eine Weiterleitung zur Standard-Locale.
 
 ```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()],
 });
 ```
 
@@ -1615,9 +1615,9 @@ Indem Sie diese `Link`-Komponente in Ihrer gesamten Anwendung integrieren, gewä
 
 Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Codebasis robuster zu machen.
 
-![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)
 
 Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
 

package/docs/de/intlayer_with_vite+vue.md

@@ -698,46 +698,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-Parallel dazu können Sie auch das `intlayerMiddlewarePlugin` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
+Parallel dazu können Sie auch das `intlayerMiddleware` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
 
 ```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()],
 });
 ```
 
@@ -1042,9 +1042,9 @@ const { myMarkdownContent } = useIntlayer("my-component");
 
 Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
 
-![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)
 
 Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
 

package/docs/de/packages/vite-intlayer/index.md

@@ -53,17 +53,17 @@ Sehen Sie ein Beispiel, wie Sie die Plugins in Ihre Vite-Konfiguration einbinden
 
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [intlayer(), intlayerMiddleware()],
 });
 ```
 
 > Das `intlayer()` Vite-Plugin wird verwendet, um Intlayer in Vite zu integrieren. Es sorgt für den Aufbau von Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Zusätzlich stellt es Aliase bereit, um die Leistung zu optimieren.
 
-> Das `intlayerMiddlewarePlugin()` fügt Ihrer Anwendung serverseitiges Routing hinzu. Dieses Plugin erkennt automatisch die aktuelle Sprache basierend auf der URL und setzt das entsprechende Sprach-Cookie. Wenn keine Sprache angegeben ist, bestimmt das Plugin die am besten geeignete Sprache basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Sprache erkannt wird, erfolgt eine Weiterleitung zur Standardsprache.
+> Das `intlayerMiddleware()` fügt Ihrer Anwendung serverseitiges Routing hinzu. Dieses Plugin erkennt automatisch die aktuelle Sprache basierend auf der URL und setzt das entsprechende Sprach-Cookie. Wenn keine Sprache angegeben ist, bestimmt das Plugin die am besten geeignete Sprache basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Sprache erkannt wird, erfolgt eine Weiterleitung zur Standardsprache.
 
 ## Beherrschen der Internationalisierung Ihrer Vite-Anwendung
 

package/docs/de/vs_code_extension.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Offizielle VS Code Erweiterung
 description: Erfahren Sie, wie Sie die Intlayer-Erweiterung in VS Code verwenden, um Ihren Entwicklungsworkflow zu verbessern. Navigieren Sie schnell zwischen lokalisierten Inhalten und verwalten Sie Ihre Wörterbücher effizient.
 keywords:
@@ -21,94 +21,38 @@ slugs:
 
 ## Übersicht
 
-[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) ist die offizielle Visual Studio Code Erweiterung für **Intlayer**, die darauf ausgelegt ist, die Entwicklererfahrung beim Arbeiten mit lokalisierten Inhalten in Ihren Projekten zu verbessern.
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) ist die offizielle Visual Studio Code Erweiterung für **Intlayer**, die entwickelt wurde, um die Entwicklererfahrung beim Arbeiten mit lokalisierten Inhalten in Ihren Projekten zu verbessern.
 
-![Intlayer VS Code Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Erweiterungslink: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funktionen
 
-### Sofortige Navigation
+![Wörterbücher füllen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Unterstützung für "Gehe zu Definition"** – Verwenden Sie `⌘ + Klick` (Mac) oder `Ctrl + Klick` (Windows/Linux) auf einem `useIntlayer`-Schlüssel, um die entsprechende Inhaltsdatei sofort zu öffnen.  
-**Nahtlose Integration** – Funktioniert mühelos mit **react-intlayer** und **next-intlayer** Projekten.  
-**Mehrsprachige Unterstützung** – Unterstützt lokalisierte Inhalte in verschiedenen Sprachen.  
-**VS Code Integration** – Integriert sich reibungslos in die Navigation und die Befehlspalette von VS Code.
-
-### Befehle zur Verwaltung von Wörterbüchern
-
-Verwalten Sie Ihre Inhaltswörterbücher direkt aus VS Code:
-
-- **Wörterbücher erstellen** – Generieren Sie Inhaltsdateien basierend auf Ihrer Projektstruktur.
-- **Wörterbücher hochladen** – Laden Sie die neuesten Wörterbuchinhalte in Ihr Repository hoch.
-- **Wörterbücher herunterladen** – Synchronisieren Sie die neuesten Wörterbuchinhalte aus Ihrem Repository mit Ihrer lokalen Umgebung.
+- **Sofortige Navigation** – Schneller Sprung zur richtigen Inhaltsdatei beim Klicken auf einen `useIntlayer`-Schlüssel.
 - **Wörterbücher füllen** – Füllen Sie Wörterbücher mit Inhalten aus Ihrem Projekt.
-- **Wörterbücher testen** – Erkennen Sie fehlende oder unvollständige Übersetzungen.
-
-### Generator für Inhaltsdeklarationen
-
-Erstellen Sie einfach strukturierte Wörterbuchdateien in verschiedenen Formaten:
 
-Wenn Sie gerade an einer Komponente arbeiten, wird die Datei `.content.{ts,tsx,js,jsx,mjs,cjs,json}` für Sie generiert.
+![Befehle auflisten](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Beispiel einer Komponente:
+- **Einfacher Zugriff auf Intlayer-Befehle** – Erstellen, pushen, pullen, füllen und testen Sie Inhaltswörterbücher mühelos.
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+![Inhaltsdatei erstellen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Generierte Datei im TypeScript-Format:
+- **Generator für Inhaltsdeklarationen** – Erstellen Sie Wörterbuch-Inhaltsdateien in verschiedenen Formaten (`.ts`, `.esm`, `.cjs`, `.json`).
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![Wörterbücher testen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+- **Wörterbücher testen** – Testen Sie Wörterbücher auf fehlende Übersetzungen.
 
-export default componentContent;
-```
+![Wörterbuch neu aufbauen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-Verfügbare Formate:
+- **Halten Sie Ihre Wörterbücher aktuell** – Halten Sie Ihre Wörterbücher mit den neuesten Inhalten aus Ihrem Projekt auf dem neuesten Stand.
 
-- **TypeScript (`.ts`)**
-- **ES Modul (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Intlayer-Tab (Aktivitätsleiste)
+![Intlayer-Tab (Aktivitätsleiste)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Öffnen Sie den Intlayer-Tab, indem Sie auf das Intlayer-Symbol in der VS Code-Aktivitätsleiste klicken. Er enthält zwei Ansichten:
-
-- **Suche**: Eine Live-Suchleiste, um Wörterbücher und deren Inhalte schnell zu filtern. Das Tippen aktualisiert die Ergebnisse sofort.
-- **Wörterbücher**: Eine Baumansicht Ihrer Umgebungen/Projekte, Wörterbuchschlüssel und der Dateien, die Einträge beitragen. Sie können:
-  - Auf eine Datei klicken, um sie im Editor zu öffnen.
-  - Die Symbolleiste verwenden, um Aktionen auszuführen: Build, Pull, Push, Fill, Refresh, Test und Create Dictionary File.
-  - Das Kontextmenü für spezifische Aktionen verwenden:
-    - Auf einem Wörterbuch: Pull oder Push
-    - Auf einer Datei: Wörterbuch füllen
-  - Beim Wechseln der Editoren zeigt der Baum die passende Datei an, wenn sie zu einem Wörterbuch gehört.
-
-## Installation
-
-Sie können **Intlayer** direkt aus dem VS Code Marketplace installieren:
-
-1. Öffnen Sie **VS Code**.
-2. Gehen Sie zum **Extensions Marketplace**.
-3. Suchen Sie nach **"Intlayer"**.
-4. Klicken Sie auf **Installieren**.
+- **Intlayer-Tab (Aktivitätsleiste)** – Durchsuchen und durchsuchen Sie Wörterbücher über einen dedizierten Seiten-Tab mit Symbolleiste und Kontextaktionen (Build, Pull, Push, Fill, Refresh, Test, Create File).
 
 ## Verwendung
 
@@ -121,63 +65,58 @@ Sie können **Intlayer** direkt aus dem VS Code Marketplace installieren:
    const content = useIntlayer("app");
    ```
 
-3. **Command-Klick** (`⌘+Klick` auf macOS) oder **Strg-Klick** (unter Windows/Linux) auf den Schlüssel (z. B. `"app"`).
+3. **Befehl-Klick** (`⌘+Klick` auf macOS) oder **Strg-Klick** (auf Windows/Linux) auf den Schlüssel (z. B. `"app"`).
 4. VS Code öffnet automatisch die entsprechende Wörterbuchdatei, z. B. `src/app.content.ts`.
 
-### Verwaltung von Inhaltswörterbüchern
-
 ### Intlayer-Tab (Aktivitätsleiste)
 
-Verwenden Sie den seitlichen Tab, um Wörterbücher zu durchsuchen und zu verwalten:
+Verwenden Sie den Seiten-Tab, um Wörterbücher zu durchsuchen und zu verwalten:
 
 - Öffnen Sie das Intlayer-Symbol in der Aktivitätsleiste.
 - Geben Sie in **Suche** ein, um Wörterbücher und Einträge in Echtzeit zu filtern.
-- Durchsuchen Sie in **Wörterbücher** Umgebungen, Wörterbücher und Dateien. Verwenden Sie die Symbolleiste für Erstellen, Abrufen, Hochladen, Füllen, Aktualisieren, Testen und Wörterbuchdatei erstellen. Rechtsklicken Sie für Kontextaktionen (Abrufen/Hochladen bei Wörterbüchern, Füllen bei Dateien). Die aktuelle Editor-Datei wird im Baum automatisch angezeigt, wenn zutreffend.
+- Durchsuchen Sie in **Wörterbücher** Umgebungen, Wörterbücher und Dateien. Verwenden Sie die Symbolleiste für Erstellen, Abrufen, Senden, Füllen, Aktualisieren, Testen und Wörterbuchdatei erstellen. Rechtsklick für Kontextaktionen (Abrufen/Senden bei Wörterbüchern, Füllen bei Dateien). Die aktuelle Editor-Datei wird bei Bedarf automatisch im Baum angezeigt.
 
-#### Wörterbücher erstellen
+### Zugriff auf die Befehle
 
-Generieren Sie alle Wörterbuch-Inhaltsdateien mit:
+Sie können auf die Befehle über die **Befehlspalette** zugreifen.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Suchen Sie nach **Wörterbücher erstellen** und führen Sie den Befehl aus.
-
-#### Wörterbücher hochladen
-
-Laden Sie den neuesten Wörterbuchinhalt hoch:
-
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher hochladen**.
-3. Wählen Sie die hochzuladenden Wörterbücher aus und bestätigen Sie.
-
-#### Wörterbücher abrufen
+- **Wörterbücher erstellen**
+- **Wörterbücher hochladen**
+- **Wörterbücher herunterladen**
+- **Wörterbücher füllen**
+- **Wörterbücher testen**
+- **Wörterbuchdatei erstellen**
 
-Synchronisieren Sie die neuesten Wörterbuchinhalte:
+### Laden von Umgebungsvariablen
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher abrufen**.
-3. Wählen Sie die Wörterbücher aus, die abgerufen werden sollen.
+Intlayer empfiehlt, Ihre AI-API-Schlüssel sowie die Intlayer-Client-ID und das Secret in Umgebungsvariablen zu speichern.
 
-#### Wörterbücher füllen
+Die Erweiterung kann Umgebungsvariablen aus Ihrem Arbeitsbereich laden, um Intlayer-Befehle im richtigen Kontext auszuführen.
 
-Füllen Sie Wörterbücher mit Inhalten aus Ihrem Projekt:
+- **Ladereihenfolge (nach Priorität)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Nicht destruktiv**: vorhandene `process.env`-Werte werden nicht überschrieben.
+- **Geltungsbereich**: Dateien werden vom konfigurierten Basisverzeichnis aus aufgelöst (standardmäßig das Stammverzeichnis des Arbeitsbereichs).
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher füllen**.
-3. Führen Sie den Befehl aus, um die Wörterbücher zu befüllen.
+#### Auswahl der aktiven Umgebung
 
-#### Wörterbücher testen
+- **Befehls-Palette**: Öffnen Sie die Palette und führen Sie `Intlayer: Select Environment` aus, wählen Sie dann die Umgebung aus (z. B. `development`, `staging`, `production`). Die Erweiterung versucht, die erste verfügbare Datei in der oben genannten Prioritätsliste zu laden und zeigt eine Benachrichtigung wie „Env geladen von .env.<env>.local“ an.
+- **Einstellungen**: Gehen Sie zu `Einstellungen → Erweiterungen → Intlayer` und setzen Sie:
+  - **Umgebung**: der Umgebungsname, der zur Auflösung von `.env.<env>*` Dateien verwendet wird.
+  - (Optional) **Env-Datei**: ein expliziter Pfad zu einer `.env`-Datei. Wenn angegeben, hat dieser Vorrang vor der ermittelten Liste.
 
-Validieren Sie Wörterbücher und finden Sie fehlende Übersetzungen:
+#### Monorepos und benutzerdefinierte Verzeichnisse
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher testen**.
-3. Überprüfen Sie die gemeldeten Probleme und beheben Sie diese bei Bedarf.
+Wenn sich Ihre `.env`-Dateien außerhalb des Arbeitsbereichs-Stammverzeichnisses befinden, legen Sie das **Basisverzeichnis** unter `Einstellungen → Erweiterungen → Intlayer` fest. Der Loader sucht dann nach `.env`-Dateien relativ zu diesem Verzeichnis.
 
-## Dokumentationsverlauf
+## Dokumentationshistorie
 
-| Version | Datum      | Änderungen        |
-| ------- | ---------- | ----------------- |
-| 5.5.10  | 2025-06-29 | Verlauf initiiert |
+| Version | Datum      | Änderungen                                    |
+| ------- | ---------- | --------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Demo-GIF hinzugefügt                          |
+| 6.1.0   | 2025-09-24 | Abschnitt zur Umgebungs-Auswahl hinzugefügt   |
+| 6.0.0   | 2025-09-22 | Intlayer-Tab / Befehle zum Ausfüllen & Testen |
+| 5.5.10  | 2025-06-29 | Historie initialisiert                        |

package/docs/en/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Make a component multilingual (i18n library) in React and Next.js
+description: Learn how to declare and retrieve localized content to build a multilingual React or Next.js component with Intlayer.
+keywords:
+  - i18n
+  - component
+  - react
+  - multilingual
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# How to make a component multilingual (i18n) with Intlayer
+
+This guide shows the minimal steps to make a UI component multilingual in two common setups:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+You will first declare your content, then retrieve it in your component.
+
+## 1) Declare your content (shared for React and Next.js)
+
+Create a content declaration file near your component. This keeps translations close to where they are used and enables type safety.
+
+```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 is also supported if you prefer configuration files.
+
+```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": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Retrieve your content
+
+### Case A — React app (Vite/SPA)
+
+Default approach: use `useIntlayer` to retrieve by key. This keeps components lean and typed.
+
+```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>
+  );
+}
+```
+
+Server-side rendering or outside provider: use `react-intlayer/server` and pass an explicit `locale` when needed.
+
+```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>
+    </>
+  );
+}
+```
+
+Alternative: `useDictionary` can read a whole declared object if you prefer collocating structure at call site.
+
+```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>
+  );
+}
+```
+
+### Case B — Next.js (App Router)
+
+Prefer server components for data safety and performance. Use `useIntlayer` from `next-intlayer/server` in server files, and `useIntlayer` from `next-intlayer` in client components.
+
+```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>
+  );
+}
+```
+
+Tip: For page metadata and SEO, you can also fetch content using `getIntlayer` and generate multilingual URLs via `getMultilingualUrls`.
+
+## Why Intlayer’s component approach is best
+
+- **Collocation**: Content declarations live near components, reducing drift and improving reuse across design systems.
+- **Type safety**: Keys and structures are strongly typed; missing translations surface at build-time rather than at runtime.
+- **Server-first**: Works natively in server components for better security and performance; client hooks remain ergonomic.
+- **Tree-shaking**: Only content used by the component is bundled, keeping payloads small in large apps.
+- **DX & tooling**: Built-in middleware, SEO helpers, and optional Visual Editor/AI translations streamline everyday work.
+
+See the comparisons and patterns in the Next.js-focused roundup: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Related guides and references
+
+- React setup (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js setup: https://intlayer.org/doc/environment/nextjs
+- Why Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+These pages include end-to-end setup, providers, routing, and SEO helpers.

package/docs/en/how_works_intlayer.md

@@ -74,7 +74,7 @@ const MyComponent = () => {
 
 This hook will manage the locale detection for you and will return the content for the current locale. Using this hook, you will also be able to interpret markdown, manage pluralization, and more.
 
-> To see all the features of Intlayer, you can read the [dictionary documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md).
+> To see all the features of Intlayer, you can read the [dictionary documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 ## Distant content
 

package/docs/en/index.md

@@ -51,7 +51,7 @@ Intlayer offers a flexible, modern approach to translating your application. Our
 
 Organize your multilingual content close to your code to keep everything consistent and maintainable.
 
-- **[Get Started](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md)**  
+- **[Get Started](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)**  
   Learn the basics of declaring your content in Intlayer.
 
 - **[Translation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/translation.md)**  

package/docs/en/intlayer_cli.md

@@ -40,7 +40,7 @@ pnpm add intlayer-cli -g
 
 ## intlayer-cli package
 
-`intlayer-cli` package intend to transpile your [intlayer declarations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md) into dictionaries.
+`intlayer-cli` package intend to transpile your [intlayer declarations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) into dictionaries.
 
 This package will transpile all intlayer files, such as `src/**/*.content.{ts|js|mjs|cjs|json}`. [See how to declare your Intlayer declaration files](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md).