@intlayer/docs 9.3.0 → 9.3.2

package/docs/de/eslint.md

@@ -0,0 +1,336 @@
+---
+createdAt: 2026-08-12
+updatedAt: 2026-08-12
+title: ESLint Plugin | Linting-Regeln für Intlayer
+description: Erkennen Sie hartcodierte Zeichenketten, dynamische Aufrufe, die der Intlayer-Compiler nicht optimieren kann, und ungenutzte Wörterbuchinhalte mit eslint-plugin-intlayer. Funktioniert mit ESLint und oxlint für React, Vue, Svelte, Angular und Astro.
+keywords:
+  - Intlayer
+  - ESLint
+  - oxlint
+  - Linting
+  - i18n
+  - Internationalisierung
+  - no-raw-text
+  - Hartcodierte Zeichenketten
+  - Ungenutzte Übersetzungen
+  - Toter Inhalt
+  - React
+  - Vue
+  - Svelte
+  - Angular
+slugs:
+  - doc
+  - eslint
+history:
+  - version: 9.3.1
+    date: 2026-08-12
+    changes: "Initialer Verlauf"
+author: aymericzip
+---
+
+# ESLint x OXLint Plugin
+
+`eslint-plugin-intlayer` erkennt die typischen i18n-Fehler, die TypeScript nicht erfassen kann:
+
+1. **Hartcodierter Text**, der nie in einem Wörterbuch deklariert wurde.
+2. **Dynamische Aufrufe**, die die Typüberprüfung bestehen und ausgeführt werden, die der Intlayer-Compiler jedoch nicht optimieren kann.
+3. **Toter Inhalt** — Wörterbücher und Felder, die an keiner Stelle im Projekt gelesen werden (Opt-in).
+
+Unbekannte Wörterbuchschlüssel, unbekannte Feldpfade und fehlende Locales sind bereits Kompilierungsfehler, weshalb das Plugin diese nicht wiederholt.
+
+## Installation
+
+```bash packageManager="npm"
+npm install --save-dev eslint-plugin-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add --save-dev eslint-plugin-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add --dev eslint-plugin-intlayer
+```
+
+Erfordert ESLint 9 oder höher (Flat Config).
+
+## Verwendung
+
+Das Plugin funktioniert sowohl in ESLint als auch in [oxlint](https://oxc.rs) — dieselben Regeln, dieselben Optionen.
+
+<Tabs defaultTab="eslint">
+  <Tab label="ESLint" value="eslint">
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+
+export default [...intlayer.configs.recommended];
+```
+
+Oder aktivieren Sie Regeln einzeln:
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+
+export default [
+  {
+    plugins: { intlayer },
+    rules: {
+      "intlayer/no-raw-text": "warn",
+      "intlayer/static-dictionary-key": "error",
+      "intlayer/no-dynamic-field-access": "error",
+      "intlayer/enforce-adapter-import": "warn",
+      "intlayer/no-unused-content": "warn",
+    },
+  },
+];
+```
+
+  </Tab>
+  <Tab label="oxlint" value="oxlint">
+
+```json fileName=".oxlintrc.json"
+{
+  "jsPlugins": ["eslint-plugin-intlayer"],
+  "rules": {
+    "intlayer/no-raw-text": "warn",
+    "intlayer/static-dictionary-key": "error",
+    "intlayer/no-dynamic-field-access": "error",
+    "intlayer/enforce-adapter-import": "warn"
+  }
+}
+```
+
+Zwei Hinweise: Die JS-Plugin-Unterstützung von oxlint befindet sich noch im Alpha-Stadium und oxlint unterstützt keine benutzerdefinierten Parser — `.vue`-, `.svelte`-, `.astro`-Dateien und Angular-Templates werden dort daher nicht geprüft. Führen Sie oxlint für Ihre JS/TS/JSX-Dateien aus und behalten Sie ESLint für den Rest bei.
+
+`no-unused-content` wird oben absichtlich weggelassen: Die Regel benötigt das Arbeitsverzeichnis und den Pfad der geprüften Datei aus dem Regelkontext, was die Alpha-Bridge für JS-Plugins nicht garantiert. Führen Sie diese Regel unter ESLint aus.
+
+  </Tab>
+</Tabs>
+
+### Konfigurationen
+
+| Konfiguration   | `no-raw-text`                     | `static-dictionary-key` | `no-dynamic-field-access` | `enforce-adapter-import` | `no-unused-content` |
+| --------------- | --------------------------------- | ----------------------- | ------------------------- | ------------------------ | ------------------- |
+| `recommended`   | warn                              | error                   | error                     | off                      | off                 |
+| `strict`        | error (+ Nicht-JSX-Zeichenfolgen) | error                   | error                     | error                    | off                 |
+| `contract-only` | off                               | error                   | error                     | off                      | off                 |
+
+`recommended` belässt `no-raw-text` absichtlich bei `warn`: Bei Anwendung auf eine bestehende Codebasis werden alle unübersetzten Zeichenfolgen auf einmal gemeldet, was Ihren Build nicht von Tag eins an blockieren sollte.
+
+`enforce-adapter-import` ist standardmäßig deaktiviert — aktivieren Sie die Regel bei Bedarf explizit.
+
+`no-unused-content` ist in allen Konfigurationen standardmäßig deaktiviert, einschließlich `strict`. Es ist die einzige Regel, die Ihre Intlayer-Konfiguration liest und Ihre Quelldateien vom Dateisystem durchsucht. Die Aktivierung sollte daher eine bewusste Entscheidung sein und nicht automatisch über ein Preset erfolgen.
+
+## Regeln
+
+### `no-raw-text`
+
+Meldet benutzerorientierten Text, der nicht in einem Wörterbuch deklariert ist. Verwendet dieselbe Erkennung wie `intlayer extract`, sodass Markennamen, CSS-Klassen und technische Bezeichner ignoriert werden.
+
+```jsx
+// ✗ Gemeldet
+<h1>Welcome to our documentation</h1>
+<input placeholder="Enter your email address" />
+
+// ✓ Gültig
+const { title } = useIntlayer("home");
+<h1>{title}</h1>
+```
+
+Inhaltsdeklarationsdateien (`*.content.ts`, …) werden übersprungen.
+
+Um eine Datei vollständig auf einmal zu korrigieren, führen Sie `npx intlayer extract` aus und lassen Sie den Compiler die Strings in ein Wörterbuch überführen.
+
+**Optionen**
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+{
+  "intlayer/no-raw-text": [
+    "warn",
+    {
+      // Attribute, deren Wert benutzerorientierter Text ist.
+      // Standard: title, placeholder, alt, aria-label, label
+      attributes: ["title", "placeholder", "alt", "aria-label", "label"],
+
+      // Elemente, deren Inhalt niemals benutzerorientierter Text ist.
+      // Standard: code, pre, script, style
+      ignoreElements: ["code", "pre", "script", "style"],
+
+      // Reguläre Ausdrücke für Text, der niemals gemeldet werden soll.
+      ignorePatterns: ["^Powered by"],
+
+      // Auch Zeichenketten-Literale außerhalb von Markup melden. Standard: false
+      includeStringLiterals: false,
+    },
+  ],
+}
+```
+
+### `static-dictionary-key`
+
+Erfordert, dass der Wörterbuchschlüssel ein Zeichenfolgen-Literal ist.
+
+Der Compiler kann ein Wörterbuch nur dann vorladen, wenn er den Schlüssel direkt am Aufrufort lesen kann. Bei einem dynamisch berechneten Schlüssel wird die Optimierung stillschweigend übersprungen und stattdessen jedes Wörterbuch gebündelt.
+
+```typescript
+// ✗ Gemeldet
+useIntlayer(dictionaryKey);
+useIntlayer(`home-${suffix}`);
+getTranslations({ namespace: page });
+
+// ✗ Eine Variable ist immer noch kein Literal
+const key = "home";
+useIntlayer(key);
+
+// ✓ Gültig
+useIntlayer("home");
+getTranslations({ namespace: "home" });
+```
+
+Dies gilt für `useIntlayer`, `getIntlayer` und jeden Kompatibilitätsadapter (`useTranslation`, `useTranslations`, `formatMessage`, `<FormattedMessage id>`, `<Trans i18nKey>`, …).
+
+### `no-dynamic-field-access`
+
+Erfordert, dass das Feld, das Sie aus einem Wörterbuch lesen, statisch bekannt ist.
+
+Der Compiler entfernt Felder, deren Verwendung er nicht erkennen kann. Ein berechneter Zugriff ist für ihn unsichtbar, sodass der Lesezugriff zur Laufzeit `undefined` zurückgeben kann.
+
+```typescript
+// ✗ Gemeldet
+const content = useIntlayer("home");
+content[fieldName];
+
+const t = useTranslations("home");
+t(messageKey);
+
+// ✓ Gültig
+content.title;
+content["title"];
+content.items[0];
+t("hero.title");
+```
+
+### `enforce-adapter-import`
+
+Bevorzugt den Kompatibilitätsadapter `@intlayer/*` gegenüber dem Originalpaket. Das Originalpaket löst nur dann zu Intlayer auf, wenn der Bundler-Alias konfiguriert ist; der Adapter funktioniert immer. Automatisch behebbar mit `--fix`.
+
+```typescript
+// ✗ Gemeldet
+import { useTranslation } from "react-i18next";
+import { getTranslations } from "next-intl/server";
+
+// ✓ Gültig
+import { useTranslation } from "@intlayer/react-i18next";
+import { getTranslations } from "@intlayer/next-intl/server";
+```
+
+### `no-unused-content`
+
+**Standardmäßig deaktiviert.** Meldet Inhalte, die im Projekt nirgends gelesen werden, sowie Wörterbuchschlüssel, die an mehr als einer Stelle deklariert sind.
+
+```typescript fileName="src/home.content.ts"
+export default {
+  key: "home", // ✗ Gemeldet, wenn kein Aufrufer im Projekt "home" abfragt
+  content: {
+    title: t({ de: "Titel", en: "Title" }),
+
+    // ✗ Gemeldet, wenn nichts `hero` liest
+    hero: {
+      subtitle: t({ de: "Untertitel", en: "Subtitle" }),
+    },
+  },
+};
+```
+
+Im Gegensatz zu den anderen Regeln kann diese Regel nicht allein anhand der geprüften Datei entscheiden — ein Feld ist nur relativ zum gesamten Projekt ungenutzt. Bei der ersten Inhaltsdeklaration eines Lint-Laufs lädt sie Ihre Intlayer-Konfiguration, durchsucht die Quelldateien gemäß Konfiguration (`build.traversePattern`, `compiler.transformPattern`) und führt dieselbe Nutzungsanalyse aus, die auch `@intlayer/lsp` und das Durchstreichen von „ungenutzt“ in der VS Code-Erweiterung antreibt. Das Ergebnis wird für `cacheTtl` Millisekunden zwischengespeichert, sodass der Scan einmal pro Durchlauf und nicht für jede Datei ausgeführt wird.
+
+**Optionen**
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+{
+  "intlayer/no-unused-content": [
+    "warn",
+    {
+      // Wörterbuchschlüssel melden, auf die nichts verweist. Standard: true
+      reportUnusedDictionaries: true,
+
+      // Inhaltsfelder melden, die nichts liest. Standard: true
+      reportUnusedFields: true,
+
+      // Schlüssel melden, die an mehr als einer Stelle deklariert sind. Standard: true
+      reportDuplicateKeys: true,
+
+      // Reguläre Ausdrücke für Feldpfade, die niemals gemeldet werden sollen.
+      ignoreFields: ["^meta"],
+
+      // Projekt-Root, ab dem der Scan startet. Standard: ESLint-Arbeitsverzeichnis
+      baseDir: process.cwd(),
+
+      // Wie lange ein Projektscan wiederverwendet wird, in ms. Standard: 30000
+      cacheTtl: 30000,
+    },
+  ],
+}
+```
+
+Verringern Sie `cacheTtl`, wenn Sie mit einem langlebigen Editor-Server linten und Ihre Änderungen schneller sehen möchten; setzen Sie `baseDir`, wenn ein einzelner Lint-Lauf mehrere Intlayer-Projekte in einem Monorepo umfasst.
+
+> **Neigt zur Zurückhaltung.** Ein Fehlalarm würde eine Übersetzung löschen. Daher wird nichts gemeldet, wenn das Wörterbuch auf eine Weise verwendet wird, die die Analyse nicht nachverfolgen kann: das Inhaltsobjekt als Ganzes übergeben, eine gebundene Übersetzerfunktion (`const t = useTranslations("home")`), eine über direkten Import erreichte Deklaration (`useDictionary(myDictionary)`), ein `nest()` aus einem anderen Wörterbuch oder eine Feldliste, die durch einen Spread nicht-exhaustiv ist. Single-File-Komponenten (`.vue`, `.svelte`, `.astro`) gelten als Verwender aller Felder der genannten Wörterbücher, da ihre Script-Blöcke hier nicht analysiert werden.
+
+`reportDuplicateKeys` liest die unzusammengeführten Wörterbücher, die der Build unter `.intlayer/` schreibt, und bleibt daher stumm, bis das Projekt mindestens einmal gebaut wurde. Zwei Deklarationen mit demselben Schlüssel werden zusammengeführt, was ein legitimes Muster ist — die Meldung existiert, da bei einem beidseitig definierten Feld stillschweigend nur einer der beiden Werte beibehalten wird.
+
+Der Analysator wird aus `@intlayer/lsp` geladen, welches als ESM ausgeliefert wird. Die Regel benötigt daher eine Node-Version, die ein ES-Modul via `require()` laden kann — Node 20.19+ oder 22.12+. Bei älteren Versionen meldet sie nichts, anstatt den Lint-Lauf abbrechen zu lassen.
+
+## Frameworks
+
+Jede Regel funktioniert über alle Intlayer-Integrationen hinweg, einschließlich innerhalb von Vue-, Svelte- und Angular-Templates. Sie müssen ESLint lediglich mitteilen, welcher Parser jeden Dateityp liest.
+
+| Framework                 | Dateien           | Parser                            |
+| ------------------------- | ----------------- | --------------------------------- |
+| React, Preact, Solid, Lit | `.jsx` `.tsx`     | `typescript-eslint`               |
+| Next.js                   | `.jsx` `.tsx`     | `typescript-eslint`               |
+| Vue, Nuxt                 | `.vue`            | `vue-eslint-parser`               |
+| Svelte, SvelteKit         | `.svelte`         | `svelte-eslint-parser`            |
+| Angular                   | `.ts`             | `typescript-eslint`               |
+| Angular-Templates         | `.component.html` | `@angular-eslint/template-parser` |
+| Astro                     | `.astro`          | `astro-eslint-parser`             |
+
+```javascript fileName="eslint.config.mjs" codeFormat="esm"
+import intlayer from "eslint-plugin-intlayer";
+import tseslint from "typescript-eslint";
+import vueParser from "vue-eslint-parser";
+import svelteParser from "svelte-eslint-parser";
+import angularTemplateParser from "@angular-eslint/template-parser";
+
+export default [
+  ...intlayer.configs.recommended,
+
+  {
+    files: ["**/*.{ts,tsx,jsx}"],
+    languageOptions: { parser: tseslint.parser },
+  },
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+  {
+    files: ["**/*.component.html"],
+    languageOptions: { parser: angularTemplateParser },
+  },
+];
+```
+
+Installieren Sie nur die Parser, die Ihr Projekt benötigt.
+
+> **Bekannte Einschränkung.** In Vue- und Angular-Templates wird ein Ausdruck wie `{{ content[key] }}` nicht von `no-dynamic-field-access` geprüft. Dynamische Zugriffe im Script-Block werden normal erkannt.

package/docs/de/interest_of_intlayer.md

@@ -207,7 +207,7 @@ export const ComponentExample = () => {
 Dieser Ansatz ermöglicht es Ihnen:
 
 1. **Die Entwicklungsgeschwindigkeit zu erhöhen**
-   - `.content.{{ts|mjs|cjs|json}}`-Dateien können mithilfe einer VSCode-Erweiterung erstellt werden
+   - `.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`-Dateien können mithilfe einer VSCode-Erweiterung erstellt werden
    - KI-Autovervollständigungswerkzeuge in Ihrer IDE (wie GitHub Copilot) können Ihnen bei der Deklaration Ihrer Inhalte helfen und so Copy-Paste reduzieren
 
 2. **Ihre Codebasis sauber zu halten**
@@ -231,27 +231,27 @@ Dieser Ansatz ermöglicht es Ihnen:
 
 ## Zusätzliche Funktionen von Intlayer
 
-| Funktion                                                                                                                  | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Cross-Framework-Unterstützung**<br><br>Intlayer ist kompatibel mit allen gängigen Frameworks und Bibliotheken, einschließlich Next.js, React, Vite, Vue.js, Nuxt, Preact, Express und mehr.                                                                                                                                                                                                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **JavaScript-gestütztes Inhaltsmanagement**<br><br>Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.<br><br> - [Inhaltsdeklaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                          |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compiler**<br><br>Der Intlayer-Compiler extrahiert automatisch Inhalte aus Ihren Komponenten und generiert die Wörterbuchdateien.<br><br> - [Compiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Inhaltsdeklarationsdatei pro Sprache**<br><br>Beschleunigen Sie Ihre Entwicklung, indem Sie Ihre Inhalte vor der automatischen Generierung einmal deklarieren.<br><br> - [Inhaltsdeklarationsdatei pro Sprache](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Typsichere Umgebung**<br><br>Nutzen Sie TypeScript, um sicherzustellen, dass Ihre Inhaltsdefinitionen und Ihr Code fehlerfrei sind, während Sie gleichzeitig von der IDE-Autovervollständigung profitieren.<br><br> - [TypeScript-Konfiguration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                               |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Vereinfachtes Setup**<br><br>Schnell einsatzbereit mit minimaler Konfiguration. Passen Sie Einstellungen für Internationalisierung, Routing, KI, Build und Inhaltsverarbeitung mit Leichtigkeit an.<br><br> - [Erkunden Sie die Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                        |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Vereinfachtes Abrufen von Inhalten**<br><br>Sie müssen Ihre `t`-Funktion nicht für jedes Inhaltselement einzeln aufrufen. Rufen Sie alle Ihre Inhalte direkt mit einem einzigen Hook ab.<br><br> - [React-Integration](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Konsistente Implementierung für Server-Komponenten**<br><br>Perfekt geeignet für Next.js-Server-Komponenten: Nutzen Sie dieselbe Implementierung sowohl für Client- als auch für Server-Komponenten. Das Weiterreichen Ihrer `t`-Funktion durch die Server-Komponenten entfällt.<br><br> - [Server-Komponenten](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Organisierte Codebasis**<br><br>Halten Sie Ihre Codebasis organisierter: 1 Komponente = 1 Wörterbuch im selben Ordner. Übersetzungen in der Nähe der jeweiligen Komponenten verbessern die Wartbarkeit und Klarheit.<br><br> - [Wie Intlayer funktioniert](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                          |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Erweitertes Routing**<br><br>Volle Unterstützung von App-Routing, das sich nahtlos an komplexe Anwendungsstrukturen für Next.js, React, Vite, Vue.js usw. anpasst.<br><br> - [Erkunden Sie die Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Markdown-Unterstützung**<br><br>Importieren und interpretieren Sie lokale Dateien und Remote-Markdown für mehrsprachige Inhalte wie Datenschutzrichtlinien, Dokumentationen usw. Interpretieren Sie Markdown-Metadaten und machen Sie sie in Ihrem Code zugänglich.<br><br> - [Inhaltsdateien](https://intlayer.org/doc/concept/content/file)                                                                                                            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Kostenloser visueller Editor & CMS**<br><br>Ein kostenloser visueller Editor und ein CMS stehen für Texter zur Verfügung, sodass keine externe Lokalisierungsplattform erforderlich ist. Synchronisieren Sie Ihre Inhalte über Git oder lagern Sie sie ganz oder teilweise in das CMS aus.<br><br> - [Intlayer-Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer-CMS](https://intlayer.org/doc/concept/cms)                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Tree-shakable Inhalte**<br><br>Tree-shakable Inhalte, die die Größe des finalen Bundles reduzieren. Lädt Inhalte pro Komponente und schließt ungenutzte Inhalte aus Ihrem Bundle aus. Unterstützt Lazy Loading zur Steigerung der Ladeeffizienz der App.<br><br> - [Optimierung des App-Builds](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Statisches Rendering**<br><br>Blockiert kein statisches Rendering.<br><br> - [Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                          |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **KI-gestützte Übersetzung**<br><br>Übersetzen Sie Ihre Website mit nur einem Klick in 231 Sprachen mithilfe der fortschrittlichen KI-gestützten Übersetzungstools von Intlayer unter Verwendung Ihres eigenen KI-Anbieters/API-Schlüssels.<br><br> - [CI/CD-Integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer-CLI](https://intlayer.org/doc/concept/cli) <br> - [Automatisches Ausfüllen](https://intlayer.org/doc/concept/auto-fill) |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCP-Server-Integration**<br><br>Bietet einen MCP-Server (Model Context Protocol) für die IDE-Automatisierung, der ein nahtloses Inhaltsmanagement und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht.<br><br> - [MCP-Server](https://github.com/aymericzip/intlayer/blob/main/docs/de/mcp_server.md)                                                                                                                                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode-Erweiterung**<br><br>Intlayer bietet eine VSCode-Erweiterung zur Verwaltung Ihrer Inhalte und Übersetzungen, zum Erstellen von Wörterbüchern, zum Übersetzen von Inhalten und mehr.<br><br> - [VSCode-Erweiterung](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                    |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilität**<br><br>Ermöglicht die Interoperabilität mit react-i18next, next-i18next, next-intl und react-intl.<br><br> - [Intlayer und react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer und next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer und next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                               |
-| Fehlende Übersetzungen testen (CLI/CI)                                                                                    | ✅ CLI: npx intlayer content test (CI-freundlicher Audit)                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Funktion                                                                                                                  | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Cross-Framework-Unterstützung**<br><br>Intlayer ist kompatibel mit allen gängigen Frameworks und Bibliotheken, einschließlich Next.js, React, Vite, Vue.js, Nuxt, Preact, Express und mehr.                                                                                                                                                                                                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **JavaScript-gestütztes Inhaltsmanagement**<br><br>Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.<br><br> - [Inhaltsdeklaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                                                                                     |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compiler**<br><br>Der Intlayer-Compiler extrahiert automatisch Inhalte aus Ihren Komponenten und generiert die Wörterbuchdateien.<br><br> - [Compiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                                                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Inhaltsdeklarationsdatei pro Sprache**<br><br>Beschleunigen Sie Ihre Entwicklung, indem Sie Ihre Inhalte vor der automatischen Generierung einmal deklarieren.<br><br> - [Inhaltsdeklarationsdatei pro Sprache](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Typsichere Umgebung**<br><br>Nutzen Sie TypeScript, um sicherzustellen, dass Ihre Inhaltsdefinitionen und Ihr Code fehlerfrei sind, während Sie gleichzeitig von der IDE-Autovervollständigung profitieren.<br><br> - [TypeScript-Konfiguration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Vereinfachtes Setup**<br><br>Schnell einsatzbereit mit minimaler Konfiguration. Passen Sie Einstellungen für Internationalisierung, Routing, KI, Build und Inhaltsverarbeitung mit Leichtigkeit an.<br><br> - [Erkunden Sie die Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Vereinfachtes Abrufen von Inhalten**<br><br>Sie müssen Ihre `t`-Funktion nicht für jedes Inhaltselement einzeln aufrufen. Rufen Sie alle Ihre Inhalte direkt mit einem einzigen Hook ab.<br><br> - [React-Integration](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Konsistente Implementierung für Server-Komponenten**<br><br>Perfekt geeignet für Next.js-Server-Komponenten: Nutzen Sie dieselbe Implementierung sowohl für Client- als auch für Server-Komponenten. Das Weiterreichen Ihrer `t`-Funktion durch die Server-Komponenten entfällt.<br><br> - [Server-Komponenten](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Organisierte Codebasis**<br><br>Halten Sie Ihre Codebasis organisierter: 1 Komponente = 1 Wörterbuch im selben Ordner. Übersetzungen in der Nähe der jeweiligen Komponenten verbessern die Wartbarkeit und Klarheit.<br><br> - [Wie Intlayer funktioniert](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Erweitertes Routing**<br><br>Volle Unterstützung von App-Routing, das sich nahtlos an komplexe Anwendungsstrukturen für Next.js, React, Vite, Vue.js usw. anpasst.<br><br> - [Erkunden Sie die Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Markdown-Unterstützung**<br><br>Importieren und interpretieren Sie lokale Dateien und Remote-Markdown für mehrsprachige Inhalte wie Datenschutzrichtlinien, Dokumentationen usw. Interpretieren Sie Markdown-Metadaten und machen Sie sie in Ihrem Code zugänglich.<br><br> - [Inhaltsdateien](https://intlayer.org/doc/concept/content/file)                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Kostenloser visueller Editor & CMS**<br><br>Ein kostenloser visueller Editor und ein CMS stehen für Texter zur Verfügung, sodass keine externe Lokalisierungsplattform erforderlich ist. Synchronisieren Sie Ihre Inhalte über Git oder lagern Sie sie ganz oder teilweise in das CMS aus.<br><br> - [Intlayer-Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer-CMS](https://intlayer.org/doc/concept/cms)                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Tree-shakable Inhalte**<br><br>Tree-shakable Inhalte, die die Größe des finalen Bundles reduzieren. Lädt Inhalte pro Komponente und schließt ungenutzte Inhalte aus Ihrem Bundle aus. Unterstützt Lazy Loading zur Steigerung der Ladeeffizienz der App.<br><br> - [Optimierung des App-Builds](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                                                                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Statisches Rendering**<br><br>Blockiert kein statisches Rendering.<br><br> - [Next.js-Integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **KI-gestützte Übersetzung**<br><br>Übersetzen Sie Ihre Website mit nur einem Klick in 231 Sprachen mithilfe der fortschrittlichen KI-gestützten Übersetzungstools von Intlayer unter Verwendung Ihres eigenen KI-Anbieters/API-Schlüssels.<br><br> - [CI/CD-Integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer-CLI](https://intlayer.org/doc/concept/cli) <br> - [Automatisches Ausfüllen](https://intlayer.org/doc/concept/auto-fill)            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCP-Server-Integration**<br><br>Bietet einen MCP-Server (Model Context Protocol) für die IDE-Automatisierung, der ein nahtloses Inhaltsmanagement und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht.<br><br> - [MCP-Server](https://github.com/aymericzip/intlayer/blob/main/docs/de/mcp_server.md)                                                                                                                                                |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode-Erweiterung**<br><br>Intlayer bietet eine VSCode-Erweiterung zur Verwaltung Ihrer Inhalte und Übersetzungen, zum Erstellen von Wörterbüchern, zum Übersetzen von Inhalten und mehr.<br><br> - [VSCode-Erweiterung](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilität**<br><br>Ermöglicht die Interoperabilität mit react-i18next, next-i18next, next-intl und react-intl.<br><br> - [Intlayer und react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer und next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer und next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer Compat-Adapter](https://intlayer.org/doc/compatibility) |
+| Fehlende Übersetzungen testen (CLI/CI)                                                                                    | ✅ CLI: npx intlayer content test (CI-freundlicher Audit)                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 ## Vergleich von Intlayer mit anderen Lösungen
 
@@ -290,3 +290,5 @@ GitHub-Sterne sind ein starker Indikator für die Popularität eines Projekts, d
 `intlayer` kann Ihnen auch dabei helfen, Ihre Namespaces für `react-intl`, `react-i18next`, `next-intl`, `next-i18next` und `vue-i18n` zu verwalten.
 
 Durch die Verwendung von `intlayer` können Sie Ihre Inhalte im Format Ihrer bevorzugten i18n-Bibliothek deklarieren, und Intlayer generiert Ihre Namespaces am Speicherort Ihrer Wahl (Beispiel: `/messages/{{locale}}/{{namespace}}.json`).
+
+Wenn Sie die API Ihrer aktuellen i18n-Bibliothek weiterhin verwenden möchten, stellt `intlayer` außerdem **Compat-Adapter** bereit: Pakete, die exakt dieselbe API wie `react-i18next`, `next-intl`, `react-intl`, `vue-i18n` und weitere bereitstellen, jedoch aus Intlayer-Wörterbüchern bedient werden. So können Sie schrittweise migrieren, ohne Ihren Code neu zu schreiben. Siehe die [Dokumentation der Compat-Adapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md).

package/docs/de/intlayer_with_svelte_kit.md

@@ -404,7 +404,7 @@ export const getLocale = (event: RequestEvent): Locale => {
 };
 ```
 
-> `getLocaleFromStorage` überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter [Configuration](https://intlayer.org/doc/configuration).
+> `getLocaleFromStorage` überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter [Configuration](https://intlayer.org/doc/concept/configuration).
 
 > Die Funktion `localeDetector` verarbeitet den `Accept-Language`-Header und gibt die beste Übereinstimmung zurück.
 

package/docs/de/intlayer_with_tanstack+solid.md

@@ -254,19 +254,21 @@ import {
   HeadContent,
   Scripts,
   createRootRouteWithContext,
+  getRouteApi,
 } from "@tanstack/solid-router";
 import { HydrationScript } from "solid-js/web";
 import { Suspense, type ParentComponent } from "solid-js";
 import { IntlayerProvider } from "solid-intlayer";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext()({
   shellComponent: RootComponent,
 });
 
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (
@@ -551,7 +553,7 @@ Wie in Schritt 5 zu sehen ist, können Sie die Attribute `lang` und `dir` des `h
 
 ```tsx fileName="src/routes/__root.tsx"
 const RootComponent: ParentComponent = (props) => {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params()?.locale ?? defaultLocale;
 
   return (

package/docs/de/intlayer_with_tanstack.md

@@ -271,13 +271,15 @@ Konfigurieren Sie Ihr Root-Layout zur Unterstützung der Internationalisierung,
 ```tsx fileName="src/routes/__root.tsx"
 import {
   createRootRouteWithContext,
+  getRouteApi,
   HeadContent,
   Scripts,
 } from "@tanstack/react-router";
 import { defaultLocale, getHTMLTextDir } from "intlayer";
 import { type ReactNode } from "react";
 import { IntlayerProvider } from "react-intlayer";
-import { Route as LocaleRoute } from "./{-$locale}/route";
+
+const localeRoute = getRouteApi("/{-$locale}");
 
 export const Route = createRootRouteWithContext<{}>()({
   head: () => ({
@@ -299,7 +301,7 @@ export const Route = createRootRouteWithContext<{}>()({
 });
 
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (
@@ -632,7 +634,7 @@ Wie in Schritt 5 gezeigt, können Sie die Attribute `lang` und `dir` des `html`-
 
 ```tsx fileName="src/routes/__root.tsx"
 function RootDocument({ children }: { children: ReactNode }) {
-  const params = LocaleRoute.useParams();
+  const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
 
   return (