@intlayer/docs 5.7.7 → 5.8.0-canary.0

package/docs/de/formatters.md

@@ -0,0 +1,239 @@
+---
+createdAt: 2024-08-13
+updatedAt: 2025-08-20
+title: Formatierer
+description: Ortsabhängige Formatierungswerkzeuge basierend auf Intl für Zahlen, Prozentsätze, Währungen, Daten, relative Zeit, Einheiten und kompakte Notation. Enthält einen gecachten Intl-Helfer.
+keywords:
+  - Formatierer
+  - Intl
+  - Zahl
+  - Währung
+  - Prozentsatz
+  - Datum
+  - Relative Zeit
+  - Einheiten
+  - Kompakt
+  - Internationalisierung
+slugs:
+  - doc
+  - formatters
+---
+
+# Intlayer Formatierer
+
+## Übersicht
+
+Intlayer bietet eine Reihe von leichtgewichtigen Helfern, die auf den nativen `Intl`-APIs aufbauen, sowie einen gecachten `Intl`-Wrapper, um das wiederholte Erstellen schwerer Formatierer zu vermeiden. Diese Werkzeuge sind vollständig ortsabhängig und können aus dem Hauptpaket `intlayer` verwendet werden.
+
+### Import
+
+```ts
+import {
+  Intl,
+  number,
+  percentage,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+} von "intlayer";
+```
+
+Wenn Sie React verwenden, sind auch Hooks verfügbar; siehe `react-intlayer/format`.
+
+## Gecachter Intl
+
+Das exportierte `Intl` ist ein dünner, gecachter Wrapper um das globale `Intl`. Es merkt sich Instanzen von `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, wodurch vermieden wird, denselben Formatierer wiederholt neu zu erstellen.
+
+Da die Erstellung von Formatierern relativ aufwendig ist, verbessert dieses Caching die Leistung, ohne das Verhalten zu ändern. Der Wrapper bietet dieselbe API wie das native `Intl`, sodass die Nutzung identisch ist.
+
+- Das Caching erfolgt pro Prozess und ist für Aufrufer transparent.
+
+> Wenn `Intl.DisplayNames` in der Umgebung nicht verfügbar ist, wird eine einmalige Entwickler-Warnung ausgegeben (ein Polyfill wird empfohlen).
+
+Beispiel:
+
+```ts
+import { Intl } from "intlayer";
+
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+```
+
+## Formatierer
+
+Alle untenstehenden Hilfsfunktionen werden von `intlayer` exportiert.
+
+### `number(value, options?)`
+
+Formatiert einen numerischen Wert unter Verwendung von lokalisierter Gruppierung und Dezimalstellen.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Beispiele:
+
+```ts
+import { number } from "intlayer";
+
+number(123456.789); // "123,456.789" (in en-US)
+number("1000000", { locale: "fr" }); // "1 000 000"
+number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
+```
+
+### `percentage(value, options?)`
+
+Formatiert eine Zahl als Prozentzeichenkette.
+
+Verhalten: Werte größer als 1 werden als ganze Prozentsätze interpretiert und normalisiert (z. B. `25` → `25%`, `0.25` → `25%`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+
+Beispiele:
+
+```ts
+import { percentage } from "intlayer";
+
+percentage(0.25); // "25%"
+percentage(25); // "25%"
+percentage(0.237, { minimumFractionDigits: 1 }); // "23,7%"
+```
+
+### `currency(value, options?)`
+
+Formatiert einen Wert als lokalisierte Währung. Standardmäßig `USD` mit zwei Nachkommastellen.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Häufige Felder: `currency` (z. B. `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
+
+Beispiele:
+
+```ts
+import { currency } from "intlayer";
+
+currency(1234.5, { currency: "EUR" }); // "€1.234,50"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+```
+
+### `date(date, optionsOrPreset?)`
+
+Formatiert einen Datum-/Uhrzeitwert mit `Intl.DateTimeFormat`.
+
+- **date**: `Date | string | number`
+- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` oder eines der Presets:
+  - Presets: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
+
+Beispiele:
+
+```ts
+import { date } from "intlayer";
+
+date(new Date(), "short"); // z.B. "02.08.25, 14:30"
+date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
+```
+
+### `relativeTime(from, to = new Date(), options?)`
+
+Formatiert relative Zeit zwischen zwei Zeitpunkten mit `Intl.RelativeTimeFormat`.
+
+- Übergebe "now" als erstes Argument und das Ziel als zweites, um eine natürliche Formulierung zu erhalten.
+- **from**: `Date | string | number`
+- **to**: `Date | string | number` (Standard ist `new Date()`)
+- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
+  - Standard-`unit` ist `"second"`.
+
+Beispiele:
+
+```ts
+import { relativeTime } from "intlayer";
+
+const now = new Date();
+const in3Days = new Date(now.getTime() + 3 * 864e5);
+relativeTime(now, in3Days, { unit: "day" }); // "in 3 Tagen"
+
+const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
+relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "vor 2 Stunden"
+```
+
+### `units(value, options?)`
+
+Formatiert einen numerischen Wert als lokalisierten Einheitentext unter Verwendung von `Intl.NumberFormat` mit `style: 'unit'`.
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
+  - Häufige Felder: `unit` (z.B. `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
+  - Standardwerte: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
+
+Beispiele:
+
+```ts
+import { units } from "intlayer";
+
+units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
+units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (abhängig von der Locale)
+```
+
+### `compact(value, options?)`
+
+Formatiert eine Zahl mit kompakter Notation (z.B. `1.2K`, `1M`).
+
+- **value**: `number | string`
+- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (verwendet intern `notation: 'compact'`)
+
+Beispiele:
+
+```ts
+import { compact } from "intlayer";
+
+compact(1200); // "1.2K"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
+```
+
+## Hinweise
+
+- Alle Helfer akzeptieren Eingaben als `string`; diese werden intern in Zahlen oder Daten umgewandelt.
+- Die Locale verwendet standardmäßig die konfigurierte `internationalization.defaultLocale`, falls keine angegeben ist.
+- Diese Hilfsfunktionen sind dünne Wrapper; für erweiterte Formatierungen können die Standard-`Intl`-Optionen direkt verwendet werden.
+
+## Einstiegspunkte und Re-Exports (`@index.ts`)
+
+Die Formatter befinden sich im Core-Paket und werden von höherstufigen Paketen erneut exportiert, um Importe über verschiedene Laufzeitumgebungen hinweg ergonomisch zu gestalten:
+
+Beispiele:
+
+```ts
+// App-Code (empfohlen)
+import { number, currency, date, Intl } from "intlayer";
+```
+
+### React
+
+Client-Komponenten:
+
+```ts
+import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+// oder in Next.js-Anwendungen
+import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+```
+
+Server-Komponenten (oder React Server Runtime):
+
+```ts
+import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+// oder in Next.js-Anwendungen
+import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+```
+
+> Diese Hooks berücksichtigen die Locale vom `IntlayerProvider` oder `IntlayerServerProvider`
+
+## Dokumentationshistorie
+
+| Version | Datum      | Änderungen                            |
+| ------- | ---------- | ------------------------------------- |
+| 5.8.0   | 2025-08-18 | Formatierer-Dokumentation hinzugefügt |

package/docs/de/interest_of_intlayer.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
+updatedAt: 2025-08-20
 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.
+description: Entdecken Sie die Vorteile und Nutzen der Verwendung von Intlayer in Ihren Projekten. Verstehen Sie, warum Intlayer sich unter anderen Frameworks hervorhebt.
 keywords:
   - Vorteile
   - Nutzen
@@ -11,41 +11,104 @@ keywords:
   - Vergleich
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer: Ein maßgeschneiderter Weg, Ihre Website zu übersetzen
+# Warum sollten Sie Intlayer in Betracht ziehen?
 
-**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.
+## Was ist Intlayer?
 
-## Anwendungsbeispiel
+**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 Deklarationen mehrsprachiger Inhalte in strukturierte Wörterbücher um, um sie einfach in Ihren Code zu integrieren. Durch die Verwendung von TypeScript macht **Intlayer** Ihre Entwicklung robuster und effizienter.
+
+## Warum wurde Intlayer erstellt?
+
+Intlayer wurde entwickelt, um ein häufiges Problem zu lösen, das alle gängigen i18n-Bibliotheken wie `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` und `vue-i18n` betrifft.
+
+Alle diese Lösungen verfolgen einen zentralisierten Ansatz, um Ihre Inhalte aufzulisten und zu verwalten. Zum Beispiel:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── es.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Oder hier mit Namespaces:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Diese Art von Architektur verlangsamt den Entwicklungsprozess und macht den Codebestand aus mehreren Gründen komplexer zu warten:
+
+1. **Für jede neu erstellte Komponente sollten Sie:**
+   - Die neue Ressource/den neuen Namespace im Ordner `locales` anlegen
+   - Daran denken, den neuen Namespace in Ihrer Seite zu importieren
+   - Ihre Inhalte übersetzen (oft manuell durch Kopieren/Einfügen von KI-Anbietern)
+
+2. **Für jede Änderung an Ihren Komponenten sollten Sie:**
+   - Nach der zugehörigen Ressource/dem Namespace suchen (weit entfernt von der Komponente)
+   - Ihre Inhalte übersetzen
+   - Sicherstellen, dass Ihre Inhalte für jede Locale aktuell sind
+   - Überprüfen, dass Ihr Namespace keine ungenutzten Schlüssel/Werte enthält
+   - Sicherstellen, dass die Struktur Ihrer JSON-Dateien für alle Locales gleich ist
+
+Bei professionellen Projekten, die diese Lösungen verwenden, werden häufig Lokalisierungsplattformen eingesetzt, um die Übersetzung Ihrer Inhalte zu verwalten. Dies kann jedoch bei großen Projekten schnell kostspielig werden.
+
+Um dieses Problem zu lösen, verfolgt Intlayer einen Ansatz, bei dem Ihre Inhalte pro Komponente abgegrenzt und nahe bei Ihrer Komponente gehalten werden, ähnlich wie wir es oft mit CSS (`styled-components`), Typen, Dokumentation (`storybook`) oder Unit-Tests (`jest`) tun.
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,18 +125,17 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```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",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -81,17 +143,18 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
+// Übersetzungsinhalt für die Komponente
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -99,7 +162,7 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
 export const ComponentExample = () => {
@@ -109,8 +172,7 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
-jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
 const ComponentExample = () => {
@@ -120,7 +182,7 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
 const ComponentExample = () => {
@@ -130,27 +192,79 @@ const ComponentExample = () => {
 };
 ```
 
-## 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
+Dieser Ansatz ermöglicht es Ihnen:
+
+1. **Die Entwicklungsgeschwindigkeit zu erhöhen**
+   - `.content.{{ts|mjs|cjs|json}}` Dateien können mit einer VSCode-Erweiterung erstellt werden
+   - Autovervollständigungs-KI-Tools in Ihrer IDE (wie GitHub Copilot) können Ihnen helfen, Ihren Inhalt zu deklarieren, wodurch Copy/Paste reduziert wird
+
+2. **Reduzieren Sie die Komplexität Ihres Codebestands**
+
+3. **Erhöhen Sie die Wartbarkeit Ihres Codebestands**
+
+4. **Duplizieren Sie Ihre Komponenten und deren zugehörigen Inhalte einfacher (Beispiel: Login/Register-Komponenten usw.)**
+   - Indem Sie das Risiko minimieren, den Inhalt anderer Komponenten zu beeinflussen
+   - Indem Sie Ihre Inhalte von einer Anwendung in eine andere ohne externe Abhängigkeiten kopieren/einfügen
+
+5. **Vermeiden Sie es, Ihren Codebestand mit ungenutzten Schlüsseln/Werten für ungenutzte Komponenten zu verschmutzen**
+   - Wenn Sie eine Komponente nicht verwenden, müssen Sie deren Inhalt nicht importieren
+   - Wenn Sie eine Komponente löschen, erinnern Sie sich leichter daran, den zugehörigen Inhalt zu entfernen, da dieser im selben Ordner vorhanden ist
+
+6. **Reduzieren Sie die Denkaufwand für KI-Agenten, um Ihre mehrsprachigen Inhalte zu deklarieren**
+   - Der KI-Agent muss nicht Ihren gesamten Codebestand durchsuchen, um zu wissen, wo Ihr Inhalt implementiert werden soll
+   - Übersetzungen können einfach mit Autovervollständigungs-KI-Tools in Ihrer IDE (wie GitHub Copilot) durchgeführt werden
+
+7. **Optimieren Sie die Ladeleistung**
+   - Wenn eine Komponente lazy geladen wird, wird ihr zugehöriger Inhalt gleichzeitig geladen
+
+## Zusätzliche Funktionen von Intlayer
+
+| Funktion                                                                                                                  | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Framework-übergreifende Unterstützung**<br><br>Intlayer ist kompatibel mit allen wichtigen 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.png?raw=true)       | **JavaScript-gesteuertes Content-Management**<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)                                                                                                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Pro-Lokale Inhaltsdeklarationsdatei**<br><br>Beschleunigen Sie Ihre Entwicklung, indem Sie Ihre Inhalte einmalig deklarieren, bevor die automatische Generierung erfolgt.<br><br> - [Pro-Lokale Inhaltsdeklarationsdatei](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Typsicheres Umfeld**<br><br>Nutzen Sie TypeScript, um sicherzustellen, dass Ihre Inhaltsdefinitionen und Ihr Code fehlerfrei sind, und profitieren Sie gleichzeitig von der Autovervollständigung in der IDE.<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)                         | **Vereinfachte Einrichtung**<br><br>Starten Sie schnell mit minimaler Konfiguration. Passen Sie Einstellungen für Internationalisierung, Routing, KI, Build und Inhaltsverwaltung mühelos an.<br><br> - [Next.js-Integration erkunden](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Vereinfachte Inhaltsabfrage**<br><br>Sie müssen Ihre `t`-Funktion nicht für jeden einzelnen Inhalt 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 von Server-Komponenten**<br><br>Perfekt geeignet für Next.js Server-Komponenten, verwenden Sie dieselbe Implementierung sowohl für Client- als auch für Server-Komponenten, ohne Ihre `t`-Funktion an jede Server-Komponente weitergeben zu müssen. <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 besser organisiert: 1 Komponente = 1 Wörterbuch im selben Ordner. Übersetzungen, die nahe bei ihren jeweiligen Komponenten liegen, 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 des App-Routings, die sich nahtlos an komplexe Anwendungsstrukturen anpasst, für Next.js, React, Vite, Vue.js usw.<br><br> - [Next.js-Integration erkunden](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 Lokalisierungsdateien und entfernte Markdown-Dateien 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 CMS stehen Content-Autoren zur Verfügung, wodurch keine Lokalisierungsplattform mehr benötigt wird. Halten Sie Ihre Inhalte mit Git synchronisiert oder externalisieren Sie sie ganz oder teilweise mit dem CMS.<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, um die Ladeeffizienz der App zu verbessern. <br><br> - [App-Build-Optimierung](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 das statische Rendering nicht. <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>Verwandeln Sie Ihre Website mit nur einem Klick in 231 Sprachen mithilfe der fortschrittlichen KI-gestützten Übersetzungswerkzeuge 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>Stellt einen MCP (Model Context Protocol) Server für IDE-Automatisierung bereit, der nahtloses Content-Management und i18n-Workflows direkt in Ihrer Entwicklungsumgebung ermöglicht. <br><br> - [MCP-Server](https://github.com/aymericzip/intlayer/blob/main/docs/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, die Ihnen hilft, Ihre Inhalte und Übersetzungen zu verwalten, Ihre Wörterbücher zu erstellen, Ihre Inhalte zu übersetzen 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)                                                                   |
+
+## Vergleich von Intlayer mit anderen Lösungen
+
+| Funktion                                           | Intlayer                                                                                                                                   | React-i18next / i18next                                                         | React-Intl (FormatJS)                                   | LinguiJS                                                | next-intl                                               | next-i18next                                            | vue-i18n                                                           |
+| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------ |
+| **Übersetzungen in der Nähe der Komponenten**      | Ja, Inhalte sind mit jeder Komponente zusammengefasst                                                                                      | Nein                                                                            | Nein                                                    | Nein                                                    | Nein                                                    | Nein                                                    | Ja - Verwendung von `Single File Components` (SFCs)                |
+| **TypeScript-Integration**                         | Fortgeschritten, automatisch generierte strenge Typen                                                                                      | Grundlegend; zusätzliche Konfiguration für Sicherheit                           | Gut, aber weniger strikt                                | Typen, benötigt Konfiguration                           | Gut                                                     | Grundlegend                                             | Gut (Typen verfügbar; Schlüssel-Sicherheit benötigt Einrichtung)   |
+| **Fehlende Übersetzungs-Erkennung**                | Fehler/Warnung zur Build-Zeit                                                                                                              | Meist Fallback-Strings zur Laufzeit                                             | Fallback-Strings                                        | Benötigt zusätzliche Konfiguration                      | Laufzeit-Fallback                                       | Laufzeit-Fallback                                       | Laufzeit-Fallback/Warnungen (konfigurierbar)                       |
+| **Reicher Inhalt (JSX/Markdown/Komponenten)**      | Direkte Unterstützung, sogar React-Knoten                                                                                                  | Eingeschränkt / nur Interpolation                                               | ICU-Syntax, kein echtes JSX                             | Eingeschränkt                                           | Nicht für reiche Knoten ausgelegt                       | Eingeschränkt                                           | Eingeschränkt (Komponenten über `<i18n-t>`, Markdown über Plugins) |
+| **KI-gestützte Übersetzung**                       | Ja, unterstützt mehrere KI-Anbieter. Nutzbar mit eigenen API-Schlüsseln. Berücksichtigt den Kontext Ihrer Anwendung und des Inhaltsumfangs | Nein                                                                            | Nein                                                    | Nein                                                    | Nein                                                    | Nein                                                    | Nein                                                               |
+| **Visueller Editor**                               | Ja, lokaler visueller Editor + optionales CMS; kann Codebasis-Inhalte auslagern; einbettbar                                                | Nein / verfügbar über externe Lokalisierungsplattformen                         | Nein / verfügbar über externe Lokalisierungsplattformen | Nein / verfügbar über externe Lokalisierungsplattformen | Nein / verfügbar über externe Lokalisierungsplattformen | Nein / verfügbar über externe Lokalisierungsplattformen | Nein / verfügbar über externe Lokalisierungsplattformen            |
+| **Lokalisierte Routenführung**                     | Eingebaut, Middleware-Unterstützung                                                                                                        | Plugins oder manuelle Konfiguration                                             | Nicht eingebaut                                         | Plugin/manuelle Konfiguration                           | Eingebaut                                               | Eingebaut                                               | Manuell über Vue Router (wird von Nuxt i18n verwaltet)             |
+| **Dynamische Routen-Generierung**                  | Ja                                                                                                                                         | Plugin/Ökosystem oder manuelle Einrichtung                                      | Nicht bereitgestellt                                    | Plugin/manuell                                          | Ja                                                      | Ja                                                      | Nicht bereitgestellt (wird von Nuxt i18n bereitgestellt)           |
+| **Pluralisierung**                                 | Aufzählungsbasierte Muster; siehe Dokumentation                                                                                            | Konfigurierbar (Plugins wie i18next-icu)                                        | Fortgeschritten (ICU)                                   | Fortgeschritten (ICU/messageformat)                     | Gut                                                     | Gut                                                     | Fortgeschritten (eingebaute Pluralregeln)                          |
+| **Formatierung (Daten, Zahlen, Währungen)**        | Optimierte Formatierer (Intl im Hintergrund)                                                                                               | Über Plugins oder benutzerdefinierte Intl-Nutzung                               | Erweiterte ICU-Formatierer                              | ICU/CLI-Helfer                                          | Gut (Intl-Helfer)                                       | Gut (Intl-Helfer)                                       | Eingebaute Datums-/Zahlenformatierer (Intl)                        |
+| **Inhaltsformat**                                  | .tsx, .ts, .js, .json, .md, .txt                                                                                                           | .json                                                                           | .json, .js                                              | .po, .json                                              | .json, .js, .ts                                         | .json                                                   | .json, .js                                                         |
+| **ICU-Unterstützung**                              | In Arbeit (native ICU)                                                                                                                     | Über Plugin (i18next-icu)                                                       | Ja                                                      | Ja                                                      | Ja                                                      | Über Plugin (i18next-icu)                               | Über benutzerdefinierten Formatter/Compiler                        |
+| **SEO-Helfer (hreflang, Sitemap)**                 | Eingebaute Werkzeuge: Helfer für Sitemap, **robots.txt**, Metadaten                                                                        | Community-Plugins/Manuell                                                       | Nicht Kernfunktion                                      | Nicht Kernfunktion                                      | Gut                                                     | Gut                                                     | Nicht Kernfunktion (Nuxt i18n stellt Helfer bereit)                |
+| **Ökosystem / Gemeinschaft**                       | Klein, aber schnell wachsend und reaktiv                                                                                                   | Größte und am weitesten entwickelte                                             | Groß, unternehmensorientiert                            | Wachsend, kleiner                                       | Mittelgroß, Next.js-fokussiert                          | Mittelgroß, Next.js-fokussiert                          | Groß im Vue-Ökosystem                                              |
+| **Server-seitiges Rendering & Server-Komponenten** | Ja, optimiert für SSR / React Server-Komponenten                                                                                           | Unterstützt, einige Konfiguration erforderlich                                  | Unterstützt in Next.js                                  | Unterstützt                                             | Volle Unterstützung                                     | Volle Unterstützung                                     | SSR über Nuxt/Vue SSR (kein RSC)                                   |
+| **Tree-shaking (nur verwendete Inhalte laden)**    | Ja, pro Komponente zur Build-Zeit über Babel/SWC-Plugins                                                                                   | Lädt normalerweise alles (kann mit Namespaces/Code-Splitting verbessert werden) | Lädt normalerweise alles                                | Nicht standardmäßig                                     | Teilweise                                               | Teilweise                                               | Teilweise (mit Code-Splitting/manuellem Setup)                     |
+| **Lazy Loading**                                   | Ja, pro Locale/pro Komponente                                                                                                              | Ja (z.B. Backends/Namespaces bei Bedarf)                                        | Ja (aufgeteilte Locale-Bündel)                          | Ja (dynamische Katalogimporte)                          | Ja (pro Route/pro Locale)                               | Ja (pro Route/pro Locale)                               | Ja (asynchrone Locale-Nachrichten)                                 |
+| **Verwaltung großer Projekte**                     | Fördert Modularität, geeignet für Design-Systeme                                                                                           | Benötigt gute Dateidisziplin                                                    | Zentrale Kataloge können groß werden                    | Kann komplex werden                                     | Modular mit Setup                                       | Modular mit Setup                                       | Modular mit Vue Router/Nuxt i18n Setup                             |
+
+## Dokumenthistorie
+
+| Version | Datum      | Änderungen                       |
+| ------- | ---------- | -------------------------------- |
+| 5.8.0   | 2025-08-19 | Aktualisierung Vergleichstabelle |
+| 5.5.10  | 2025-06-29 | Initiale Historie                |

package/docs/de/introduction.md

@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -64,8 +64,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -83,8 +83,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };