@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.11

package/blog/de/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="So automatisieren Sie Ihre next-intl JSON-Übersetzungen mit 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/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# Inhaltsverzeichnis
+
+<TOC/>
+
 ## Was ist Intlayer?
 
 **Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in Next.js-Anwendungen.
@@ -53,28 +57,46 @@ Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit next-intl
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli 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 @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Paketbeschreibungen:**
@@ -82,7 +104,9 @@ bun x intlayer init
 - **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Content-Deklaration und -Erstellung
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein mit next-intl kompatibles JSON-Format
 
-### Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON
+</Step>
+
+<Step number={2} title="Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
 
@@ -119,7 +143,9 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorg
 
 Für weitere Details zum `syncJSON`-Plugin siehe bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
-### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
+</Step>
+
+<Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, verbindet und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Details finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON-Übersetzungen implementieren, die überall in Ihrem Codebasis lokalisiert sind.
 
@@ -161,6 +187,10 @@ export default config;
 
 Dies lädt alle JSON-Dateien im Verzeichnis `src`, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
 
+</Step>
+
+</Steps>
+
 ## Git-Konfiguration
 
 Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:

package/blog/de/intlayer_with_react-i18next.md

@@ -57,28 +57,46 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem v
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit react-i18next
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli 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 @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Paketbeschreibungen:**
@@ -86,7 +104,9 @@ bun x intlayer init
 - **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Inhaltsdeklaration und Build
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-i18next kompatibles JSON-Format
 
-### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
+</Step>
+
+<Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
 
@@ -122,7 +142,9 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorg
 
 Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
-### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
+</Step>
+
+<Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Codebasis lokalisiert sind.
 
@@ -163,6 +185,10 @@ export default config;
 
 Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
 
+</Step>
+
+</Steps>
+
 ## Git-Konfiguration
 
 Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:

package/blog/de/intlayer_with_react-intl.md

@@ -55,28 +55,46 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem v
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit react-intl
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli 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 @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Paketbeschreibungen:**
@@ -84,7 +102,9 @@ bun x intlayer init
 - **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Inhaltsdeklaration und Build
 - **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-intl kompatibles JSON-Format
 
-### Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON
+</Step>
+
+<Step number={2} title="Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
 
@@ -121,7 +141,9 @@ Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder
 
 Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
 
-### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
+</Step>
+
+<Step number={3} title="Implementierung von JSON-Übersetzungen pro Komponente" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Code lokalisiert sind.
 
@@ -163,6 +185,10 @@ export default config;
 
 Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
 
+</Step>
+
+</Steps>
+
 ## Git-Konfiguration
 
 Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:

package/blog/de/intlayer_with_vue-i18n.md

@@ -57,28 +57,46 @@ Diese Anleitung zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit vue-i18n
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli 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 @intlayer/sync-json-plugin --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer @intlayer/sync-json-plugin --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer @intlayer/sync-json-plugin --dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer @intlayer/sync-json-plugin --dev
-bun x intlayer init
 ```
 
 **Paket-Erklärungen:**
@@ -86,7 +104,9 @@ bun x intlayer init
 - **intlayer**: Kernbibliothek für Content-Deklaration und -Verwaltung
 - **@intlayer/sync-json-plugin**: Plugin zum Synchronisieren von Intlayer-Content-Deklarationen mit dem vue-i18n JSON-Format
 
-### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
+</Step>
+
+<Step number={2} title="Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen">
 
 Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen festzulegen:
 
@@ -125,7 +145,9 @@ Um weitere Details zum `syncJSON`-Plugin zu sehen, lesen Sie bitte die [syncJSON
 
 ---
 
-### (Optional) Schritt 3: Implementierung von komponentenbezogenen JSON-Übersetzungen
+</Step>
+
+<Step number={3} title="Implementierung von komponentenbezogenen JSON-Übersetzungen" isOptional={true}>
 
 Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Content-Deklarationsdateien. Weitere Informationen finden Sie in der [Content-Deklarationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON implementieren, das überall in Ihrem Code lokalisiert ist.
 
@@ -169,6 +191,10 @@ Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.js
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Git-Konfiguration
 
 Schließen Sie generierte Dateien von der Versionskontrolle aus:

package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md

@@ -65,14 +65,6 @@ Wir konzentrieren uns auf den **Next.js 13+ App Router** (mit **React Server Com
 
 ## Gegenüberstellung der Funktionen (Fokus auf Next.js)
 
-| Funktion | `next-intlayer` (Intlayer) | `next-intl` | `next-i18next` |
-
-> Abzeichen werden automatisch aktualisiert. Screenshots können sich im Laufe der Zeit ändern.
-
----
-
-## Gegenüberstellung der Funktionen (Fokus auf Next.js)
-
 | Funktion                                           | `next-intlayer` (Intlayer)                                                                                                                        | `next-intl`                                                                                                                           | `next-i18next`                                                                                                                        |
 | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | **Übersetzungen in der Nähe der Komponenten**      | ✅ Ja, Inhalt ist mit jeder Komponente zusammengefasst                                                                                            | ❌ Nein                                                                                                                               | ❌ Nein                                                                                                                               |
@@ -292,34 +284,6 @@ Hier ein Beispiel für die Auswirkung der Bundle-Größenoptimierung mit `intlay
 
 ---
 
-## DX, Tools & Wartung
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Wird häufig mit externen Lokalisierungsplattformen und redaktionellen Workflows kombiniert.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Wird häufig mit externen Lokalisierungsplattformen und redaktionellen Workflows kombiniert.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Bietet einen **kostenlosen Visual Editor** und ein **optionales CMS** (Git-freundlich oder externalisiert) sowie eine **VSCode-Erweiterung** und **KI-unterstützte Übersetzungen** mit Ihren eigenen Anbieter-Schlüsseln.
-
-  </Column>
-</Columns>
-
-**Warum das wichtig ist:** Senkt die Betriebskosten und verkürzt den Kommunikationszyklus zwischen Entwicklern und Inhaltserstellern.
-
 ## Integration mit Lokalisierungsplattformen (TMS)
 
 Große Organisationen verlassen sich oft auf Translation Management Systeme (TMS) wie **Crowdin**, **Phrase**, **Lokalise**, **Localizely** oder **Localazy**.
@@ -1327,6 +1291,127 @@ export default robots;
 
 ---
 
+### Middleware für Locale-Routing
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+Fügen Sie ein Middleware hinzu, um die Locale-Erkennung und das Routing zu verarbeiten:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // Dateien mit Erweiterungen ausschließen
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // Alle Pfade abgleichen, außer denen, die mit diesen beginnen, und Dateien mit einer Erweiterung
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+Fügen Sie ein Middleware hinzu, um die Locale-Erkennung und das Routing zu verarbeiten:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // API, Next-Interna und statische Assets überspringen
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayer bietet integrierte Middleware-Handhabung durch die `next-intlayer`-Paketkonfiguration.
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// wendet dieses Middleware nur auf Dateien im App-Verzeichnis an
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+Die Einrichtung des Middleware ist in der `intlayer.config.ts`-Datei zentralisiert.
+
+  </Tab>
+</Tabs>
+
+### Setup-Checkliste und bewährte Praktiken
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- Stellen Sie sicher, dass `lang` und `dir` auf dem Root-Element `<html>` in `src/app/[locale]/layout.tsx` gesetzt sind.
+- Teilen Sie Übersetzungen in Namespaces auf (zum Beispiel `common.json`, `about.json`) unter `src/locales/<locale>/`.
+- Laden Sie nur erforderliche Namespaces in Client-Komponenten mit `useTranslation('<ns>')` und scoping des `I18nProvider` mit denselben Namespaces.
+- Halten Sie Seiten wenn möglich statisch: exportieren Sie `export const dynamic = 'force-static'` auf Seiten; setzen Sie `dynamicParams = false` und implementieren Sie `generateStaticParams`.
+- Verwenden Sie synchrone Server-Komponenten, die unter Client-Grenzen verschachtelt sind, indem Sie bereits berechnete Strings oder die `t`-Funktion und das `locale` weitergeben.
+- Für SEO setzen Sie `alternates.languages` in Metadaten, listen Sie lokalisierte URLs in `sitemap.ts` auf und deaktivieren Sie doppelte lokalisierte Routen in `robots.ts`.
+- Bevorzugen Sie locale-bewusste Formatters (z. B. `Intl.NumberFormat(locale)`) und memoizieren Sie sie auf dem Client, falls Sie React < 19 verwenden.
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **HTML `lang` und `dir` setzen**: In `src/app/[locale]/layout.tsx` berechnen Sie `dir` über `getLocaleDirection(locale)` und setzen Sie `<html lang={locale} dir={dir}>`.
+- **Nachrichten nach Namespace aufteilen**: Organisieren Sie JSON pro Locale und Namespace (z. B. `common.json`, `about.json`).
+- **Client-Payload minimieren**: Auf Seiten senden Sie nur erforderliche Namespaces an `NextIntlClientProvider` (z. B. `pick(messages, ['common', 'about'])`).
+- **Statische Seiten bevorzugen**: Exportieren Sie `export const dynamic = 'force-static'` und generieren Sie statische Parameter für alle `locales`.
+- **Synchrone Server-Komponenten**: Halten Sie Server-Komponenten synchron, indem Sie bereits berechnete Strings (übersetzte Labels, formatierte Zahlen) übergeben, anstatt asynchrone Aufrufe oder nicht-serialisierbare Funktionen zu verwenden.
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **Modularer Inhalt**: Co-lokalisieren Sie Inhalts-Dictionaries mit Komponenten unter Verwendung von `.content.{ts|js|json}`-Dateien.
+- **Typsicherheit**: Nutzen Sie die TypeScript-Integration für Compile-Zeit-Inhaltsvalidation.
+- **Build-Zeit-Optimierung**: Verwenden Sie Intlayers Build-Tools für automatisches Tree-Shaking und Bundle-Optimierung.
+- **Integriertes Tooling**: Nutzen Sie eingebautes Routing, SEO-Helfer und visuelle Editor-Unterstützung.
+
+  </Tab>
+</Tabs>
+
+---
+
 ## Und der Gewinner ist…
 
 Es ist nicht einfach. Jede Option hat ihre Vor- und Nachteile. So sehe ich das: