@intlayer/docs 6.1.4 → 6.1.6-canary.0

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/interest_of_intlayer.md

@@ -219,7 +219,7 @@ This approach allows you to:
 ## Additional features of Intlayer
 
 | Feature                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                  |
-| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------- |
+| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.                                                                                                                                                                                                                 |
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                             |
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                           |
@@ -237,7 +237,7 @@ This approach allows you to:
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)                                                                             |
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                 |
 | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperability**<br><br>Allows interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)        |
-| Testing Missing Translations (CLI/CI)                                                                                     | ✅ CLI: npx intlayer content test (CI-friendly audit)                                                                                                                                                                                                                                                                                                                                        | ⚠️ Not built-in; use i18next ecosystem tools (official i18next-cli, translation-check) | ✅ @formatjs/cli supports --missing-keys | ✅ lingui compile --strict fails on missing (also failOnMissing in plugins) | ⚠️ Not built-in; docs suggest npx @lingual/i18n-check | ⚠️ Not built-in; rely on i18next tools / runtime saveMissing | ⚠️ No official CLI; use vue-i18n-extract |
+| Testing Missing Translations (CLI/CI)                                                                                     | ✅ CLI: npx intlayer content test (CI-friendly audit)                                                                                                                                                                                                                                                                                                                                        |
 
 ## Comparison of Intlayer with other solutions
 

package/docs/en/intlayer_with_nextjs_14.md

@@ -1398,7 +1398,23 @@ Link.displayName = 'Link';
 
 By integrating this `Link` component across your application, you maintain a coherent and language-aware user experience while also benefitting from improved SEO and usability.
 
-### (Optional) Step 12: Optmize your bundle size
+### (Optional) Step 12: Get the current locale in Server Actions
+
+If you need the active locale inside a Server Action (e.g., to localize emails or run locale-aware logic), call `getLocale` from `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Do something with the locale
+};
+```
+
+### (Optional) Step 13: Optmize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 
@@ -1474,6 +1490,7 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 | Version | Date       | Changes                                                         |
 | ------- | ---------- | --------------------------------------------------------------- |
+| 5.6.6   | 2025-10-02 | Added docs for `getLocale` function on server actions           |
 | 5.6.2   | 2025-09-22 | Added docs for `multipleMiddlewares` helper                     |
 | 5.6.0   | 2025-07-06 | Transform `withIntlayer()` function to a promise based function |
 | 5.5.10  | 2025-06-29 | Init history                                                    |

package/docs/en/intlayer_with_nextjs_15.md

@@ -1445,7 +1445,23 @@ const Link = ({ href, children, ...props }) => {
 
 By integrating this `Link` component across your application, you maintain a coherent and language-aware user experience while also benefitting from improved SEO and usability.
 
-### (Optional) Step 12: Optmize your bundle size
+### (Optional) Step 12: Get the current locale in Server Actions
+
+If you need the active locale inside a Server Action (e.g., to localize emails or run locale-aware logic), call `getLocale` from `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Do something with the locale
+};
+```
+
+### (Optional) Step 13: Optmize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 
@@ -1537,6 +1553,7 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 | Version | Date       | Changes                                                         |
 | ------- | ---------- | --------------------------------------------------------------- |
+| 5.6.6   | 2025-10-02 | Added docs for `getLocale` function on server actions           |
 | 5.6.2   | 2025-09-23 | Added docs for watch dictionaries changes on Turbopack          |
 | 5.6.2   | 2025-09-22 | Added docs for `multipleMiddlewares` helper                     |
 | 5.6.0   | 2025-07-06 | Transform `withIntlayer()` function to a promise based function |