@intlayer/docs 9.4.4 → 9.5.1

package/docs/de/intlayer_with_vite+react_compiler.md

@@ -1,652 +0,0 @@
----
-createdAt: 2024-03-07
-updatedAt: 2026-08-30
-title: "Vite + React i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
-description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Vite + React-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
-keywords:
-  - Internationalisierung
-  - Dokumentation
-  - Intlayer
-  - Vite
-  - React
-  - Compiler
-  - KI
-slugs:
-  - doc
-  - environment
-  - vite-and-react
-  - compiler
-applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
-applicationShowcase: https://intlayer-vite-react-template.vercel.app
-youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
-history:
-  - version: 8.9.0
-    date: 2026-05-04
-    changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
-  - version: 8.2.0
-    date: 2026-03-09
-    changes: "Update compiler options, add FilePathPattern support"
-  - version: 8.1.6
-    date: 2026-02-23
-    changes: "Erstveröffentlichung"
-author: aymericzip
----
-
-# Wie man eine bestehende Vite- und React-Anwendung nachträglich mehrsprachig (i18n) macht (i18n-Leitfaden 2026)
-
-<Tabs defaultTab="video">
-  <Tab label="Video" value="video">
-
-<iframe title="Die beste i18n-Lösung für Vite und React? Entdecken Sie Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-vite-react-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - So internationalisieren Sie Ihre Anwendung mit Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://intlayer-vite-react-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo - intlayer-vite-react-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-Siehe [Anwendungsvorlage](https://github.com/aymericzip/intlayer-vite-react-template) auf GitHub.
-
-## Inhaltsverzeichnis
-
-<TOC/>
-
-## Warum ist es schwierig, eine bestehende Anwendung zu internationalisieren?
-
-Wenn Sie jemals versucht haben, mehrere Sprachen zu einer App hinzuzufügen, die nur für eine gebaut wurde, kennen Sie den Schmerz. Es ist nicht nur "schwer" – es ist mühsam. Sie müssen jede einzelne Datei durchforsten, jede Textzeichenfolge aufspüren und sie in separate Wörterbuchdateien verschieben.
-
-Dann kommt der riskante Teil: das Ersetzen des gesamten Textes durch Code-Hooks, ohne Ihr Layout oder Ihre Logik zu beeinträchtigen. Es ist die Art von Arbeit, die die Entwicklung neuer Funktionen für Wochen zum Stillstand bringt und sich wie endloses Refactoring anfühlt.
-
-## Was ist der Intlayer-Compiler?
-
-Der **Intlayer-Compiler** wurde entwickelt, um diese manuelle Routinearbeit zu überspringen. Anstatt dass Sie Zeichenfolgen manuell extrahieren, erledigt der Compiler dies für Sie. Er scannt Ihren Code, findet den Text und verwendet KI, um die Wörterbücher im Hintergrund zu generieren.
-Anschließend modifiziert er Ihren Code während des Builds, um die erforderlichen i18n-Hooks einzufügen. Im Grunde schreiben Sie Ihre App weiterhin so, als wäre sie einsprachig, und der Compiler übernimmt die mehrsprachige Transformation automatisch.
-
-> Dokumentation Compiler: [https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compiler.md](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compiler.md)
-
-### Einschränkungen
-
-Da der Compiler Codeanalysen und Transformationen (Einfügen von Hooks und Generieren von Wörterbüchern) zum **Zeitpunkt der Kompilierung** durchführt, kann er den **Build-Leistung** Ihrer Anwendung **verlangsamen**.
-
-Um diese Auswirkungen während der Entwicklung abzumildern, können Sie den Compiler so konfigurieren, dass er im Modus [`'build-only'`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md) läuft, oder ihn deaktivieren, wenn er nicht benötigt wird.
-
----
-
-## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vite- und React-Anwendung
-
-<Steps>
-
-<Step number={1} title="Abhängigkeiten installieren">
-
-Installieren Sie die erforderlichen Pakete mit npm:
-
-```bash packageManager="npm"
-npx intlayer init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer init --interactive
-```
-
-> Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.
-
-> Dieser Befehl erkennt Ihre Umgebung und installiert die erforderlichen Pakete. Zum Beispiel:
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add vite-intlayer --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-```
-
-- **intlayer**
-  Das Kernpaket, das Internationalisierungswerkzeuge für die Konfigurationsverwaltung, Übersetzung, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
-
-- **react-intlayer**
-  Das Paket, das Intlayer in die React-Anwendung integriert. Es bietet Kontextanbieter und Hooks für die React-Internationalisierung.
-
-- **vite-intlayer**
-  Enthält das Vite-Plugin zur Integration von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung des bevorzugten Gebietsschemas des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Umleitungen.
-
-</Step>
-
-<Step number={2} title="Konfigurieren Sie Ihr Projekt">
-
-Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
-    defaultLocale: Locales.ENGLISH,
-  },
-  compiler: {
-    /**
-     * Gibt an, ob der Compiler aktiviert werden soll.
-     */
-    enabled: true,
-
-    /**
-     * Ausgabeverzeichnis für die optimierten Wörterbücher.
-     */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
-
-    /**
-     * Fügen Sie nur den Inhalt in die generierte Datei ein, ohne Schlüssel.
-     */
-    noMetadata: false,
-
-    /**
-     * Wörterbuch-Präfix
-     */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen.
-     * Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
-     */
-    saveComponents: false,
-  },
-  ai: {
-    provider: "openai",
-    model: "gpt-5-mini",
-    apiKey: process.env.OPEN_AI_API_KEY,
-    applicationContext: "Diese App ist eine Karten-App", // Hinweis: Sie können diese App-Beschreibung anpassen
-  },
-};
-
-export default config;
-```
-
-> **Hinweis**: Stellen Sie sicher, dass Ihr `OPEN_AI_API_KEY` in Ihren Umgebungsvariablen gesetzt ist.
-
-> Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Umleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
-
-</Step>
-
-<Step number={3} title="Intlayer in Ihre Vite-Konfiguration integrieren">
-
-Fügen Sie das Intlayer-Plugin zu Ihrer Konfiguration hinzu.
-
-```typescript fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-> Das `intlayer()`-Vite-Plugin wird verwendet, um Intlayer in Vite zu integrieren. Es stellt die Erstellung von Inhaltsdeklarationsdateien sicher und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Darüber hinaus bietet es Aliase zur Leistungsoptimierung.
-
-> Das `intlayerCompiler()`-Vite-Plugin wird verwendet, um Inhalte aus Komponenten zu extrahieren und `.content`-Dateien zu schreiben.
-
-> Seit Intlayer v9 ist der Compiler direkt im `intlayer()`-Plugin gebündelt und aktiviert sich automatisch, sobald `compiler.enabled` mit einem `compiler.output`-Pfad gesetzt ist. Die separate Registrierung von `intlayerCompiler()` wie unten gezeigt ist jetzt optional — sie dedupliziert sich selbst, wenn sie auch hinzugefügt wird. Siehe die [v9-Versionshinweise](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/releases/v9.md).
-
-</Step>
-
-<Step number={4} title="Kompilieren Sie Ihren Code">
-
-Schreiben Sie Ihre Komponenten einfach mit fest codierten Zeichenfolgen in Ihrem Standard-Gebietsschema. Der Compiler kümmert sich um den Rest.
-
-Beispiel, wie Ihre Seite aussehen könnte:
-
-<Tabs>
- <Tab value="Code">
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
- <Tab value="Ausgabe">
-
-```ts fileName="i18n/app-content.content.json"
-{
-  key: "app-content",
-  content: {
-    nodeType: "translation",
-    translation: {
-      en: {
-        viteLogo: "Vite logo",
-        reactLogo: "React logo",
-        title: "Vite + React",
-        countButton: "count is",
-        editMessage: "Edit",
-        hmrMessage: "and save to test HMR",
-        readTheDocs: "Click on the Vite and React logos to learn more",
-      },
-      de: {
-        viteLogo: "Vite Logo",
-        reactLogo: "React Logo",
-        title: "Vite + React",
-        countButton: "Zähler ist",
-        editMessage: "Bearbeite",
-        hmrMessage: "und speichere, um HMR zu testen",
-        readTheDocs: "Klicke auf die Vite- und React-Logos, um mehr zu erfahren",
-      },
-    }
-  }
-}
-```
-
-```tsx fileName="src/App.tsx"
-import { useState, type FC } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-const AppContent: FC = () => {
-  const [count, setCount] = useState(0);
-  const content = useIntlayer("app-content");
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img
-            src={reactLogo}
-            className="logo react"
-            alt={content.reactLogo.value}
-          />
-        </a>
-      </div>
-      <h1>{content.title}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          {content.countButton} {count}
-        </button>
-        <p>
-          {content.editMessage} <code>src/App.tsx</code> {content.hmrMessage}
-        </p>
-      </div>
-      <p className="read-the-docs">{content.readTheDocs}</p>
-    </>
-  );
-};
-
-const App: FC = () => (
-  <IntlayerProvider>
-    <AppContent />
-  </IntlayerProvider>
-);
-
-export default App;
-```
-
- </Tab>
-</Tabs>
-
-- **`IntlayerProvider`** wird verwendet, um das Gebietsschema für verschachtelte Komponenten bereitzustellen.
-
-</Step>
-
-<Step number={6} title="Die Sprache Ihres Inhalts ändern" isOptional={true}>
-
-Um die Sprache Ihres Inhalts zu ändern, können Sie die Funktion `setLocale` verwenden, die vom Hook `useLocale` bereitgestellt wird. Mit dieser Funktion können Sie das Gebietsschema der Anwendung festlegen und den Inhalt entsprechend aktualisieren.
-
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import type { FC } from "react";
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
-
-const LocaleSwitcher: FC = () => {
-  const { setLocale } = useLocale();
-
-  return (
-    <button onClick={() => setLocale(Locales.GERMAN)}>
-      Sprache auf Deutsch ändern
-    </button>
-  );
-};
-```
-
-> Um mehr über den Hook `useLocale` zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={7} title="Fehlende Übersetzungen ausfüllen" isOptional={true}>
-
-Intlayer bietet ein CLI-Tool an, mit dem Sie fehlende Übersetzungen ausfüllen können. Sie können den Befehl `intlayer` verwenden, um fehlende Übersetzungen in Ihrem Code zu testen und auszufüllen.
-
-```bash packageManager="npm"
-npx intlayer test         # Testen, ob Übersetzungen fehlen
-```
-
-```bash packageManager="yarn"
-yarn intlayer test         # Testen, ob Übersetzungen fehlen
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer test         # Testen, ob Übersetzungen fehlen
-```
-
-```bash packageManager="bun"
-bun x intlayer test         # Testen, ob Übersetzungen fehlen
-```
-
-```bash packageManager="npm"
-npx intlayer fill         # Fehlende Übersetzungen ausfüllen
-```
-
-```bash packageManager="yarn"
-yarn intlayer fill         # Fehlende Übersetzungen ausfüllen
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer fill         # Fehlende Übersetzungen ausfüllen
-```
-
-```bash packageManager="bun"
-bun x intlayer fill         # Fehlende Übersetzungen ausfüllen
-```
-
-> Weitere Informationen finden Sie in der [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/ci.md)
-
-</Step>
-
-</Steps>
-
-### (Optional) Sitemap und robots.txt (Build-Zeit)
-
-Intlayer stellt Hilfsfunktionen bereit - `generateSitemap` und `getMultilingualUrls` -, mit denen Sie mehrsprachige `sitemap.xml`- und `robots.txt`-Inhalte für Crawler formatieren und automatisch nach `public/` schreiben können. Üblich ist ein kleines Node-Skript **vor** Vite (z. B. npm-`predev`-/`prebuild`-Hooks), damit die Dateien beim Build bzw. Dev-Server vorliegen.
-
-#### Sitemap
-
-Der Sitemap-Generator von Intlayer berücksichtigt Ihre Locales und die üblichen Metadaten für Crawler.
-
-> Die erzeugte Sitemap unterstützt den `xhtml:link`-Namensraum (Hreflang). Statt nur flacher URLs verknüpft Intlayer alle Sprachversionen einer Seite bidirektional (z. B. `/about`, `/fr/about` oder `/about?lang=fr` je nach Routing), was Suchmaschinen hilft.
-
-#### Robots.txt
-
-Mit `getMultilingualUrls` gelten `Disallow`-Regeln für alle lokalisierten Varianten sensibler Pfade.
-
-#### 1. `generate-seo.mjs` im Projektroot anlegen
-
-```javascript fileName="generate-seo.mjs"
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import { generateSitemap, getMultilingualUrls } from "intlayer";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
-  /\/$/,
-  ""
-);
-
-const pathList = [
-  { path: "/", changefreq: "daily", priority: 1.0 },
-  { path: "/about", changefreq: "monthly", priority: 0.7 },
-];
-
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
-fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
-
-const getAllMultilingualUrls = (urls) =>
-  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
-
-const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
-
-const robotsTxt = [
-  "User-agent: *",
-  "Allow: /",
-  ...disallowedPaths.map((path) => `Disallow: ${path}`),
-  "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
-].join("\n");
-
-fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
-
-console.log("SEO files generated successfully.");
-```
-
-`intlayer` muss installiert sein. Setzen Sie `SITE_URL` in der Produktion über die Umgebung (z. B. in der CI).
-
-> Nutzen Sie möglichst `generate-seo.mjs` für Node-ESM. Bei `generate-seo.js` `"type": "module"` in der `package.json` setzen oder Node mit ESM starten.
-
-#### 2. Skript vor Vite ausführen
-
-```json fileName="package.json"
-{
-  "scripts": {
-    "dev": "vite",
-    "prebuild": "node generate-seo.mjs",
-    "build": "vite build",
-    "preview": "vite preview"
-  }
-}
-```
-
-Bei pnpm oder yarn die Befehle anpassen. Aufruf aus der CI ist ebenfalls möglich.
-
-### Git-Konfiguration
-
-Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen zu vermeiden, sie in Ihr Git-Repository zu übertragen.
-
-Dazu können Sie die folgenden Anweisungen zu Ihrer `.gitignore`-Datei hinzufügen:
-
-```plaintext fileName=".gitignore"
-# Von Intlayer generierte Dateien ignorieren
-.intlayer
-```
-
-### VS Code-Erweiterung
-
-Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code-Erweiterung** installieren.
-
-[Im VS Code Marketplace installieren](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Diese Erweiterung bietet:
-
-- **Autovervollständigung** für Übersetzungsschlüssel.
-- **Fehlererkennung in Echtzeit** für fehlende Übersetzungen.
-- **Inline-Vorschauen** von übersetzten Inhalten.
-- **Schnellaktionen**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
-
-Weitere Details zur Verwendung der Erweiterung finden Sie in der [Dokumentation zur Intlayer VS Code-Erweiterung](https://intlayer.org/doc/vs-code-extension).
-
-### Weiterführendes
-
-Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) extern verwalten.
-
-## Häufig gestellte Fragen
-
-<FAQ>
-
-<Question title="Welche verschiedenen Lösungen gibt es, um eine Vite-und-React-App zu internationalisieren?">
-
-- **`react-i18next` / `i18next`**: JSON-Namespaces, die zur Laufzeit geladen werden, mit von Hand an jeder Aufrufstelle geschriebenen Schlüsseln.
-- **`react-intl`** und **`Lingui`**: ICU-Nachrichten mit einem Extraktionsschritt, den Sie selbst ausführen.
-- **`Intlayer`**: Inhalte werden zur Build-Zeit aus Ihren Komponenten heraus kompiliert, vollständig typisiert, mit KI-Übersetzung, visuellem Editor und CMS.
-
-Dieser Leitfaden verwendet das Compiler-Setup, bei dem Sie weiterhin einfache Strings in Ihren Komponenten schreiben und die Wörterbücher für Sie generiert werden. Siehe [warum Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/interest_of_intlayer.md) und den [Benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/benchmark/index.md).
-
-</Question>
-
-<Question title="Wie viel trägt i18n zu meiner Vite-Bundle-Größe bei?">
-
-Viel weniger als bei einem Namespace-basierten Setup, denn eine Seite lädt niemals einen Katalog herunter, den sie nicht rendert. Der Build-Zeit-Compiler ersetzt `useIntlayer`-Aufrufe durch genau die Wörterbucheinträge, die eine Komponente verwendet, sodass ungenutzte Schlüssel und ungenutzte Sprachen entfernt werden, und [dynamische Wörterbücher](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/index.md) teilen den Rest pro Locale auf. Gemessen an den üblichen Alternativen reduziert Intlayer die Bundle- und Seitengröße um bis zu 50 %. Siehe [Bundle-Optimierung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/bundle_optimization.md) und den [Benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/benchmark/index.md).
-
-</Question>
-
-<Question title="Kann ich von `react-i18next` oder `react-intl` migrieren, ohne meine Komponenten neu zu schreiben?">
-
-Ja, und es gibt zwei Wege. Sie können die Inhalte schrittweise migrieren mit dem [react-i18next-Migrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/migration_from_react-i18next_to_intlayer.md) oder dem [i18next-Migrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/migration_from_i18next_to_intlayer.md). Oder Sie behalten Ihre aktuelle API vollständig bei: Die [Kompatibilitätsadapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/index.md) stellen genau dieselbe API wie `react-i18next`, `react-intl` und `i18next` bereit, aber aus Intlayer-Wörterbüchern bedient, sodass sich Importe ändern und der Komponentencode nicht.
-
-</Question>
-
-<Question title="Kann ich meine vorhandenen JSON-Übersetzungsdateien behalten?">
-
-Ja. Das [sync-JSON-Plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md) behält Ihre `/messages/{locale}/{namespace}.json`-Dateien als Single Source of Truth und generiert daraus Intlayer-Wörterbücher, in beide Richtungen. Ein [sync-PO-Plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-po.md) macht dasselbe für gettext-Kataloge, und [Dateien pro Locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/per_locale_file.md) lassen Sie Inhalte nach Sprache aufteilen, statt Locales in einer Datei zu gruppieren.
-
-</Question>
-
-<Question title="Muss ich meine Inhalte Schlüssel für Schlüssel umziehen?">
-
-Nein, und genau das richtet dieser Leitfaden ein. Sie schreiben Ihre Komponenten mit einfachen Strings in Ihrer Standard-Locale, und der [Intlayer-Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compiler.md) scannt bei jedem Build den Quellcode, extrahiert den für den Nutzer sichtbaren Text und generiert die Wörterbücher, sodass es keine von Hand zu erstellenden oder zu pflegenden Schlüssel gibt.
-
-Zwei Einschränkungen sollten Sie kennen. Der Compiler arbeitet mit statischer Analyse, sodass Strings, die nur zur Laufzeit existieren, etwa API-Fehlercodes oder CMS-Felder, unerreichbar bleiben und weiterhin ein deklariertes Wörterbuch brauchen. Und er muss für den Nutzer sichtbaren Text von Anwendungslogik wie `className="active"` oder einem Statuscode unterscheiden, was in einer großen Codebasis einige Annotationen erfordert.
-
-Wenn Sie lieber die Kontrolle behalten, führt `npx intlayer extract` dieselbe Extraktion einmalig auf den von Ihnen gewählten Dateien aus und schreibt neben jede Komponente eine `.content`-Datei für Ihren Review. Siehe den [extract-Befehl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/extract.md).
-
-</Question>
-
-<Question title="Welches Editor- und KI-Agenten-Tooling ist verfügbar?">
-
-Fünf Bausteine, alle optional:
-
-- **[VS-Code-Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/vs_code_extension.md)**: von einem `useIntlayer`-Schlüssel zur Inhaltsdatei springen, die ihn deklariert, Inhalte aus einer Komponente extrahieren und build, fill, test, push und pull über die Befehlspalette oder einen eigenen Intlayer-Tab ausführen.
-- **[LSP-Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/lsp.md)**: dieselbe Wahrnehmung in jedem Editor, der LSP spricht, mit „Gehe zu Definition“, „Alle Referenzen suchen“, Hover-Vorschauen eines übersetzten Werts, Autovervollständigung von Schlüsseln und Feldern sowie einer Warnung, wenn ein Schlüssel nirgends deklariert ist. Es löst außerdem `i18next`-, `react-i18next`-, `next-intl`- und `use-intl`-Aufrufe auf, was bei der Migration hilft.
-- **[MCP-Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/mcp_server.md)**: stellt die Intlayer-Dokumentation und -CLI für Cursor, VS Code, Claude Desktop, Claude Code und ChatGPT bereit, sodass ein Assistent aus der aktuellen Doku antwortet statt zu raten und Befehle wie `intlayer fill` selbst ausführen kann.
-- **[Agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/agent_skills.md)**: fokussierte Skills wie `intlayer-config`, `intlayer-cli` und `intlayer-content` sowie eines pro Framework, die einem Agenten Ihr Routing-Setup und die Inhaltsknoten-Typen beibringen.
-- **[ESLint-Plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/eslint.md)**: `no-raw-text` markiert fest kodierte Strings, mit weiteren Regeln für statische Wörterbuchschlüssel und ungenutzte Inhalte.
-
-</Question>
-
-<Question title="Sollte ich den Compiler verwenden oder meine Inhalte selbst deklarieren?">
-
-Verwenden Sie den Compiler, wenn Sie i18n mit möglichst wenig Aufwand zu einer bestehenden Codebasis hinzufügen möchten: Sie behalten Ihre Komponenten, wie sie sind, und die Wörterbücher folgen. Deklarieren Sie Inhalte selbst, wie der [Standard-Leitfaden für Vite und React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md) zeigt, wenn Sie explizite Kontrolle über Schlüssel, Struktur und Wiederverwendung über Komponenten hinweg möchten. Beide können nebeneinander bestehen: kompilierte Inhalte und deklarierte Inhalte leben in derselben Wörterbuchebene.
-
-</Question>
-
-<Question title="Was passiert mit Strings, die der Compiler nicht sehen kann?">
-
-Sie bleiben unübersetzt, weil der Compiler mit statischer Analyse arbeitet. Alles, was zur Laufzeit zusammengesetzt wird, etwa eine API-Fehlermeldung, ein CMS-Feld oder ein durch Verkettung gebauter String, muss auf die normale Weise in einer Inhaltsdatei deklariert werden. Führen Sie `npx intlayer test` aus, um zu finden, was fehlt.
-
-</Question>
-
-<Question title="Wie entscheidet der Compiler, was für den Nutzer sichtbarer Text ist?">
-
-Durch Heuristiken über Ihren JSX-Code, weshalb er in beide Richtungen falsch liegen kann: Ein `className`-Wert oder ein Statuscode kann wie Text aussehen, und ein ungewöhnliches Muster kann übersehen werden. In einer großen Codebasis korrigieren Sie die Randfälle mit Annotationen. Wenn dieser Kompromiss Ihnen nicht zusagt, führt `npx intlayer extract` dieselbe Extraktion einmalig aus und lässt das Ergebnis als Diff zum Review. Siehe den [extract-Befehl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/extract.md).
-
-</Question>
-
-<Question title="Wie fülle ich die fehlenden Übersetzungen?">
-
-Schritt 7 behandelt das. `npx intlayer fill` sendet den extrahierten Inhalt an das LLM Ihrer Wahl, unter Verwendung Ihres eigenen Anbieters und API-Schlüssels, und `--git-diff` beschränkt den Lauf auf das, was sich im Branch geändert hat. Siehe den [fill-Befehl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/fill.md) und die [CI/CD-Integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/CI_CD.md).
-
-</Question>
-
-<Question title="Wie ändere ich die Sprache zur Laufzeit?">
-
-Schritt 6 behandelt das. `useLocale` stellt die aktive Locale, die deklarierten Locales und einen Setter bereit, der die Wahl persistiert, und die Komponenten, die kompilierten Inhalt lesen, rendern in der neuen Sprache neu, ohne Seitenneuladung.
-
-</Question>
-
-<Question title="Unterstützt Intlayer Pluralformen, Genus und Rich Text?">
-
-Ja: [Pluralformen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/plurial.md), [genusbasierte Inhalte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/gender.md), Bedingungen, [Einfügungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/markdown.md) und [Formatter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/formatters.md) für Zahlen, Daten und Währungen.
-
-</Question>
-
-<Question title="Wie können Übersetzer die Inhalte bearbeiten, ohne den Code anzufassen?">
-
-Über den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md), der auf Ihrer eigenen Infrastruktur läuft und es jedem ermöglicht, Text direkt in der laufenden App zu bearbeiten, oder das [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md), das Inhalte auslagert, sodass sie sich ohne Deployment ändern können.
-
-</Question>
-
-<Question title="Ist Intlayer kostenlos und Open Source?">
-
-Ja, unter der Apache-2.0-Lizenz, kommerzielle Nutzung eingeschlossen. Das gehostete CMS ist ein optionaler kostenpflichtiger Dienst, der auch [selbst gehostet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/self_hosting.md) werden kann.
-
-</Question>
-
-</FAQ>