@intlayer/docs 9.4.3 → 9.5.0

package/blog/de/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,294 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "So machen Sie eine bestehende Next.js-Anwendung nachträglich mehrsprachig (i18n-Leitfaden 2026)"
+description: "Der Leitfaden für 2026, um eine bestehende Next.js-App nachträglich mehrsprachig (i18n) zu machen. Automatische Extraktion, KI-Übersetzung und Routing mit Intlayer."
+keywords:
+  - Next.js i18n
+  - Internationalisierung
+  - Bestehende Next.js App übersetzen
+  - Next.js 16
+  - Intlayer
+  - Mehrsprachig
+  - React i18n
+  - Compiler
+  - KI-Übersetzung
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# So machen Sie eine bestehende Next.js-Anwendung nachträglich mehrsprachig (i18n-Leitfaden 2026)
+
+Internationalisierung (i18n) vom ersten Tag an in ein Next.js-Projekt zu integrieren, ist relativ einfach. Doch was passiert, wenn Sie bereits eine ausgereifte, produktive Next.js-Anwendung in einer einzigen Sprache haben und diese **nachträglich** mehrsprachig machen müssen?
+
+Wer dies schon einmal mit traditionellen Bibliotheken wie `next-intl` oder `next-i18next` versucht hat, kennt den Albtraum:
+
+- Manuelle Suche nach fest kodierten Texten in Hunderten von JSX/TSX-Dateien.
+- Erstellen verschachtelter JSON-Dateien und Erfinden willkürlicher Übersetzungsschlüssel (`pages.dashboard.header.title` usw.).
+- Ersetzen von Text durch Hook-Aufrufe (`t('...')`).
+- Umstrukturieren des gesamten `app/`-Ordners in `app/[locale]/...`, was bestehende Routen, Lesezeichen und Suchmaschinen-Indexierungen beschädigt.
+
+Im Jahr 2026 müssen Sie Ihre Codebasis nicht neu schreiben. Mit **Intlayer** rüsten Sie eine bestehende Next.js-App in wenigen Minuten mit automatisierter Extraktion, KI-Übersetzung und flexiblem Routing nach.
+
+> Suchen Sie die vollständige, schrittweise technische Anleitung für Next.js 16 App Router? Besuchen Sie unsere Dokumentation: [Next.js 16 mit Intlayer übersetzen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md).
+
+## Inhaltsverzeichnis
+
+<TOC/>
+
+## Das Nachrüstungs-Dilemma: Warum die Internationalisierung bestehender Apps schwierig ist
+
+Entwickler stehen bei bestehenden Next.js-Apps vor drei großen Herausforderungen:
+
+1. **Codebasis-Unterbrechung**: Das manuelle Extrahieren von Zeichenketten in JSON-Wörterbücher erfordert Änderungen an fast jeder Komponentendatei.
+2. **Routing-Zwang**: Herkömmliche i18n-Bibliotheken zwingen Sie dazu, Seiten in ein dynamisches `[locale]`-Segment zu verschieben (z. B. `/app/[locale]/page.tsx`).
+3. **Mühsame Übersetzungsarbeit**: Das Übersetzen extrahierter Wörterbücher in 5, 10 oder 20 Sprachen erfordert ständiges Kopieren und Einfügen.
+
+Intlayer löst diese Probleme architektonisch durch **Compiler-gestützte Extraktion**, **deklarative Wörterbücher** und **flexibles Routing**.
+
+## Automatisierte Inhaltsextraktion (Keine manuelle Textsuche)
+
+### Option A: Der CLI-Extraktor (`npx intlayer extract`)
+
+Führen Sie das Extraktions-Tool von Intlayer direkt in Ihrem Code aus:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Dieser Befehl analysiert Ihre React-Komponenten, extrahiert Texte und erstellt automatisch deklarative Inhaltsdateien (`.content.ts`) direkt neben Ihren Komponenten.
+
+### Option B: Der Intlayer-Compiler (Build-Time-Extraktion)
+
+Mit aktiviertem Intlayer-Compiler schreiben Sie Ihre Komponenten einfach mit reinem Text in Ihrer Standardsprache weiter. Beim Build extrahiert der Compiler den Text und bindet die lokalisierten Inhalte automatisch ein:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+Hinter den Kulissen erstellt Intlayer das Wörterbuch und verknüpft die Komponente mit ihren lokalisierten Inhalten, wodurch manuelles Refactoring vollständig entfällt.
+
+In diesem Fall wird eine Datei `src/app/page.content.ts` mit folgendem Inhalt generiert:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## KI-gestützte Übersetzung mit Ihrem bevorzugten LLM
+
+Nach der Extraktion übersetzt die integrierte KI-CLI von Intlayer Ihre Inhalte blitzschnell mit OpenAI, Anthropic, DeepSeek oder Mistral über Ihre eigenen API-Schlüssel:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```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,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "SaaS-Dashboard für Produktivität und Teamzusammenarbeit",
+  },
+};
+
+export default config;
+```
+
+Das Ausführen von `npx intlayer fill` füllt Ihre `.content.ts`-Deklarationen mit Übersetzungen für alle konfigurierten Sprachen:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      de: "Willkommen auf unserer Plattform",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Da Intlayer dem LLM einen übergeordneten `applicationContext` bereitstellt, behalten generierte Übersetzungen technische Nuancen, Markenstimme und grammatikalischen Kontext deutlich besser bei als herkömmliche Automatisierungswerkzeuge.
+
+Um vor dem Release in Produktion zu prüfen, dass keine Texte übersehen wurden:
+
+```bash
+npx intlayer test
+```
+
+## Mehrsprachiges Routing ohne Beschädigung bestehender URLs
+
+Intlayer bietet flexible Routing-Strategien:
+
+- **Suchparameter / Cookie-Modus (`search-params`)**: Behalten Sie Ihre Verzeichnisstruktur (`/app/page.tsx`) ohne Verschieben in `[locale]` bei.
+- **Präfix-Modus (`prefix` / `prefix-all-locales`)**: Sobald Sie für suchmaschinenoptimierte URLs bereit sind, unterstützt Intlayer Pfad-Routing über einen einfachen Next.js-Proxy.
+
+Konfigurieren Sie Ihre Next.js-Integration in Sekundenschnelle:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Ummanteln Sie Ihr Root-Layout mit `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Mehrsprachiges SEO
+
+Generieren Sie lokalisierte Metadaten und `hreflang`-Tags für globales SEO:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## Vertiefung: Bereit für die schrittweise Implementierung?
+
+Dieser Leitfaden gibt einen Überblick über die nachträgliche Internationalisierung einer Next.js-App im Jahr 2026. Für die vollständige schrittweise Anleitung besuchen Sie unsere Dokumentation:
+
+👉 **[Vollständiger Leitfaden zur Übersetzung von Next.js 16 mit Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md)**
+
+## Häufig gestellte Fragen (FAQ)
+
+<FAQ>
+
+<Question title="Kann ich meine Next.js-App mehrsprachig machen, ohne Dateien nach app/[locale] zu verschieben?">
+
+Ja. Intlayer unterstützt `routing.mode: "search-params"` sowie Cookie- und Header-basierte Erkennung. Ihre bestehende Ordnerstruktur bleibt vollständig erhalten.
+
+</Question>
+<Question title="Muss ich alle fest kodierten Texte manuell ersetzen?">
+
+Nein. Mit `npx intlayer extract` oder dem Intlayer-Compiler werden Texte automatisch extrahiert und deklariert.
+
+</Question>
+<Question title="Wie reduziert Intlayer die Bundle-Größe im Vergleich zu next-intl oder next-i18next?">
+
+Intlayer verwendet Inhaltsdeklarationen pro Komponente und Makro-Optimierung. Der Client lädt nur die für die gerenderte Seite erforderlichen Texte.
+
+</Question>
+<Question title="Kann ich KI verwenden, um meine Komponenten automatisch zu übersetzen?">
+
+Ja. Der Befehl `npx intlayer fill` bindet OpenAI, Anthropic, Mistral oder DeepSeek ein, um fehlende Übersetzungen mit Kontext automatisch zu ergänzen.
+
+</Question>
+</FAQ>

package/blog/de/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,353 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "So machen Sie eine bestehende Vite- und React-Anwendung nachträglich mehrsprachig (i18n-Leitfaden 2026)"
+description: "Der Leitfaden für 2026, um eine bestehende Vite- und React-App nachträglich mehrsprachig (i18n) zu machen. Automatische Extraktion, KI-Übersetzung und optimierte Bundles mit Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internationalisierung
+  - Bestehende Vite App übersetzen
+  - Bestehende React App übersetzen
+  - Intlayer
+  - Mehrsprachig
+  - Compiler
+  - KI-Übersetzung
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+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: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# So machen Sie eine bestehende Vite- und React-Anwendung nachträglich mehrsprachig (i18n-Leitfaden 2026)
+
+Internationalisierung (i18n) vom ersten Tag an in ein Vite- und React-Projekt zu integrieren, ist relativ einfach. Doch was passiert, wenn Sie bereits eine ausgereifte, produktive Anwendung in einer einzigen Sprache betreiben und diese **nachträglich** mehrsprachig machen müssen?
+
+Wer dies schon einmal mit traditionellen Bibliotheken wie `react-i18next` oder `react-intl` versucht hat, kennt den Frust:
+
+- Manuelle Suche nach fest kodierten Zeichenketten in Hunderten von JSX- und TSX-Dateien.
+- Erstellen verschachtelter JSON-Dateien und Erfinden willkürlicher Übersetzungsschlüssel (`components.header.title` usw.).
+- Ersetzen von Texten durch unhandliche Hook-Aufrufe (`t('...')`).
+- Umstrukturieren des clientseitigen Routings, des State Managements und der Sprachauswahl-Logik.
+
+Im Jahr 2026 müssen Sie Ihre Codebasis nicht neu schreiben. Mit **Intlayer** rüsten Sie eine bestehende Vite- und React-App in wenigen Minuten mit automatisierter Extraktion, KI-Übersetzung und nahtloser Integration nach.
+
+> Suchen Sie die vollständige, schrittweise technische Anleitung für Vite und React? Besuchen Sie unsere Dokumentation: [Vite und React mit Intlayer übersetzen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md).
+
+## Inhaltsverzeichnis
+
+<TOC/>
+
+## Das Nachrüstungs-Dilemma: Warum die Internationalisierung bestehender Apps schwierig ist
+
+Entwickler stehen bei bestehenden Vite- und React-Apps vor drei großen Herausforderungen:
+
+1. **Störung der Codebasis**: Das manuelle Extrahieren von Texten in JSON-Wörterbücher erfordert Änderungen an fast jeder Komponentendatei. Dies erzeugt riesige Git-Diffs, birgt Merge-Konflikte und birgt Risiken für visuelle Regressionen.
+2. **Schlüssel-Verwaltungsaufwand**: Das Erfinden von Schlüsseln wie `dashboard.hero.ctaButton` für jedes Textfragment verlangsamt die Entwicklung und erhöht die kognitive Belastung bei jeder Textänderung.
+3. **Mühsame Übersetzungsarbeit**: Sobald Texte extrahiert sind, erfordert das Übersetzen in 5, 10 oder 20 Sprachen endloses Kopieren oder teure externe Übersetzungsdienste.
+
+Intlayer löst diese Probleme auf architektonischer Ebene mit **Compiler-gestützter Extraktion**, **deklarativen Wörterbüchern auf Komponentenebene** und **reibungsloser Vite-Integration**.
+
+## Automatisierte Inhaltsextraktion (keine manuelle Textsuche)
+
+Statt jede Zeichenkette manuell aus Ihrem JSX zu kopieren, bietet Intlayer zwei einfache Wege:
+
+### Option A: Das CLI-Extraktionswerkzeug (`npx intlayer extract`)
+
+Sie können das Extraktionswerkzeug von Intlayer direkt in Ihrer Codebasis ausführen:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Dieser Befehl analysiert Ihre React-Komponenten, erkennt sichtbare Texte und erstellt automatisch Inhaltsdeklarationsdateien (`.content.ts`) direkt neben Ihren Komponenten. Ihre Komponentenlogik bleibt deklarativ, lesbar und typsicher.
+
+### Option B: Der Intlayer-Compiler (Extraktion beim Build)
+
+Wenn der Intlayer-Compiler in Ihrer Konfiguration aktiviert ist, können Sie Komponenten weiterhin mit einfachem Text in Ihrer Standardsprache schreiben. Beim Build extrahiert der Compiler den Text und injiziert den lokalisierten Inhalt automatisch:
+
+```tsx fileName="src/App.tsx"
+// Schreiben Sie ganz normalen React-Code. Der Compiler extrahiert den Text automatisch
+export default function App() {
+  return (
+    <section>
+      <h1>Willkommen auf unserer Plattform</h1>
+      <p>Entdecken Sie noch heute unsere modernen Funktionen.</p>
+    </section>
+  );
+}
+```
+
+Im Hintergrund erstellt Intlayer das Wörterbuch und verknüpft die Komponente mit ihrem lokalisierten Inhalt, wodurch manuelles Refactoring vollständig entfällt.
+
+In diesem Fall wird eine Deklarationsdatei `src/App.content.ts` mit folgender Struktur erzeugt:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    willkommenAufUnsererPlattform: t({
+      de: "Willkommen auf unserer Plattform",
+    }),
+    entdeckenSieNochHeuteUnsereFunktionen: t({
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## KI-gestützte Übersetzung mit Ihrem bevorzugten LLM
+
+Nach dem Extrahieren sollte das Übersetzen in Dutzende Sprachen keine Tage dauern. Intlayer enthält eine integrierte KI-Übersetzungs-CLI, die direkt mit OpenAI, Anthropic, DeepSeek oder Mistral über Ihre eigenen API-Schlüssel kommuniziert:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Konfigurieren Sie Ihre Sprachen und den KI-Anbieter in `intlayer.config.ts`:
+
+```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.GERMAN,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Moderne SaaS-Anwendung und Dashboard entwickelt mit Vite und React",
+  },
+};
+
+export default config;
+```
+
+Das Ausführen von `npx intlayer fill` befüllt Ihre Deklarationen mit präzisen Übersetzungen für alle konfigurierten Sprachen:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    willkommenAufUnsererPlattform: t({
+      de: "Willkommen auf unserer Plattform",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    entdeckenSieNochHeuteUnsereFunktionen: t({
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Da Intlayer den `applicationContext` an das Modell weitergibt, berücksichtigen die Übersetzungen den technischen Kontext, den Tonfall und grammatikalische Besonderheiten weitaus besser als generische Tools.
+
+Um vor dem Deployment zu prüfen, ob alle Texte übersetzt wurden:
+
+```bash
+npx intlayer test
+```
+
+## Vite-Integration und Provider-Einrichtung
+
+Die Integration von Intlayer in Vite erfordert lediglich das Hinzufügen des Plugins in `vite.config.ts` sowie das Umschließen der Wurzelkomponente mit `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Seit Intlayer v9 ist der Compiler direkt im Plugin `intlayer()` enthalten und wird automatisch aktiviert, sobald `compiler.enabled` in `intlayer.config.ts` gesetzt ist.
+
+Umschließen Sie Ihre Anwendung in der Wurzelkomponente mit `IntlayerProvider`:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Sprache dynamisch wechseln
+
+Wechseln Sie Sprachen an beliebiger Stelle in Ihrer Anwendung mit dem Hook `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## Mehrsprachiges SEO (Sitemap und Robots.txt)
+
+Intlayer enthält Formatierungsfunktionen wie `generateSitemap` und `getMultilingualUrls`, die suchmaschinenoptimierte `sitemap.xml`- und `robots.txt`-Dateien für statische Vite-Deployments erstellen:
+
+```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 || "https://example.com").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-Dateien erfolgreich generiert.");
+```
+
+Fügen Sie in Ihrer `package.json` einen `prebuild`-Hook ein, um das Skript vor `vite build` auszuführen:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Vertiefung: Bereit für die schrittweise Implementierung?
+
+Dieser Leitfaden hat Ihnen einen Überblick gegeben, wie Sie eine bestehende Vite- und React-Anwendung im Jahr 2026 ohne aufwendige Refactorings internationalisieren können.
+
+Wenn Sie jeden Teil Ihrer Anwendung detailliert einrichten möchten, einschließlich vollständiger TypeScript-Typsicherheit, dynamischer Wörterbücher und visuellem Editor, lesen Sie unsere ausführliche Dokumentation:
+
+👉 **[Ausführliche Anleitung zum Übersetzen von Vite und React mit Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)**
+
+## Häufig gestellte Fragen (FAQ)
+
+<FAQ>
+
+<Question title="Kann ich meine Vite- und React-App mehrsprachig machen, ohne alle Texte manuell zu refaktorisieren?">
+
+Ja. Sie können `npx intlayer extract` verwenden, um fest kodierte Texte automatisch in lokalisierte Inhaltsdeklarationen zu überführen, oder den Intlayer-Compiler nutzen, der Komponenten zur Build-Zeit transformiert, während Sie weiterhin normales JSX schreiben.
+
+</Question>
+<Question title="Wie reduziert Intlayer die Bundle-Größe in Vite im Vergleich zu react-i18next oder react-intl?">
+
+Intlayer verwendet Wörterbuchdefinitionen auf Komponentenebene und Makro-Optimierung beim Build. Ihre Bundles erhalten nur die exakten Daten, die von den aktuell gerenderten Komponenten benötigt werden, statt ganze JSON-Dateien zu laden. Dynamische Wörterbücher können Sprachen zudem bei Bedarf nachladen.
+
+</Question>
+<Question title="Kann ich KI verwenden, um meine bestehenden Komponenten in mehrere Sprachen zu übersetzen?">
+
+Ja. Die Intlayer-CLI enthält den Befehl `npx intlayer fill`, der sich mit Ihrem bevorzugten KI-Anbieter (OpenAI, Anthropic, Mistral, DeepSeek) verbindet, um kontextbezogene Übersetzungen für alle konfigurierten Sprachen zu erstellen.
+
+</Question>
+<Question title="Kann ich von react-i18next oder react-intl migrieren, ohne meine Komponenten neu zu schreiben?">
+
+Ja. Intlayer bietet Kompatibilitäts-Adapter für `react-i18next` und `react-intl` sowie Plugins zur Synchronisierung bestehender JSON-Übersetzungsdateien (`sync-json`).
+
+</Question>
+
+</FAQ>