@intlayer/docs 5.5.9 → 5.5.11

package/docs/de/how_works_intlayer.md

@@ -0,0 +1,251 @@
+---
+createdAt: 2024-08-12
+updatedAt: 2025-06-29
+title: Wie Intlayer funktioniert
+description: Erfahren Sie, wie Intlayer intern funktioniert. Verstehen Sie die Architektur und die Komponenten, die Intlayer leistungsstark machen.
+keywords:
+  - Intlayer
+  - Wie es funktioniert
+  - Architektur
+  - Komponenten
+  - Interne Abläufe
+slugs:
+  - doc
+  - concept
+  - how-works-intlayer
+---
+
+# Wie Intlayer funktioniert
+
+## Übersicht
+
+Die Hauptidee hinter Intlayer ist die komponentenbasierte Inhaltsverwaltung. Die Idee ist, dass Sie Ihre Inhalte überall in Ihrem Code deklarieren können, z. B. im selben Verzeichnis wie Ihre Komponente.
+
+```bash
+.
+└── Komponenten
+    └── MeineKomponente
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+Dazu hat Intlayer die Aufgabe, alle Ihre `Inhaltsdeklarationsdateien` in allen verschiedenen Formaten, die in Ihrem Projekt vorhanden sind, zu finden und daraus die `Wörterbücher` zu generieren.
+
+Es gibt also zwei Hauptschritte:
+
+- Build-Schritt
+- Interpretationsschritt
+
+### Build-Schritt der Wörterbücher
+
+Der Build-Schritt kann auf drei Arten durchgeführt werden:
+
+- Verwendung der CLI mit `npx intlayer build`
+- Verwendung der [VSCode-Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/vs_code_extension.md)
+- Verwendung von App-Plugins wie dem [`vite-intlayer`-Paket](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/vite-intlayer/index.md) oder deren Äquivalenten für [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/index.md). Wenn Sie eines dieser Plugins verwenden, wird Intlayer Ihre Wörterbücher automatisch erstellen, wenn Sie Ihre Anwendung starten (dev) oder bauen (prod).
+
+1. Deklaration von Inhaltsdateien
+
+   - Inhaltsdateien können in verschiedenen Formaten definiert werden, wie TypeScript, ECMAScript, CommonJS oder JSON.
+   - Inhaltsdateien können überall im Projekt definiert werden, was eine bessere Wartung und Skalierbarkeit ermöglicht. Es ist wichtig, die Dateierweiterungskonventionen für Inhaltsdateien zu beachten. Diese Erweiterung ist standardmäßig `*.content.{js|cjs|mjs|ts|tsx|json}`, kann jedoch in der [Konfigurationsdatei](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md) geändert werden.
+
+2. Generierung von `Wörterbüchern`
+
+   - Wörterbücher werden aus Inhaltsdateien generiert. Standardmäßig werden Intlayer-Wörterbücher im Verzeichnis `.intlayer/dictionaries` des Projekts generiert.
+   - Diese Wörterbücher werden in verschiedenen Formaten generiert, um alle Anforderungen zu erfüllen und die Leistung der Anwendung zu optimieren.
+
+3. Generierung von Wörterbuchtypen
+   Basierend auf Ihren `Wörterbüchern` generiert Intlayer Typen, um sie in Ihrer Anwendung nutzbar zu machen.
+
+- Wörterbuchtypen werden aus Intlayer-`Content-Deklarationsdateien` generiert. Standardmäßig werden Intlayer-Wörterbuchtypen im Verzeichnis `.intlayer/types` des Projekts generiert.
+
+- Intlayer [Modulerweiterung](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) ist eine TypeScript-Funktion, die es Ihnen ermöglicht, zusätzliche Typen für Intlayer zu definieren. Dies erleichtert die Entwicklungserfahrung, indem verfügbare oder erforderliche Argumente vorgeschlagen werden.
+  Unter den generierten Typen werden Intlayer-Wörterbuchtypen oder sogar Sprachkonfigurationstypen zur Datei `types/intlayer.d.ts` hinzugefügt und von anderen Paketen verwendet. Dazu muss die Datei `tsconfig.json` so konfiguriert sein, dass sie das `types`-Verzeichnis des Projekts einbezieht.
+
+### Interpretationsschritt der Wörterbücher
+
+Mit Intlayer greifen Sie über den `useIntlayer`-Hook auf Ihre Inhalte in Ihrer Anwendung zu.
+
+```tsx
+const MeineKomponente = () => {
+  const content = useIntlayer("meine-komponente");
+  return <div>{content.title}</div>;
+};
+```
+
+Dieser Hook übernimmt die Lokalisierungserkennung für Sie und gibt die Inhalte für die aktuelle Sprache zurück. Mit diesem Hook können Sie auch Markdown interpretieren, Pluralisierung verwalten und mehr.
+
+> Um alle Funktionen von Intlayer zu sehen, können Sie die [Wörterbuchdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md) lesen.
+
+## Entfernte Inhalte
+
+Intlayer ermöglicht es Ihnen, Inhalte lokal zu deklarieren und sie dann in das CMS zu exportieren, damit sie von Ihrem nicht-technischen Team bearbeitet werden können.
+
+So können Sie Inhalte ähnlich wie bei Git für Ihren Code vom CMS in Ihre Anwendung pushen und pullen.
+
+Für externalisierte Wörterbücher, die das CMS verwenden, führt Intlayer eine einfache Abrufoperation durch, um entfernte Wörterbücher abzurufen und mit Ihren lokalen zu verschmelzen. Wenn in Ihrem Projekt konfiguriert, verwaltet Intlayer automatisch das Abrufen der Inhalte aus dem CMS, wenn die Anwendung startet (dev) oder gebaut wird (prod).
+
+## Visueller Editor
+
+Intlayer bietet auch einen visuellen Editor, mit dem Sie Ihre Inhalte visuell bearbeiten können. Dieser [visuelle Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) ist im externen Paket `intlayer-editor` verfügbar.
+
+![visueller Editor](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
+
+- Der Server ist eine einfache Express-Anwendung, die Anfragen vom Client entgegennimmt und den Inhalt Ihrer Anwendung, wie die `dictionaries` und die Konfiguration, abruft, um sie auf der Client-Seite zugänglich zu machen.
+- Der Client hingegen ist eine React-Anwendung, die verwendet wird, um mit Ihren Inhalten über eine visuelle Oberfläche zu interagieren.
+  Wenn Sie Ihre Inhalte mit `useIntlayer` aufrufen und der Editor aktiviert ist, werden Ihre Strings automatisch mit einem Proxy-Objekt namens `IntlayerNode` umschlossen. Dieses Node verwendet `window.sendMessage`, um mit einem eingebetteten iframe zu kommunizieren, das die Oberfläche des visuellen Editors enthält.  
+  Auf der Editor-Seite hört der Editor auf diese Nachrichten und simuliert eine echte Interaktion mit Ihren Inhalten, sodass Sie den Text direkt im Kontext Ihrer Anwendung bearbeiten können.
+
+## Optimierung des App-Builds
+
+Um die Bundle-Größe Ihrer Anwendung zu optimieren, bietet Intlayer zwei Plugins zur Optimierung des Builds Ihrer Anwendung: `@intlayer/babel` und `@intlayer/swc` Plugins.
+Die Babel- und SWC-Plugins funktionieren, indem sie den Abstract Syntax Tree (AST) Ihrer Anwendung analysieren, um Aufrufe von Intlayer-Funktionen durch optimierten Code zu ersetzen. Dieser Prozess macht Ihr endgültiges Bundle in der Produktion leichter, indem sichergestellt wird, dass nur die tatsächlich verwendeten Wörterbücher importiert werden, das Chunking optimiert und die Bundle-Größe reduziert wird.
+
+Im Entwicklungsmodus verwendet Intlayer einen zentralisierten statischen Import für Wörterbücher, um die Entwicklungserfahrung zu vereinfachen.
+
+Durch Aktivieren der Option `activateDynamicImport` in der [Konfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md) verwendet Intlayer den dynamischen Import, um die Wörterbücher zu laden. Diese Option ist standardmäßig deaktiviert, um asynchrone Verarbeitung beim Rendern der Anwendung zu vermeiden.
+
+> `@intlayer/babel` ist standardmäßig im `vite-intlayer`-Paket enthalten,
+
+> `@intlayer/swc` ist standardmäßig nicht im `next-intlayer`-Paket installiert, da SWC-Plugins in Next.js noch experimentell sind.
+
+Um zu sehen, wie Sie den Build Ihrer Anwendung konfigurieren können, lesen Sie die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
+
+## Pakete
+
+Intlayer besteht aus mehreren Paketen, die jeweils eine spezifische Rolle im Übersetzungsprozess spielen. Hier ist eine grafische Darstellung der Struktur dieses Pakets:
+
+![Pakete von Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+Das `intlayer`-Paket wird in Anwendungen verwendet, um Inhalte in Inhaltsdateien zu deklarieren.
+
+### react-intlayer
+
+Das `react-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in React-Anwendungen nutzbar zu machen.
+
+### next-intlayer
+
+Das `next-intlayer`-Paket wird als Schicht über `react-intlayer` verwendet, um Intlayer-Wörterbücher in Next.js-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, um Intlayer in einer Next.js-Umgebung zum Laufen zu bringen, wie Übersetzungsmiddleware, Routing oder die Konfiguration der Datei `next.config.js`.
+
+### vue-intlayer
+
+Das `vue-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Vue-Anwendungen nutzbar zu machen.
+
+### nuxt-intlayer
+
+Das `nuxt-intlayer`-Paket ist ein Nuxt-Modul, um Intlayer-Wörterbücher in Nuxt-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, damit Intlayer in einer Nuxt-Umgebung funktioniert, wie z. B. Übersetzungs-Middleware, Routing oder die Konfiguration der `nuxt.config.js`-Datei.
+
+### svelte-intlayer (WIP)
+
+Das `svelte-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Svelte-Anwendungen nutzbar zu machen.
+
+### solid-intlayer (WIP)
+
+Das `solid-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Solid.js-Anwendungen nutzbar zu machen.
+
+### preact-intlayer
+
+Das `preact-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Preact-Anwendungen nutzbar zu machen.
+
+### angular-intlayer (WIP)
+
+Das `angular-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Angular-Anwendungen nutzbar zu machen.
+
+### express-intlayer
+
+Das `express-intlayer`-Paket wird verwendet, um Intlayer auf einem Express.js-Backend zu nutzen.
+
+### react-native-intlayer
+
+Das `react-native-intlayer`-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Metro-Bundler zu arbeiten.
+
+### lynx-intlayer
+
+Das `lynx-intlayer`-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Lynx-Bundler zu arbeiten.
+
+### vite-intlayer
+
+Beinhaltet das Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.
+
+### react-scripts-intlayer
+
+Beinhaltet die `react-scripts-intlayer` Befehle und Plugins zur Integration von Intlayer in Anwendungen, die auf Create React App basieren. Diese Plugins basieren auf [craco](https://craco.js.org/) und enthalten zusätzliche Konfigurationen für den [Webpack](https://webpack.js.org/) Bundler.
+
+### intlayer-editor
+
+Das `intlayer-editor` Paket wird verwendet, um die Nutzung des visuellen Editors zu ermöglichen. Dieses optionale Paket kann in Anwendungen installiert werden und wird vom `react-intlayer` Paket verwendet.  
+Es besteht aus zwei Teilen: dem Server und dem Client.
+
+Der Client enthält UI-Elemente, die von `react-intlayer` verwendet werden.
+
+Der Server, basierend auf Express, wird verwendet, um Anfragen des visuellen Editors zu empfangen und Inhaltsdateien zu verwalten oder zu ändern.
+
+### intlayer-cli
+
+Das `intlayer-cli` Paket kann verwendet werden, um Wörterbücher mit dem Befehl `npx intlayer dictionaries build` zu generieren. Wenn `intlayer` bereits installiert ist, wird die CLI automatisch installiert und dieses Paket ist nicht erforderlich.
+
+### @intlayer/core
+
+Das `@intlayer/core` Paket ist das Hauptpaket von Intlayer. Es enthält Funktionen zur Übersetzung und Wörterbuchverwaltung. `@intlayer/core` ist plattformübergreifend und wird von anderen Paketen verwendet, um Wörterbücher zu interpretieren.
+
+### @intlayer/config
+
+Das `@intlayer/config` Paket wird verwendet, um Intlayer-Einstellungen zu konfigurieren, wie z. B. verfügbare Sprachen, Next.js Middleware-Parameter oder die integrierten Editor-Einstellungen.
+
+### @intlayer/webpack
+
+Das `@intlayer/webpack` Paket wird verwendet, um eine Webpack-Konfiguration bereitzustellen, die eine auf Webpack basierende Anwendung mit Intlayer kompatibel macht. Das Paket stellt außerdem ein Plugin bereit, das zu einer bestehenden Webpack-Anwendung hinzugefügt werden kann.
+
+### @intlayer/cli
+
+Das `@intlayer/cli` Paket ist ein NPM-Paket, das verwendet wird, um Skripte im Zusammenhang mit den Intlayer-Befehlszeilenschnittstellen zu deklarieren. Es stellt die Einheitlichkeit aller Intlayer-CLI-Befehle sicher. Dieses Paket wird insbesondere von den Paketen [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/de/packages/intlayer-cli/index.md) und [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/de/packages/intlayer/index.md) verwendet.
+
+### @intlayer/mcp
+
+Das `@intlayer/mcp` Paket stellt einen MCP (Model Context Protocol) Server bereit, der KI-gestützte IDE-Unterstützung speziell für das Intlayer-Ökosystem liefert. Es lädt automatisch die Dokumentation und integriert sich in die Intlayer CLI.
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+Die Pakete `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` und `@intlayer/dynamic-dictionaries-entry` geben den Einstiegspfad der Intlayer-Wörterbücher zurück. Da eine Suche im Dateisystem vom Browser aus nicht möglich ist, kann der Einstiegspfad der Wörterbücher mit Bundlern wie Webpack oder Rollup nicht ermittelt werden. Diese Pakete sind so konzipiert, dass sie als Aliase verwendet werden können, um eine Optimierung des Bundlings über verschiedene Bundler wie Vite, Webpack und Turbopack zu ermöglichen.
+
+### @intlayer/chokidar
+
+Das `@intlayer/chokidar` Paket wird verwendet, um Inhaltsdateien zu überwachen und das geänderte Wörterbuch bei jeder Änderung neu zu generieren.
+
+### @intlayer/editor
+
+Das `@intlayer/editor` Paket stellt die Dienstprogramme im Zusammenhang mit dem Wörterbuch-Editor bereit. Es enthält insbesondere die API, um eine Anwendung mit dem Intlayer-Editor zu verbinden, sowie Dienstprogramme zur Manipulation von Wörterbüchern. Dieses Paket ist plattformübergreifend.
+
+### @intlayer/editor-react
+
+Das `@intlayer/editor-react` Paket stellt Zustände, Kontexte, Hooks und Komponenten bereit, um eine React-Anwendung mit dem Intlayer-Editor zu verbinden.
+
+### @intlayer/babel
+
+Das `@intlayer/babel` Paket stellt Werkzeuge bereit, die das Bundling von Wörterbüchern für Vite- und Webpack-basierte Anwendungen optimieren.
+
+### @intlayer/swc
+
+Das `@intlayer/swc` Paket stellt Werkzeuge bereit, die das Bundling von Wörterbüchern für Next.js-Anwendungen optimieren.
+
+### @intlayer/api
+
+Das `@intlayer/api` Paket ist ein API-SDK, um mit dem Backend zu interagieren.
+
+### @intlayer/design-system
+
+Das `@intlayer/design-system` Paket wird verwendet, um Designelemente zwischen dem CMS und dem visuellen Editor zu teilen.
+
+### @intlayer/backend
+
+Das `@intlayer/backend` Paket exportiert Backend-Typen und wird in Zukunft das Backend als eigenständiges Paket anbieten.
+
+## Chat mit unserer intelligenten Dokumentation
+
+- [Stellen Sie Ihre Fragen an unsere intelligente Dokumentation](https://intlayer.org/de/doc/chat)
+
+## Dokumentationsverlauf
+
+- 5.5.10 - 2025-06-29: Initialer Verlauf

package/docs/de/index.md

@@ -0,0 +1,166 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Intlayer Dokumentation - Vollständiger i18n Leitfaden für JavaScript
+description: Vollständige Dokumentation für Intlayer, die moderne Internationalisierungsbibliothek für JavaScript, React, Next.js, Express und weitere Frameworks.
+keywords:
+  - intlayer
+  - internationalisierung
+  - i18n
+  - JavaScript
+  - React
+  - Next.js
+  - dokumentation
+  - übersetzung
+  - mehrsprachig
+slugs:
+  - doc
+  - index
+---
+
+# Intlayer Dokumentation
+
+Willkommen in der offiziellen **Intlayer**-Dokumentation! Hier finden Sie alles, was Sie benötigen, um Intlayer zu integrieren, zu konfigurieren und zu meistern – für all Ihre Internationalisierungs- (i18n) Anforderungen, egal ob Sie mit **Next.js**, **React**, **Vite**, **Express** oder einer anderen JavaScript-Umgebung arbeiten.
+
+Intlayer bietet einen flexiblen, modernen Ansatz zur Übersetzung Ihrer Anwendung. Unsere Dokumentation führt Sie von der Installation und Einrichtung bis hin zu fortgeschrittenen Funktionen wie **KI-gestützter Übersetzung**, **TypeScript**-Definitionen und **Server-Komponenten**-Unterstützung, damit Sie ein nahtloses, mehrsprachiges Erlebnis schaffen können.
+
+---
+
+## Erste Schritte
+
+- **[Einführung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/introduction.md)**  
+  Verschaffen Sie sich einen Überblick darüber, wie Intlayer funktioniert, welche Kernfunktionen es bietet und warum es ein Wendepunkt für die Internationalisierung (i18n) ist.
+
+- **[Wie Intlayer funktioniert](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/how_works_intlayer.md)**  
+  Tauchen Sie in das architektonische Design ein und erfahren Sie, wie Intlayer alles von der Inhaltserklärung bis zur Übersetzungsauslieferung handhabt.
+
+- **[Konfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)**  
+  Passen Sie Intlayer an die Bedürfnisse Ihres Projekts an. Erkunden Sie Middleware-Optionen, Verzeichnisstrukturen und erweiterte Einstellungen.
+
+- **[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md)**
+
+Verwalten Sie Inhalte und Übersetzungen mit unserem Kommandozeilen-Tool. Entdecken Sie, wie Sie Inhalte pushen und pullen, Übersetzungen automatisieren und mehr.
+
+- **[Intlayer Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md)**  
+  Vereinfachen Sie die Zusammenarbeit mit Nicht-Entwicklern und stärken Sie Ihre Übersetzungen mit KI, direkt in unserem kostenlosen, intuitiven CMS.
+
+---
+
+## Kernkonzepte
+
+### Wörterbuch
+
+Organisieren Sie Ihre mehrsprachigen Inhalte nahe am Code, um alles konsistent und wartbar zu halten.
+
+- **[Erste Schritte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md)**  
+  Lernen Sie die Grundlagen der Inhaltserklärung in Intlayer kennen.
+
+- **[Übersetzung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/translation.md)**
+
+Verstehen Sie, wie Übersetzungen generiert, gespeichert und in Ihrer Anwendung genutzt werden.
+
+- **[Enumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/enumeration.md)**  
+  Verwalten Sie einfach wiederholte oder feste Datensätze in verschiedenen Sprachen.
+
+- **[Condition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/conditional.md)**  
+  Lernen Sie, wie Sie bedingte Logik in Intlayer verwenden, um dynamische Inhalte zu erstellen.
+
+- **[Insertion](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/insertion.md)**  
+  Entdecken Sie, wie Sie Werte in einen String mit Einfügeplatzhaltern einfügen.
+
+- **[Function Fetching](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/function_fetching.md)**
+
+Sehen Sie, wie Sie Inhalte mit benutzerdefinierter Logik dynamisch abrufen können, um den Workflow Ihres Projekts anzupassen.
+
+- **[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/markdown.md)**  
+  Lernen Sie, wie Sie Markdown in Intlayer verwenden, um reichhaltige Inhalte zu erstellen.
+
+- **[Datei-Einbettungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/file_embeddings.md)**  
+  Entdecken Sie, wie Sie externe Dateien in Intlayer einbetten, um sie im Inhaltseditor zu verwenden.
+
+- **[Verschachtelung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/nesting.md)**  
+  Verstehen Sie, wie Sie Inhalte in Intlayer verschachteln, um komplexe Strukturen zu erstellen.
+
+---
+
+## Umgebungen & Integrationen
+
+Wir haben Intlayer mit Blick auf Flexibilität entwickelt und bieten nahtlose Integration in beliebte Frameworks und Build-Tools:
+
+- **[Intlayer mit Next.js 15](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_15.md)**
+- **[Intlayer mit Next.js 14 (App Router)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_14.md)**
+- **[Intlayer mit Next.js Page Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_page_router.md)**
+- **[Intlayer mit React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_create_react_app.md)**
+- **[Intlayer mit Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)**
+- **[Intlayer mit React Native und Expo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_react_native+expo.md)**
+- **[Intlayer mit Lynx und React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_lynx+react.md)**
+- **[Intlayer mit Express](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_express.md)**
+
+Jeder Integrationsleitfaden enthält bewährte Methoden zur Nutzung der Intlayer-Funktionen wie **Server-Side Rendering**, **dynamisches Routing** oder **Client-Side Rendering**, damit Sie eine schnelle, SEO-freundliche und hoch skalierbare Anwendung aufrechterhalten können.
+
+---
+
+## Pakete
+
+Das modulare Design von Intlayer bietet dedizierte Pakete für spezifische Umgebungen und Anforderungen:
+
+### `intlayer`
+
+Kernnützliche Funktionen zur Konfiguration und Verwaltung Ihrer i18n-Einrichtung.
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+Nutzen Sie Intlayer in **Express**-basierten Anwendungen:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/express-intlayer/t.md)**  
+  Ein minimaler, unkomplizierter Übersetzungshilfe für Ihre Server-Routen und Ansichten.
+
+### `react-intlayer`
+
+Verbessern Sie Ihre **React**-Anwendungen mit leistungsstarken Hooks:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+Nahtlose Integration mit **Next.js**:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/next-intlayer/useLocale.md)**
+
+---
+
+## Zusätzliche Ressourcen
+
+- **[Blog: Intlayer und i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_i18next.md)**  
+  Erfahren Sie, wie Intlayer die beliebte **i18next**-Bibliothek ergänzt und sich mit ihr vergleicht.
+
+- **[Live-Tutorial auf YouTube](https://youtu.be/W2G7KxuSD4c?si=GyU_KpVhr61razRw)**  
+  Sehen Sie sich eine umfassende Demo an und lernen Sie, wie Sie Intlayer in Echtzeit integrieren.
+
+---
+
+## Beiträge & Feedback
+
+Wir schätzen die Kraft von Open-Source und gemeinschaftsgetriebener Entwicklung. Wenn Sie Verbesserungen vorschlagen, einen neuen Leitfaden hinzufügen oder Fehler in unserer Dokumentation korrigieren möchten, können Sie gerne einen Pull Request einreichen oder ein Issue in unserem [GitHub-Repository](https://github.com/aymericzip/intlayer/blob/main/docs/docs) eröffnen.
+
+**Bereit, Ihre Anwendung schneller und effizienter zu übersetzen?** Tauchen Sie in unsere Dokumentation ein und beginnen Sie noch heute mit der Nutzung von Intlayer. Erleben Sie einen robusten, optimierten Ansatz zur Internationalisierung, der Ihre Inhalte organisiert und Ihr Team produktiver macht.
+
+## Dokumentationsverlauf
+
+- 5.5.10 - 2025-06-29: Initiale Historie

package/docs/de/interest_of_intlayer.md

@@ -0,0 +1,156 @@
+---
+createdAt: 2024-08-14
+updatedAt: 2025-06-29
+title: Interesse an Intlayer
+description: Entdecken Sie die Vorteile und Nutzen der Verwendung von Intlayer in Ihren Projekten. Verstehen Sie, warum Intlayer sich von anderen Frameworks abhebt.
+keywords:
+  - Vorteile
+  - Nutzen
+  - Intlayer
+  - Framework
+  - Vergleich
+slugs:
+  - doc
+  - concept
+  - interest
+---
+
+# Intlayer: Ein maßgeschneiderter Weg, Ihre Website zu übersetzen
+
+**Intlayer** ist eine Internationalisierungsbibliothek, die speziell für JavaScript-Entwickler entwickelt wurde. Sie ermöglicht die Deklaration Ihres Inhalts überall in Ihrem Code. Sie wandelt die Deklaration von mehrsprachigem Inhalt in strukturierte Wörterbücher um, um eine einfache Integration in Ihren Code zu gewährleisten. Durch die Verwendung von TypeScript macht **Intlayer** Ihre Entwicklung robuster und effizienter.
+
+## Anwendungsbeispiel
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Beispielinhalt für die Komponente mit mehrsprachigem Text
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## Warum Intlayer wählen?
+
+| Funktion                                      | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **JavaScript-gesteuertes Content-Management** | Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.                                                                                                                                                                                                                                                                                                                                                                               |
+| **Typensichere Umgebung**                     | Nutzen Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.                                                                                                                                                                                                                                                                                                                                                                          |
+| **Integrierte Inhaltsdateien**                | Halten Sie Ihre Übersetzungen nahe bei den jeweiligen Komponenten, um die Wartbarkeit und Klarheit zu verbessern.                                                                                                                                                                                                                                                                                                                                                                   |
+| **Vereinfachte Einrichtung**                  | Starten Sie schnell mit minimaler Konfiguration, speziell optimiert für Next.js-Projekte.                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Server-Komponenten-Unterstützung**          | Perfekt geeignet für Next.js-Serverkomponenten und gewährleistet ein reibungsloses serverseitiges Rendering.                                                                                                                                                                                                                                                                                                                                                                        |
+| **Erweiterte Routing-Funktionalität**         | Vollständige Unterstützung für das Routing von Next.js-Apps, die sich nahtlos an komplexe Anwendungsstrukturen anpasst.                                                                                                                                                                                                                                                                                                                                                             |
+| **Organisierte Codebasis**                    | Halten Sie Ihre Codebasis besser organisiert: 1 Komponente = 1 Wörterbuch im selben Ordner.                                                                                                                                                                                                                                                                                                                                                                                         |
+| **CI Auto-Übersetzung**                       | Füllen Sie Ihre Übersetzungen in Ihrer CI automatisch mit Ihrem eigenen OpenAI API-Schlüssel aus, wodurch die Notwendigkeit einer L10n-Plattform entfällt.                                                                                                                                                                                                                                                                                                                          |
+| **MCP-Server-Integration**                    | Bietet einen MCP (Model Context Protocol) Server für IDE-Automatisierung, der nahtloses Content-Management und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht. [Mehr erfahren](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/mcp_server.md).                                                                                                                                                                                                        |
+| **Markdown-Unterstützung**                    | Importieren und Interpretieren von Markdown-Dateien für mehrsprachige Inhalte wie Datenschutzrichtlinien.                                                                                                                                                                                                                                                                                                                                                                           |
+| **Kostenloser visueller Editor & CMS**        | Ein kostenloser visueller Editor und CMS stehen zur Verfügung, wenn Sie mit Content-Autoren für Ihre Übersetzungen zusammenarbeiten müssen. Dies eliminiert erneut die Notwendigkeit einer Lokalisierungsplattform und ermöglicht die Auslagerung von Inhalten aus dem Codebasis.                                                                                                                                                                                                   |
+| **Vereinfachte Inhaltsabfrage**               | Es ist nicht erforderlich, Ihre `t`-Funktion für jeden einzelnen Inhalt aufzurufen; rufen Sie alle Ihre Inhalte direkt mit einem einzigen Hook ab.                                                                                                                                                                                                                                                                                                                                  |
+| **Konsistente Implementierung**               | Dieselbe Implementierung für sowohl Client- als auch Server-Komponenten, es ist nicht notwendig, Ihre `t`-Funktion über jede Server-Komponente weiterzugeben.                                                                                                                                                                                                                                                                                                                       |
+| **Tree-shakable Inhalte**                     | Der Inhalt ist tree-shakable, was das endgültige Bundle erleichtert.                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Nicht-blockierendes statisches Rendering**  | Intlayer blockiert das statische Rendering nicht, wie es `next-intl` tut.                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **Interoperabilität**                         | Ermöglicht die Interoperabilität mit [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_next-intl.md) und [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_react-intl.md). |
+
+## Dokumentationshistorie
+
+- 5.5.10 - 2025-06-29: Initiale Historie