@intlayer/docs 9.4.2 → 9.4.4

package/blog/de/i18n_meaning.md

@@ -19,8 +19,6 @@ author: aymericzip
 
 # i18n Bedeutung: Was ist Internationalisierung und warum ist sie wichtig?
 
-![i18n Illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Die "i18n" Bedeutung verstehen
 
 Wenn Sie in der Softwareentwicklung, im Webdesign oder im digitalen Marketing tätig sind, sind Sie wahrscheinlich schon auf den Begriff **i18n** gestoßen. Die wahre **i18n Bedeutung** ist einfach ein Numeronym für **Internationalisierung**.

package/blog/de/i18n_testing_strategies.md

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Übersetzungen testen ohne fragile Tests zu schreiben"
+description: Was es sich in einer i18n-App zu testen lohnt und was nicht. Provider-basiertes Rendering, Pseudolokalisierung, RTL- und Pluralabdeckung und die Snapshot-Falle.
+keywords:
+  - übersetzungen testen
+  - i18n testing
+  - testing library i18n
+  - pseudolokalisierung
+  - locale provider test
+  - snapshot test i18n
+slugs:
+  - blog
+  - i18n-testing-strategies
+author: aymericzip
+---
+
+# Übersetzungen testen ohne fragile Tests zu schreiben
+
+Die meisten i18n-Test-Suites scheitern an einem von zwei Problemen. Entweder prüfen sie wörtliche Texte ab, sodass jede Textänderung fünfzig Tests bricht und das Team sie entnervt löscht. Oder sie rendern alles in der Standard-Locale, was keinerlei Aussagekraft über die restlichen siebzehn Sprachen liefert. Beide Ansätze führen zum selben Ergebnis, einer Test-Suite, der niemand mehr vertraut.
+
+## Inhaltsverzeichnis
+
+<TOC/>
+
+## Die Muster sind bibliotheksunabhängig
+
+Jedes unten aufgeführte Muster funktioniert auf jedem i18n-Stack. Ersetzen Sie den Provider durch `I18nextProvider`, `NextIntlClientProvider` oder `IntlProvider` und die Tests bleiben identisch, da sie die gerenderte Ausgabe und nicht die spezifische Bibliotheks-API überprüfen.
+
+Auch die Abdeckungswerkzeuge lassen sich direkt übertragen: Mit dem [Sync JSON-Plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md), das auf Ihre bestehenden Kataloge verweist, oder einem [Kompatibilitätsadapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/index.md), der Ihre aktuellen Imports verknüpft, wird die Abdeckungsprüfung direkt gegen Ihr vorhandenes JSON ausgeführt.
+
+## Festlegen, was wirklich getestet werden soll
+
+Übersetzungsqualität lässt sich nicht per Assertion prüfen. Keine Überprüfung kann feststellen, ob das Deutsch idiomatisch klingt, und der Versuch führt lediglich zu einer Test-Suite voller fest codierter Zeichenketten.
+
+Was sich mechanisch testen lässt und sinnvoll ist:
+
+| Lohnenswert zu testen                       | Nicht lohnenswert zu testen             |
+| :------------------------------------------ | :-------------------------------------- |
+| Jede erforderliche Locale hat einen Wert    | Ob die Formulierung elegant ist         |
+| Die richtige Locale erreicht die Komponente | Der exakte Wortlaut jedes Labels        |
+| Plurale lösen für jede Kategorie auf        | Ob der Übersetzer sauber gearbeitet hat |
+| RTL-Locales setzen Richtung und Spiegelung  | Jeder String in jeder Sprache           |
+| Formatierte Daten und Zahlen nutzen Locale  | Interne Korrektheit von `Intl`          |
+
+Die Abdeckungsprüfung gehört in einen datengetriebenen Test, nicht in Komponententests. Dies wird in [Fehlende Übersetzungen aufspüren](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/detecting_missing_translations.md) behandelt; dieser Beitrag widmet sich dem Rest.
+
+## Unter einem Provider rendern und nach Rollen abfragen
+
+Das Kernmuster besteht darin, die Komponente innerhalb eines Locale-Providers zu mounten und nach Rolle oder Test-ID statt nach Text abzufragen.
+
+```tsx fileName="CartSummary.test.tsx"
+import { render, screen } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+import { CartSummary } from "./CartSummary";
+
+test("rendert die Überschrift der Zusammenfassung auf Französisch", () => {
+  render(
+    <IntlayerProvider locale="fr-FR">
+      <CartSummary />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByRole("heading")).toBeInTheDocument();
+});
+```
+
+Die Abfrage `getByRole("heading")` übersteht Textänderungen problemlos. `getByText("Récapitulatif")` bricht dagegen sofort. Verwenden Sie den exakten Text nur dann, wenn der String selbst Gegenstand des Tests ist, was selten der Fall ist.
+
+Für Attribute wie `aria-label` benötigen Sie den Roh-String anstelle eines renderbaren Knotens. In React stellen Einträge von `useIntlayer` dafür ein `.value`-Feld bereit.
+
+## Tests über Locales hinweg parametrisieren
+
+Ein einziger Testrumpf, ausgeführt über alle Locales, ist wertvoller als separate Tests pro Sprache.
+
+```tsx fileName="direction.test.tsx"
+import { getHTMLTextDir } from "intlayer";
+import { render } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+
+describe.each(["en", "fr", "ja", "ar"])("locale %s", (locale) => {
+  it("rendert ohne Fallback auf den Schlüssel", () => {
+    const { container } = render(
+      <IntlayerProvider locale={locale}>
+        <CartSummary />
+      </IntlayerProvider>
+    );
+
+    // Ein gerenderter Schlüssel bedeutet, dass die Auflösung fehlgeschlagen ist.
+    expect(container.textContent).not.toMatch(/^[a-z]+(\.[a-z]+)+$/);
+  });
+
+  it("setzt die korrekte Textrichtung", () => {
+    expect(getHTMLTextDir(locale)).toBe(locale === "ar" ? "rtl" : "ltr");
+  });
+});
+```
+
+Die erste Assertion ist ein unkomplizierter allgemeiner Gewinn: Wenn ein Nachschlagen fehlschlägt und die Bibliothek den Schlüssel rendert, enthält das DOM ein Format wie `cart.summary.title`. Das fängt eine ganze Klasse von Fehlern ab, ohne eine einzige Zeichenkette benennen zu müssen.
+
+## Pseudolokalisierung findet, was Kataloge übersehen
+
+Fügen Sie eine Test-Locale hinzu, die jede Zeichenkette transformiert, beispielsweise `Checkout` zu `[!!! Çĥéçķöũţ !!!]`. Rendern Sie die Seite anschließend in dieser Sprache.
+
+Alles, was weiterhin in reinem Englisch erscheint, ist fest im Quellcode codiert. Keine katalogbasierte Prüfung kann das erkennen, da der String für die Tools schlicht nicht existiert. Die Klammern erfüllen einen zweiten Zweck: Sie verlängern den Text um rund 30 Prozent, wodurch Layout-Probleme sichtbar werden, bevor sie auf Deutsch auftreten.
+
+Dies sollte idealerweise als visueller Durchlauf oder End-to-End-Test laufen und nicht als Unit-Test, da Fehler rein optischer Natur sind.
+
+## Plurale erfordern Tests pro Kategorie, nicht pro Sprache
+
+Pluralfehler bleiben oft unbemerkt, weil Englisch nur zwei Formen kennt und die meisten Entwickler nur diese ausführen. Polnisch hat vier, Arabisch sechs.
+
+```ts fileName="plural.test.ts"
+// Arabisch deckt zero, one, two, few, many, other ab.
+describe.each([0, 1, 2, 3, 11, 100])("anzahl %i", (count) => {
+  it("erzeugt einen nicht-leeren String auf Arabisch", () => {
+    expect(formatItems(count, "ar")).not.toBe("");
+  });
+});
+```
+
+Wählen Sie Zahlenwerte, die jede CLDR-Kategorie Ihrer komplexesten Zielsprache abdecken, statt überall nur 1 und 2 zu prüfen. `Intl.PluralRules` verrät, in welche Kategorie eine Zahl fällt, sodass Sie die Stichproben ableiten können. Mehr dazu im [Beitrag zum ICU-Message-Format](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/icu_message_format.md).
+
+## Die Snapshot-Falle
+
+Snapshots und i18n harmonieren schlecht. Ein Snapshot einer lokalisierten Komponente speichert jeden enthaltenen String ab. Korrigiert ein Übersetzer einen Tippfehler im Portugiesischen, schlägt ein zuvor grüner Test fehl, in einer Datei, die kein Reviewer verständlich beurteilen kann. Nach dem dritten Vorfall führt jemand `-u` aus, ohne das Diff zu lesen, und Snapshots verlieren jeden Nutzen.
+
+Wenn Sie Snapshots nutzen möchten, erstellen Sie diese nur in einer einzigen Locale und betrachten Sie sie als strukturelle, nicht inhaltliche Prüfung. Alles Sprachspezifische gehört in explizite Assertions.
+
+## Die Verhandlung testen, nicht nur das Rendern
+
+Der häufigste i18n-Fehler in Produktion ist kein fehlender String. Es ist die Auswahl der falschen Locale: Eine URL lautet `/fr/`, der Client liest `navigator.language`, und beide widersprechen sich.
+
+Testen Sie die Auflösungsreihenfolge direkt als reine Funktion, unabhängig von Komponenten:
+
+```ts fileName="locale-resolution.test.ts"
+it("bevorzugt die URL gegenüber der gespeicherten Einstellung", () => {
+  expect(resolveLocale({ url: "/fr/about", stored: "de", header: "ja" })).toBe(
+    "fr"
+  );
+});
+
+it("fällt auf den Header zurück, wenn die URL kein Präfix hat", () => {
+  expect(resolveLocale({ url: "/about", stored: null, header: "ja" })).toBe(
+    "ja"
+  );
+});
+```
+
+Dies ist der wertvollste i18n-Test, der in den meisten Projekten fehlt, und er benötigt kein DOM.
+
+## Was wo ausgeführt werden sollte
+
+- **Unit**: Locale-Verhandlung, Formatierer, Pluralkategorien. Schnell, ohne DOM.
+- **Komponente**: Ein Provider-basiertes Rendering pro Locale mit Prüfung auf Rollen und Abwesenheit von Rohschlüsseln.
+- **Abdeckung**: Ein datengetriebener Test, der sicherstellt, dass keine erforderlichen Locales fehlen.
+- **Visuell oder E2E**: Pseudolokalisierungsdurchlauf und eine RTL-Seite, da diese Fehler optischer Natur sind.
+
+Führen Sie die ersten drei in der Pipeline bei jedem Commit aus. Letzteres eignet sich hervorragend für nächtliche Builds.
+
+## Häufige Fehler
+
+- **Prüfung auf exakten Wortlaut überall.** Führt dazu, dass die Test-Suite innerhalb weniger Monate gelöscht wird.
+- **Snapshots von lokalisierten Komponenten.** Übersetzer brechen Builds und Reviewer winken Änderungen ungesehen durch.
+- **Nur die Standard-Locale testen.** Die einzige Sprache, die unmöglich fehlen kann.
+- **Nur 1 und 2 für Plurale testen.** Übergeht Kategorien, die im Englischen nicht existieren.
+- **Die i18n-Bibliothek wegmocken.** Dann testen Sie lediglich, dass Ihr Mock Strings zurückgibt.
+- **Verhandlung nie testen.** Das häufigste Problem im Produktivbetrieb und das am einfachsten zu testende.
+
+## Weiterführende Ressourcen
+
+- [Inhalte testen: CLI-Audit, programmatische API und UI-Assertions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/testing.md)
+- [ESLint-Plugin: Erkennung harter Strings und ungenutzter Inhalte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/eslint.md)
+- [Formatierer und Locale-Dienstprogramme, einschließlich `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/formatters.md)
+- [Benchmark-Berichte über Frameworks hinweg](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/benchmark/index.md)
+- [Drop-in react-i18next-Kompatibilitätsadapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/react-i18next.md)
+- [Fehlende Übersetzungen aufspüren](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/detecting_missing_translations.md)
+- [ICU-Message-Format: Plurale, Select und Formatierungs-Skelette](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/icu_message_format.md)

package/blog/de/intlayer_with_i18next.md

@@ -74,15 +74,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/intlayer_with_next-i18next.md

@@ -67,15 +67,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/intlayer_with_next-intl.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/intlayer_with_react-i18next.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/intlayer_with_react-intl.md

@@ -66,15 +66,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/intlayer_with_vue-i18n.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/blog/de/is_i18next_outdated.md

@@ -0,0 +1,315 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Ist i18next im Jahr 2026 veraltet?
+description: i18next treibt Millionen Websites an, aber seine Runtime-Architektur von 2011 zeigt ihr Alter. Ein Blick auf Bundle-Overhead, Tree-Shaking-Grenzen und verlangsamte Innovation.
+keywords:
+  - i18next
+  - react-i18next
+  - next-i18next
+  - Intlayer
+  - Internationalisierung
+  - i18n
+  - Bundle-Größe
+  - Blog
+slugs:
+  - blog
+  - is-i18next-outdated
+author: aymericzip
+---
+
+# Ist i18next im Jahr 2026 veraltet?
+
+`i18next` startete 2011, lange bevor React-Komponenten, Webpack-Bundling oder TypeScript zum Standard wurden. Es eroberte das Ökosystem durch Flexibilität und Omnipräsenz, mit Plugins für jeden Stack und Antworten auf StackOverflow für fast jedes Problem.
+
+Das Projekt ist keineswegs aufgegeben, Patches erscheinen weiterhin regelmäßig. Es gibt jedoch einen Unterschied zwischen der Pflege einer älteren Engine und dem aktiven Schritt-Halten mit modernen Frontend-Architekturen.
+
+In den letzten Jahren verlagerte sich das Frontend hin zu Build-Time-Kompilierung, React Server Components (RSC), aggressivem Tree-Shaking und KI-gestützten Workflows. Der Kern von i18next bleibt, was er vor über einem Jahrzehnt war: ein Runtime-Singleton, das Zeichenketten-Schlüssel clientseitig auflöst.
+
+<TOC/>
+
+## Wichtigste Erkenntnisse
+
+**Wartungsmodus:**
+
+Im vergangenen Jahr verzeichnete `next-i18next` ca. 63 Commits (rund einen pro Woche) und `react-i18next` ca. 157, hauptsächlich für Abhängigkeits-Updates und kleinere Fixes.
+
+**Hohe Runtime-Belastung:**
+
+`react-i18next` und `next-i18next` laden ca. 17–18 KB gzipped (~60 KB minified), bevor ein einziges Wort gerendert wird, fast das Vierfache von `next-intlayer` (~4.7 KB).
+
+**Signifikanter Daten-Leakage:**
+
+In statischen Standard-Setups gehören bis zu **89.8%** der übertragenen Lokalisierungsdaten zu anderen Routen oder ungenutzten Sprachen.
+
+**Tree-Shaking unmöglich:**
+
+Dynamische Aufrufe wie `t("home.hero.title")` können von Bundlern nicht analysiert werden, wodurch ganze JSON-Dateien im Client-Chunk landen.
+
+**Kommerzielle Ausrichtung:**
+
+Die Maintainer betreiben Locize. Die Bereitstellung einer kostenlosen, lokalen KI-Übersetzung direkt in der CLI stünde in direkter Konkurrenz zu ihrem zentralen Geschäftsmodell.
+
+## Wartung vs. aktive Weiterentwicklung
+
+GitHub-Stars spiegeln historische Nutzung wider, nicht zwingend moderne Architektur.
+
+| Repository              | Stars                                                                                                                                                      | Commits gesamt                                                                                                                                                          | Commits / Jahr                                                                                                                                                         | Letzter Commit                                                                                                                                   |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `i18next/i18next`       | [![stars](https://img.shields.io/github/stars/i18next/i18next?style=for-the-badge&label=stars)](https://github.com/i18next/i18next/stargazers)             | [![commits](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=for-the-badge&label=commits)](https://github.com/i18next/i18next/commits)             | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/i18next/commits)             | [![last](https://img.shields.io/github/last-commit/i18next/i18next?style=for-the-badge)](https://github.com/i18next/i18next/commits)             |
+| `i18next/react-i18next` | [![stars](https://img.shields.io/github/stars/i18next/react-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/react-i18next/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/i18next/react-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/react-i18next/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/react-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/react-i18next/commits) | [![last](https://img.shields.io/github/last-commit/i18next/react-i18next?style=for-the-badge)](https://github.com/i18next/react-i18next/commits) |
+| `i18next/next-i18next`  | [![stars](https://img.shields.io/github/stars/i18next/next-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/next-i18next/stargazers)   | [![commits](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/next-i18next/commits)   | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/next-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/next-i18next/commits)   | [![last](https://img.shields.io/github/last-commit/i18next/next-i18next?style=for-the-badge)](https://github.com/i18next/next-i18next/commits)   |
+| `aymericzip/intlayer`   | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers)     | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)     | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits)     | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)     |
+
+Aktivität in den vergangenen zwölf Monaten:
+
+| Projekt         | Gesamte Commits | Letzte 12 Monate | Fokus                             |
+| --------------- | --------------- | ---------------- | --------------------------------- |
+| `next-i18next`  | 1.311           | **63**           | Next.js-Kompatibilität & Patches  |
+| `react-i18next` | 1.988           | **157**          | Types & Wartung                   |
+| `i18next` core  | 2.626           | **259**          | Kleinere Fixes                    |
+| Intlayer        | 7.156           | **4.343**        | Compiler, IDE-Tooling & KI-Engine |
+
+[![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
+
+Eine fokussierte Bibliothek kann stabil sein. Doch i18n-Tooling entwickelt sich stetig: Moderne Bundler entfernen ungenutzte Texte bereits beim Build, LLMs übersetzen direkt in der CI und Editoren nutzen dedizierte Language Server (LSP) sowie KI-Assistenten. Wegen seines reinen Runtime-Modells kann i18next diese Neuerungen kaum übernehmen.
+
+## Messung der Bundle-Kosten
+
+<I18nBenchmark framework="tanstack" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Gemessen in einem Produktions-Build über 10 Routen und 10 Sprachen mit Gzip-Kompression. Details im [i18n-Benchmark-Bericht](https://intlayer.org/de/doc/benchmark).
+
+### Basis-Overhead der Bibliotheken
+
+Größe vor dem Hinzufügen von übersetztem Text:
+
+| Bibliothek             | Gzipped    | Minified    |
+| ---------------------- | ---------- | ----------- |
+| `next-i18next@16.0.5`  | 17.8 KB    | 61.2 KB     |
+| `react-i18next@17.0.2` | 17.3 KB    | 59.8 KB     |
+| `intlayer@8.7.12`      | **4.7 KB** | **12.8 KB** |
+
+### Seitengewicht und Leakage
+
+Getestet in React / TanStack Start (statische Strategie):
+
+| Bibliothek            | Seiten-JS Ø (gz) | Sprach-Leakage | Andere-Seiten-Leakage | Komponente Ø (gz) | Hydration   |
+| --------------------- | ---------------- | -------------- | --------------------- | ----------------- | ----------- |
+| `react-i18next`       | 180.3 KB         | **50.0%**      | **89.8%**             | 24.3 KB           | 85.1 ms     |
+| Intlayer              | **127.8 KB**     | 50.0%          | **0.8%**              | **7.1 KB**        | **24.1 ms** |
+| Intlayer (scoped dyn) | **118.1 KB**     | **0.0%**       | **0.8%**              | **4.6 KB**        | 23.7 ms     |
+
+Auf Next.js:
+
+| Bibliothek        | Seiten-JS Ø (gz) | Andere-Seiten-Leakage | Komponente Ø (gz) |
+| ----------------- | ---------------- | --------------------- | ----------------- |
+| Basis (ohne i18n) | 150.8 KB         | 0.0%                  | 0.7 KB            |
+| `next-i18next`    | **227.5 KB**     | **89.8%**             | 24.5 KB           |
+| `next-intlayer`   | **152.1 KB**     | **0.0%**              | **7.2 KB**        |
+
+### Wichtigste Ergebnisse
+
+**Seitengewicht:**
+
+Unter Next.js vergrößert `next-i18next` das Baseline-Bundle um **76.7 KB gzipped** (+50%). `next-intlayer` fügt lediglich 1.3 KB hinzu.
+
+**Inhalts-Leakage:**
+
+Standardmäßig gehören fast **90% der geladenen Übersetzungen** zu anderen Seiten. Manuelles Namespacing erfordert fehleranfällige Buchführung pro Route.
+
+**Hydration-Verzögerung:**
+
+Komponenten mit `react-i18next` benötigten **85 ms** zur Hydration, verglichen mit **24 ms** bei Intlayer. Große JSON-Objekte an Client-Komponenten zu übergeben beeinträchtigt die Reaktionszeit.
+
+## Warum ist i18next schwergewichtig?
+
+### Wachsender Funktionsumfang zur Laufzeit
+
+Ausschließlich im Browser zu laufen bedeutet, alle Fähigkeiten vorab zu bündeln: Interpolation, Pluralregeln, Kontext-Handling, Formatierer und Event-Busse. Selbst die Anzeige einfacher Texte lädt die gesamte Engine mit.
+
+### Dynamische Schlüssel verhindern Tree-Shaking
+
+Da `"hero.title"` erst zur Laufzeit aufgelöst wird, können Bundler nicht erkennen, welche Schlüssel gebraucht werden. Ungenutzte Übersetzungen verbleiben im Bundle.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```tsx fileName="Component.tsx"
+const { t } = useTranslation("home");
+
+return <h1>{t("hero.title")}</h1>;
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```tsx fileName="Hero.tsx"
+const { title } = useIntlayer("hero");
+
+return <h1>{title}</h1>;
+```
+
+  </Tab>
+</Tabs>
+
+Der [Intlayer-Compiler](https://intlayer.org/de/doc/compiler) erkennt, was `Hero.tsx` tatsächlich verwendet, und entfernt unreferenzierte Felder vor dem Build. Details unter [Bundle-Optimierung](https://intlayer.org/de/doc/concept/bundle-optimization).
+
+## Entwicklererfahrung
+
+### Getrennte JSON-Dateien vs. Co-Location
+
+Bei i18next liegt der Inhalt in separaten JSON-Ordnern getrennt vom Code. Intlayer platziert Deklarationen direkt neben den Komponenten.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```json fileName="locales/en/hero.json"
+{
+  "title": "Ship in every language"
+}
+```
+
+```json fileName="locales/de/hero.json"
+{
+  "title": "Veröffentliche in jeder Sprache"
+}
+```
+
+```tsx fileName="Hero.tsx"
+import { useTranslation } from "react-i18next";
+
+export const Hero = () => {
+  const { t } = useTranslation("hero");
+  return <h1>{t("title")}</h1>;
+};
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      de: "Veröffentliche in jeder Sprache",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="Hero.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const Hero = () => {
+  const { title } = useIntlayer("hero");
+  return <h1>{title}</h1>;
+};
+```
+
+  </Tab>
+</Tabs>
+
+Wird `Hero.tsx` verschoben oder gelöscht, wandern seine Übersetzungen automatisch mit.
+
+### Autovervollständigung vs. strikte Typsicherheit
+
+Das Erweitern von `CustomTypeOptions` bringt Autovervollständigung im Editor, garantiert aber keine Vollständigkeit. Das Löschen eines Schlüssels in `de/home.json` bricht den Build nicht ab, sondern führt zu einem Runtime-Fallback.
+
+Intlayer leitet Typen direkt aus Inhaltsdeklarationen ab. Der [`strictMode`](https://intlayer.org/de/doc/concept/configuration) verwandelt fehlende Übersetzungen in strikte Build-Fehler.
+
+### Tooling-Vergleich
+
+| Feature                      | i18next-Ökosystem        | Intlayer                                                                 |
+| ---------------------------- | ------------------------ | ------------------------------------------------------------------------ |
+| **VS Code Extension**        | Nur Drittanbieter        | ✅ [Offizielle Extension](https://intlayer.org/de/doc/vs-code-extension) |
+| **Language Server (LSP)**    | ❌ Keiner                | ✅ [Dedizierter LSP](https://intlayer.org/de/doc/lsp)                    |
+| **MCP Server (für KI)**      | ❌ Keiner                | ✅ [Integrierter MCP-Server](https://intlayer.org/de/doc/mcp-server)     |
+| **Agent Skills**             | ❌ Keine                 | ✅ [Einsatzbereite Skills](https://intlayer.org/de/doc/agent_skills)     |
+| **Visuelles In-Context-CMS** | Locize (Kostenpflichtig) | ✅ [Kostenlos & Open Source](https://intlayer.org/de/doc/concept/editor) |
+
+## Übersetzung und das Locize-Geschäftsmodell
+
+Locize ist der offizielle kommerzielle Dienst der i18next-Schöpfer. Nachhaltige Open-Source-Finanzierung ist wichtig, doch dieses Modell birgt Interessenskonflikte: Eine Bibliothek, die über ein SaaS-Übersetzungsportal monetarisiert wird, hat wenig Anreiz, ein kostenfreies, lokales KI-Übersetzungstool in ihre CLI einzubauen.
+
+Intlayer setzt auf einen offenen Ansatz:
+
+- [`intlayer fill`](https://intlayer.org/de/doc/concept/auto-fill) ergänzt fehlende Übersetzungen im Terminal oder in der CI mit eigenen API-Schlüsseln von OpenAI, Anthropic, Mistral oder Gemini.
+- Das [Intlayer CMS](https://intlayer.org/de/doc/concept/cms) ist Open Source und via Docker Compose selbst hostbar.
+- Compiler, CLI, Editor und CMS stehen unter der Apache-2.0-Lizenz.
+
+## Wo i18next weiterhin passt
+
+<AccordionGroup>
+<Accordion header="Stabile Legacy-Codebases">
+
+Läuft Ihre Anwendung einwandfrei und ist die Bundle-Größe kein Engpass, besteht kein unmittelbarer Migrationsdruck.
+
+</Accordion>
+<Accordion header="Spezielle Plattformen">
+
+Das breite Plugin-System von i18next unterstützt Umgebungen (Electron, ältere jQuery-Apps, benutzerdefinierte Bridges), die neuere Compiler nicht priorisieren.
+
+</Accordion>
+<Accordion header="Große Community-Historie">
+
+Zahlreiche Lösungen auf StackOverflow und GitHub helfen bei seltenen Grenzfällen.
+
+</Accordion>
+</AccordionGroup>
+
+## Wie verbessere ich mein bestehendes i18next-Setup?
+
+Intlayer bietet Drop-in-Kompatibilitätspakete an, die exakt dieselben Funktionssignaturen wie die i18next-Bibliotheken (`i18next`, `react-i18next` und `next-i18next`) bereitstellen. Sie müssen Ihre Komponenten nicht umschreiben, um von einer modernen, compilergestützten Architektur zu profitieren.
+
+Die Einrichtung erfolgt mit einem einzigen Befehl:
+
+```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
+```
+
+Dieses interaktive CLI-Tool:
+
+1. Installiert das Kompatibilitätspaket `@intlayer/i18next`.
+2. Richtet Bundler-Aliase ein, sodass Ihre bisherigen Importe (`useTranslation`, `Trans`, `t`) nahtlos auf Intlayer verweisen und die alte Bibliothek aus der `package.json` entfernt werden kann.
+3. Aktiviert sofort Sprachserver-Diagnosen (LSP) in der IDE, Tree-Shaking beim Build und lokale Workflows für KI-Übersetzungen.
+
+Für detaillierte Anleitungen stehen Ihnen unsere Dokumentationen zur Verfügung:
+
+- **Kompatibilitäts-Layer:** Behalten Sie Ihre Syntax mit den Adaptern für [i18next](https://intlayer.org/de/doc/compatibility/i18next), [react-i18next](https://intlayer.org/de/doc/compatibility/react-i18next) und [next-i18next](https://intlayer.org/de/doc/compatibility/next-i18next).
+- **Katalog-Migration:** Konvertieren Sie JSON-Dateien in typsichere Wörterbücher: [von i18next](https://intlayer.org/de/doc/migration/i18next), [von react-i18next](https://intlayer.org/de/doc/migration/react-i18next) oder [von next-i18next](https://intlayer.org/de/doc/migration/next-i18next).
+- **Hybrides Setup:** Behalten Sie i18next zur Laufzeit bei und [nutzen Sie Intlayer mit i18next](https://intlayer.org/de/blog/intlayer-with-i18next), um Kataloge automatisch zu typisieren und zu übersetzen.
+
+Prüfen Sie Ihre Website mit dem kostenlosen [i18n SEO Scanner](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Weiterführende Artikel
+
+- [Next.js i18n Benchmark: Detaillierte Analyse](https://intlayer.org/de/doc/benchmark/nextjs)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/de/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Ist next-intl im Jahr 2026 veraltet?](https://intlayer.org/de/blog/is-next-intl-outdated)
+- [Compiler-gestützte vs. deklarative i18n-Architektur](https://intlayer.org/de/blog/compiler-vs-declarative-i18n)