@intlayer/docs 5.5.10 → 5.5.11

package/blog/de/intlayer_with_react-i18next.md

@@ -0,0 +1,346 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer und react-i18next
+description: Vergleichen Sie Intlayer mit react-i18next für eine React-App
+keywords:
+  - react-i18next
+  - i18next
+  - Intlayer
+  - Internationalisierung
+  - Dokumentation
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-i18next
+---
+
+# React Internationalisierung (i18n) mit react-i18next und Intlayer
+
+## Übersicht
+
+- **Intlayer** hilft Ihnen, Übersetzungen über **komponentenbasierte** Inhaltsdeklarationsdateien zu verwalten.
+- **react-i18next** ist eine beliebte React-Integration für **i18next**, die Hooks wie `useTranslation` bereitstellt, um lokalisierte Strings in Ihren Komponenten abzurufen.
+
+In Kombination kann Intlayer **Wörterbücher** im **i18next-kompatiblen JSON** exportieren, sodass react-i18next sie zur Laufzeit **verbrauchen** kann.
+
+## Warum Intlayer mit react-i18next verwenden?
+
+Die Inhaltsdeklarationsdateien von **Intlayer** bieten ein besseres Entwicklererlebnis, da sie:
+
+1. **Flexibel in der Dateiplatzierung sind**  
+   Platzieren Sie jede Inhaltsdeklarationsdatei direkt neben der Komponente, die sie benötigt. Diese Struktur ermöglicht es Ihnen, Übersetzungen lokal zusammenzuhalten und verhindert verwaiste Übersetzungen, wenn Komponenten verschoben oder gelöscht werden.
+
+   ```bash codeFormat="typescript"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts # Inhaltsdeklarationsdatei
+               └── index.tsx
+   ```
+
+   ```bash codeFormat="esm"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.mjs # Inhaltsdeklarationsdatei
+               └── index.mjx
+   ```
+
+   ```bash codeFormat="cjs"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.cjs # Inhaltsdeklarationsdatei
+               └── index.cjx
+   ```
+
+   ```bash codeFormat="json"
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.json # Inhaltsdeklarationsdatei
+               └── index.jsx
+   ```
+
+2. **Zentralisierte Übersetzungen**  
+   Eine einzelne Inhaltsdeklarationsdatei sammelt alle notwendigen Übersetzungen für eine Komponente, was fehlende Übersetzungen leichter erkennbar macht.  
+   Mit TypeScript erhalten Sie sogar zur Kompilierzeit Fehler, wenn Übersetzungen fehlen.
+
+## Installation
+
+In einem Create React App-Projekt installieren Sie diese Abhängigkeiten:
+
+```bash
+# Mit npm
+npm install intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# Mit yarn
+yarn add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+```bash
+# Mit pnpm
+pnpm add intlayer react-i18next i18next i18next-resources-to-backend
+```
+
+### Was sind diese Pakete?
+
+- **intlayer** – Die CLI und Kernbibliothek zur Verwaltung von i18n-Konfigurationen, Inhaltsdeklarationen und zum Erstellen von Wörterbuchausgaben.
+- **react-intlayer** – React-spezifische Integration für Intlayer, die einige Skripte zur Automatisierung des Aufbaus von Wörterbüchern bereitstellt.
+- **react-i18next** – React-spezifische Integrationsbibliothek für i18next, einschließlich des `useTranslation`-Hooks.
+- **i18next** – Das zugrunde liegende Framework für die Übersetzungsbearbeitung.
+- **i18next-resources-to-backend** – Ein i18next-Backend, das JSON-Ressourcen dynamisch importiert.
+
+## Intlayer zur Ausgabe von i18next-Wörterbüchern konfigurieren
+
+Erstellen (oder aktualisieren) Sie Ihre `intlayer.config.ts` im Root Ihres Projekts:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // Fügen Sie so viele Sprachen hinzu, wie Sie möchten
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // Sagen Sie Intlayer, dass es i18next-kompatibles JSON erstellen soll
+    dictionaryOutput: ["i18next"],
+
+    // Wählen Sie ein Ausgabeverzeichnis für die generierten Ressourcen
+    // Dieses Verzeichnis wird erstellt, wenn es noch nicht existiert.
+    i18nextResourcesDir: "./i18next/resources",
+  },
+};
+
+export default config;
+```
+
+> **Hinweis**: Wenn Sie kein TypeScript verwenden, können Sie diese Konfigurationsdatei als `.cjs`, `.mjs` oder `.js` erstellen (siehe die [Intlayer-Dokumentation](https://intlayer.org/en/doc/concept/configuration) für Details).
+
+## Erstellen der i18next-Ressourcen
+
+Sobald Ihre Inhaltsdeklarationen an Ort und Stelle sind (nächster Abschnitt), führen Sie den **Intlayer-Befehl zum Erstellen** aus:
+
+```bash
+# Mit npm
+npx run intlayer build
+```
+
+```bash
+# Mit yarn
+yarn intlayer build
+```
+
+```bash
+# Mit pnpm
+pnpm intlayer build
+```
+
+> Dies wird standardmäßig Ihre i18next-Ressourcen im Verzeichnis `./i18next/resources` generieren.
+
+Eine typische Ausgabe könnte folgendermaßen aussehen:
+
+```bash
+.
+└── i18next
+    └── resources
+       ├── de
+       │   └── my-content.json
+       ├── fr
+       │   └── my-content.json
+       └── es
+           └── my-content.json
+```
+
+Wo jeder **Intlayer**-Schlüssel als **i18next-Namensraum** verwendet wird (z.B. `my-content.json`).
+
+## Wörterbücher in Ihre react-i18next-Konfiguration importieren
+
+Um diese Ressourcen zur Laufzeit dynamisch zu laden, verwenden Sie [`i18next-resources-to-backend`](https://www.npmjs.com/package/i18next-resources-to-backend). Erstellen Sie beispielsweise eine Datei `i18n.ts` (oder `.js`) in Ihrem Projekt:
+
+```typescript title="i18n.ts"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  // react-i18next-Plugin
+  .use(initReactI18next)
+  // Ressourcen dynamisch laden
+  .use(
+    resourcesToBackend((language: string, namespace: string) => {
+      // Passen Sie den Importpfad zu Ihrem Ressourcenverzeichnis an
+      return import(`../i18next/resources/${language}/${namespace}.json`);
+    })
+  )
+  // Initialize i18next
+  .init({
+    // Fallback-Sprache
+    fallbackLng: "de",
+
+    // Sie können hier andere i18next-Konfigurationsoptionen hinzufügen, siehe:
+    // https://www.i18next.com/overview/configuration-options
+  });
+
+export default i18next;
+```
+
+```javascript title="i18n.js"
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+
+i18next
+  .use(initReactI18next)
+  .use(
+    resourcesToBackend(
+      (language, namespace) =>
+        import(`../i18next/resources/${language}/${namespace}.json`)
+    )
+  )
+  .init({
+    fallbackLng: "de",
+  });
+
+export default i18next;
+```
+
+Dann importieren Sie in Ihrer **Haupt**- oder **Index**-Datei (z.B. `src/index.tsx`) diese `i18n`-Einrichtung **vor** dem Rendern der `App`:
+
+```typescript
+import React from "react";
+import ReactDOM from "react-dom/client";
+// Initialisieren Sie i18n vor allem anderen
+import "./i18n";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+## Erstellen und Verwalten Ihrer Inhaltsdeklarationen
+
+Intlayer extrahiert Übersetzungen aus „Inhaltsdeklarationsdateien“, die sich überall unter `./src` (standardmäßig) befinden.  
+Hier ist ein minimales Beispiel in TypeScript:
+
+```typescript title="src/components/MyComponent/MyComponent.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // Der "key" wird Ihr i18next-Namensraum sein (z.B. "my-component")
+  key: "my-component",
+  content: {
+    // Jeder "t"-Aufruf ist ein separater Übersetzungs-Knoten
+    heading: t({
+      de: "Hallo Welt",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    description: t({
+      de: "Mein i18n Beschreibungstext...",
+      fr: "Ma description en i18n...",
+      es: "Mi descripción en i18n...",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+Wenn Sie JSON, `.cjs` oder `.mjs` bevorzugen, siehe die [Intlayer-Dokumentation](https://intlayer.org/en/doc/concept/content).
+
+> Standardmäßig entsprechen gültige Inhaltsdeklarationen dem Dateiendungsmuster:
+
+> `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`
+
+## Verwendung der Übersetzungen in React-Komponenten
+
+Nachdem Sie Ihre Intlayer-Ressourcen **gebaut** und react-i18next konfiguriert haben, können Sie direkt den `useTranslation`-Hook von **react-i18next** verwenden.  
+Zum Beispiel:
+
+```tsx title="src/components/MyComponent/MyComponent.tsx"
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Der i18next "Namensraum" ist der Intlayer `key` aus "MyComponent.content.ts"
+ * also übergeben wir "my-component" an useTranslation().
+ */
+const MyComponent: FC = () => {
+  const { t } = useTranslation("my-component");
+
+  return (
+    <div>
+      <h1>{t("heading")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+> Beachten Sie, dass die `t`-Funktion **Schlüssel** innerhalb Ihres generierten JSON referenziert. Für einen Intlayer-Inhaltseintragsnamen `heading` verwenden Sie `t("heading")`.
+
+## Optional: Integration mit Create React App-Skripten (CRACO)
+
+**react-intlayer** bietet einen CRACO-basierten Ansatz für benutzerdefinierte Builds und DEV-Serverkonfiguration. Wenn Sie den Build-Schritt von Intlayer nahtlos integrieren möchten, können Sie:
+
+1. **react-intlayer installieren** (falls Sie dies noch nicht getan haben):
+   ```bash
+   npm install react-intlayer --save-dev
+   ```
+2. **Passen Sie Ihre `package.json`-Skripte** an, um `react-intlayer`-Skripte zu verwenden:
+
+   ```jsonc
+   "scripts": {
+     "start": "react-intlayer start",
+     "build": "react-intlayer build",
+     "transpile": "intlayer build"
+   }
+   ```
+
+   > Die `react-intlayer`-Skripte basieren auf [CRACO](https://craco.js.org/). Sie können auch Ihr eigenes Setup basierend auf dem Intlayer-CRACO-Plugin implementieren. [Siehe Beispiel hier](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+
+Nun löst das Ausführen von `npm run build`, `yarn build` oder `pnpm build` sowohl die Intlayer- als auch die CRA-Bauten aus.
+
+## TypeScript-Konfiguration
+
+**Intlayer** bietet **automatisch generierte Typdefinitionen** für Ihren Inhalt. Um sicherzustellen, dass TypeScript sie erfasst, fügen Sie **`types`** (oder `types`, wenn Sie es anders konfiguriert haben) zu Ihrem `tsconfig.json` **include**-Array hinzu:
+
+```json5 title="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+> Dies ermöglicht es TypeScript, die Struktur Ihrer Übersetzungen für bessere Autovervollständigung und Fehlererkennung abzuleiten.
+
+## Git-Konfiguration
+
+Es wird empfohlen, automatisch generierte Dateien und Ordner von Intlayer zu **ignorieren**. Fügen Sie diese Zeile zu Ihrer `.gitignore` hinzu:
+
+```plaintext
+# Ignoriere die von Intlayer generierten Dateien
+.intlayer
+i18next
+```
+
+Sie sollten diese Ressourcen oder `.intlayer`-interne Build-Artefakte normalerweise **nicht** einchecken, da sie bei jedem Build regeneriert werden können.

package/blog/de/intlayer_with_react-intl.md

@@ -0,0 +1,325 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: Intlayer und react-intl
+description: Integrieren Sie Intlayer mit react-intl für eine React-App
+keywords:
+  - react-intl
+  - Intlayer
+  - Internationalisierung
+  - Dokumentation
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - intlayer-with-react-intl
+---
+
+# React Internationalisierung (i18n) mit **react-intl** und Intlayer
+
+Diese Anleitung zeigt, wie Sie **Intlayer** mit **react-intl** integrieren, um Übersetzungen in einer React-Anwendung zu verwalten. Sie erklären Ihren übersetzbaren Inhalt mit Intlayer und konsumieren dann diese Nachrichten mit **react-intl**, einer beliebten Bibliothek aus dem [FormatJS](https://formatjs.io/docs/react-intl) Ecosystem.
+
+## Übersicht
+
+- **Intlayer** ermöglicht es Ihnen, Übersetzungen in **komponentenbezogenen** Inhaltsdeklarationsdateien (JSON, JS, TS usw.) innerhalb Ihres Projekts zu speichern.
+- **react-intl** bietet React-Komponenten und Hooks (wie `<FormattedMessage>` und `useIntl()`), um lokalisierte Strings anzuzeigen.
+
+Indem Sie Intlayer so konfigurieren, dass Übersetzungen im **react-intl-kompatiblen** Format **exportiert** werden, können Sie automatisch die Nachrichten-Dateien **generieren** und **aktualisieren**, die `<IntlProvider>` (aus react-intl) benötigt.
+
+---
+
+## Warum Intlayer mit react-intl verwenden?
+
+1. **Pro-Komponente Inhaltsdeklarationen**  
+   Intlayer-Inhaltsdeklarationsdateien können neben Ihren React-Komponenten leben, um „verwaiste“ Übersetzungen zu verhindern, wenn Komponenten verschoben oder entfernt werden. Zum Beispiel:
+
+   ```bash
+   .
+   └── src
+       └── components
+           └── MyComponent
+               ├── index.content.ts   # Intlayer Inhaltsdeklaration
+               └── index.tsx          # React-Komponente
+   ```
+
+2. **Zentralisierte Übersetzungen**  
+   Jede Inhaltsdeklarationsdatei sammelt alle Übersetzungen, die eine Komponente benötigt. Dies ist besonders hilfreich in TypeScript-Projekten: Fehlende Übersetzungen können zur **Kompilierungszeit** gefangen werden.
+
+3. **Automatischer Build und Regenerierung**  
+   Immer wenn Sie Übersetzungen hinzufügen oder aktualisieren, regeneriert Intlayer die Nachrichten-JSON-Dateien. Diese können Sie dann in react-intl's `<IntlProvider>` übergeben.
+
+---
+
+## Installation
+
+In einem typischen React-Projekt installieren Sie Folgendes:
+
+```bash
+# mit npm
+npm install intlayer react-intl
+
+# mit yarn
+yarn add intlayer react-intl
+
+# mit pnpm
+pnpm add intlayer react-intl
+```
+
+### Warum diese Pakete?
+
+- **intlayer**: Core-CLI und Bibliothek, die nach Inhaltsdeklarationen sucht, diese zusammenführt und Wörterbuchausgaben erstellt.
+- **react-intl**: Die Hauptbibliothek von FormatJS, die `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` und andere Internationalisierungsprimitive bereitstellt.
+
+> Wenn Sie React selbst noch nicht installiert haben, benötigen Sie es auch (`react` und `react-dom`).
+
+## Intlayer konfigurieren, um react-intl Nachrichten zu exportieren
+
+Erstellen Sie in Ihrem Projektstamm **`intlayer.config.ts`** (oder `.js`, `.mjs`, `.cjs`) wie folgt:
+
+```typescript title="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    // Fügen Sie so viele lokale Sprachen hinzu, wie Sie möchten
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  content: {
+    // Gibt Intlayer Anweisung zur Generierung von Nachrichten-Dateien für react-intl
+    dictionaryOutput: ["react-intl"],
+
+    // Das Verzeichnis, in das Intlayer Ihre Nachrichten-JSON-Dateien schreiben wird
+    reactIntlMessagesDir: "./react-intl/messages",
+  },
+};
+
+export default config;
+```
+
+> **Hinweis**: Für andere Dateierweiterungen (`.mjs`, `.cjs`, `.js`) siehe die [Intlayer-Dokumentation](https://intlayer.org/de/doc/concept/configuration) für Nutzungsdetails.
+
+---
+
+## Erstellen Sie Ihre Intlayer Inhaltsdeklarationen
+
+Intlayer scannt Ihren Code (standardmäßig unter `./src`) nach Dateien, die `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}` entsprechen.  
+Hier ist ein **TypeScript** Beispiel:
+
+```typescript title="src/components/MyComponent/index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const content = {
+  // "key" wird der obere Schlüssel der Nachricht in Ihrer react-intl JSON-Datei
+  key: "my-component",
+
+  content: {
+    // Jeder Aufruf von t() erklärt ein übersetzbares Feld
+    helloWorld: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+    description: t({
+      en: "This is a description",
+      fr: "Ceci est une description",
+      es: "Esta es una descripción",
+    }),
+  },
+} satisfies Dictionary;
+
+export default content;
+```
+
+Wenn Sie JSON oder verschiedene JS-Varianten (`.cjs`, `.mjs`) bevorzugen, bleibt die Struktur weitgehend gleich – siehe [Intlayer-Dokumentation zur Inhaltsdeklaration](https://intlayer.org/de/doc/concept/content).
+
+---
+
+## Erstellen der react-intl Nachrichten
+
+Um die tatsächlichen Nachrichten-JSON-Dateien für **react-intl** zu generieren, führen Sie aus:
+
+```bash
+# mit npm
+npx intlayer dictionaries build
+
+# mit yarn
+yarn intlayer build
+
+# mit pnpm
+pnpm intlayer build
+```
+
+Dies scannt alle `*.content.*` Dateien, kompiliert diese und schreibt die Ergebnisse in das Verzeichnis, das in Ihrer **`intlayer.config.ts`** angegeben ist – in diesem Beispiel `./react-intl/messages`.  
+Eine typische Ausgabe könnte wie folgt aussehen:
+
+```bash
+.
+└── react-intl
+    └── messages
+        ├── en.json
+        ├── fr.json
+        └── es.json
+```
+
+Jede Datei ist ein JSON-Objekt, dessen **oberste Schlüssel** den jeweiligen **`content.key`** aus Ihren Deklarationen entsprechen. Die **Unter-Schlüssel** (wie `helloWorld`) spiegeln die innerhalb dieses Inhaltselements erklärten Übersetzungen wider.
+
+Zum Beispiel könnte die **en.json** so aussehen:
+
+```json fileName="react-intl/messages/en/my-component.json"
+{
+  "helloWorld": "Hello World",
+  "description": "This is a description"
+}
+```
+
+---
+
+## Initialisieren von react-intl in Ihrer React-App
+
+### 1. Laden Sie die generierten Nachrichten
+
+Wo Sie die Wurzelkomponente Ihrer App konfigurieren (z.B. `src/main.tsx` oder `src/index.tsx`), müssen Sie:
+
+1. **Importieren** Sie die generierten Nachrichten-Dateien (entweder statisch oder dynamisch).
+2. **Bereitstellen** Sie sie an `<IntlProvider>` von `react-intl`.
+
+Ein einfacher Ansatz ist, sie **statisch** zu importieren:
+
+```typescript title="src/index.tsx"
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { IntlProvider } from "react-intl";
+import App from "./App";
+
+// Importieren der JSON-Dateien aus der Build-Ausgabe.
+// Alternativ können Sie sie dynamisch basierend auf der vom Benutzer gewählten Sprache importieren.
+import en from "../react-intl/messages/en.json";
+import fr from "../react-intl/messages/fr.json";
+import es from "../react-intl/messages/es.json";
+
+// Wenn Sie einen Mechanismus haben, um die Sprache des Benutzers zu erkennen, setzen Sie sie hier.
+// Zur Vereinfachung wählen wir Englisch.
+const locale = "en";
+
+// Nachrichten in einem Objekt zusammenfassen (oder sie dynamisch auswählen)
+const messagesRecord: Record<string, Record<string, any>> = {
+  en,
+  fr,
+  es,
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
+      <App />
+    </IntlProvider>
+  </React.StrictMode>
+);
+```
+
+> **Tipp**: Für reale Projekte könnten Sie:
+>
+> - Die JSON-Nachrichten zur Laufzeit dynamisch laden.
+> - Umweltbasierte, browserbasierte oder benutzerkontobasierte Lokalisierungserkennung verwenden.
+
+### 2. Verwenden von `<FormattedMessage>` oder `useIntl()`
+
+Sobald Ihre Nachrichten in `<IntlProvider>` geladen sind, kann jede Kindkomponente react-intl verwenden, um auf lokalisierte Strings zuzugreifen. Es gibt zwei Hauptansätze:
+
+- **`<FormattedMessage>`** Komponente
+- **`useIntl()`** Hook
+
+---
+
+## Verwendung von Übersetzungen in React-Komponenten
+
+### Ansatz A: `<FormattedMessage>`
+
+Für eine schnelle Inline-Nutzung:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export default function MyComponent() {
+  return (
+    <div>
+      <h1>
+        {/* “my-component.helloWorld” verweist auf den Schlüssel aus en.json, fr.json usw. */}
+        <FormattedMessage id="my-component.helloWorld" />
+      </h1>
+
+      <p>
+        <FormattedMessage id="my-component.description" />
+      </p>
+    </div>
+  );
+}
+```
+
+> Die **`id`**-Eigenschaft in `<FormattedMessage>` muss mit dem **obersten Schlüssel** (`my-component`) plus allen Unter-Schlüsseln (`helloWorld`) übereinstimmen.
+
+### Ansatz B: `useIntl()`
+
+Für dynamischere Nutzung:
+
+```tsx title="src/components/MyComponent/index.tsx"
+import React from "react";
+import { useIntl } from "react-intl";
+
+export default function MyComponent() {
+  const intl = useIntl();
+
+  return (
+    <div>
+      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
+      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
+    </div>
+  );
+}
+```
+
+Beide Ansätze sind gültig – wählen Sie den Stil, der am besten zu Ihrer App passt.
+
+---
+
+## Aktualisieren oder Hinzufügen neuer Übersetzungen
+
+1. **Fügen Sie Inhalt in jede `*.content.*` Datei hinzu oder ändern Sie ihn.**
+2. Führen Sie `intlayer build` erneut aus, um die JSON-Dateien im Verzeichnis `./react-intl/messages` zu regenerieren.
+3. React (und react-intl) werden die Updates beim nächsten Mal, wenn Sie Ihre Anwendung neu erstellen oder neu laden, erkennen.
+
+---
+
+## TypeScript-Integration (Optional)
+
+Wenn Sie TypeScript verwenden, kann Intlayer **Typdefinitionen** für Ihre Übersetzungen **generieren**.
+
+- Stellen Sie sicher, dass `tsconfig.json` Ihren `types`-Ordner (oder welchen Ausgabeverzeichnis Intlayer generiert) im `"include"`-Array enthält.
+
+```json5
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", "types"],
+}
+```
+
+Die generierten Typen können dabei helfen, fehlende Übersetzungen oder ungültige Schlüssel in Ihren React-Komponenten zur Kompilierungszeit zu erkennen.
+
+---
+
+## Git-Konfiguration
+
+Es ist üblich, die internen Build-Artefakte von Intlayer aus der Versionskontrolle **auszuschließen**. Fügen Sie in Ihrer `.gitignore` Folgendes hinzu:
+
+```plaintext
+# Ignoriere intlayer-Build-Artefakte
+.intlayer
+react-intl
+```
+
+Je nach Ihrem Workflow möchten Sie möglicherweise auch die endgültigen Wörterbücher in `./react-intl/messages` ignorieren oder committen. Wenn Ihre CI/CD-Pipeline sie regeneriert, können Sie sie sicher ignorieren; andernfalls committen Sie sie, wenn Sie sie für Produktionsbereitstellungen benötigen.