---
createdAt: 2026-06-14
updatedAt: 2026-06-14
title: Neues Intlayer v9 – Was ist neu?
description: Entdecken Sie die Neuerungen in Intlayer v9. Einführung von Drop-in-Kompatibilitätspaketen für beliebte i18n-Bibliotheken und Unterstützung für Collections, Variants und Dynamic Records.
keywords:
  - Intlayer
  - Compatibility
  - Migration
  - Collections
  - Variants
  - Dynamic Records
  - i18next
  - next-intl
  - vue-i18n
slugs:
  - doc
  - releases
  - v9
author: aymericzip
---

# Neues Intlayer v9 – Was ist neu?

Willkommen bei Intlayer v9! Dieses Major Release markiert einen riesigen Meilenstein bei der Vereinfachung des Migrationspfads zu Intlayer mit **Compat Adapter Packages** für wichtige i18n-Bibliotheken (`react-i18next`, `next-intl`, `vue-i18n`, etc.) und fügt Unterstützung für reichhaltige Inhaltsstrukturen hinzu: **Collections**, **Variants** und **Dynamic Records**.

## Inhaltsverzeichnis

<TOC levels={[2]} maxDepth={1} />

---

## Compat Adapter Packages

Die Migration von beliebten i18n-Bibliotheken zu Intlayer ist jetzt einfacher denn je. Wir haben fünf Kompatibilitätspakete erstellt, die die **exakt gleichen öffentlichen APIs** wie Standard-i18n-Bibliotheken bereitstellen, aber die gesamte Übersetzungsarbeit zur Laufzeit an Intlayer delegieren.

### Gleiche öffentliche API mit strenger Typisierung

Durch das Ersetzen von Imports erhalten Sie alle Vorteile von Intlayer (einschließlich Compile-Time-Typsicherheit gegenüber Ihren tatsächlichen Dictionaries) mit minimalen Codeänderungen:

- `@intlayer/i18next`
- `@intlayer/react-i18next`
- `@intlayer/next-intl`
- `@intlayer/next-i18next`
- `@intlayer/vue-i18n`

Ändern Sie zum Beispiel einfach:

```ts
import { useTranslation } from "react-i18next";
```

zu:

```ts
import { useTranslation } from "@intlayer/react-i18next";
```

Ihre Keys werden nun **streng typisiert** gegenüber Ihren Intlayer-Dictionaries, was eine vollständige Dot-Path-Auto-Vervollständigung in Ihrer IDE bietet!

### Bundler Alias Plugins (Vite, Next.js, Turbopack)

Um die Migration ohne manuelles Umschreiben aller Import-Statements zu ermöglichen, enthält jedes Compat Adapter Package ein **benutzerdefiniertes Bundler-Plugin** (Vite oder Next.js) unter dem Subpfad `/plugin`.

Diese Plugins schreiben bestehende Imports (z.B. `react-i18next` oder `next-intl`) zur Build-Zeit automatisch in ihre `@intlayer/*`-Äquivalente um.

#### Next.js (Webpack / Turbopack) Beispiel

Anstelle von `withIntlayer` umschließen Sie Ihre Next.js-Konfiguration mit dem Kompatibilitäts-Plugin:

```ts fileName="next.config.ts"
import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
import type { NextConfig } from "next";

const withIntlayer = createNextI18nPlugin();
const nextConfig: NextConfig = {};

export default withIntlayer(nextConfig);
```

#### Vite (React, Vue, Solid, Svelte) Beispiel

```ts fileName="vite.config.ts"
import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";

export default defineConfig({
  plugins: [vueI18nVitePlugin()],
});
```

---

## Mutualized Runtime Resolver

Alle Kompatibilitätsadapter leiten die Übersetzungsauflösung nun über einen einzigen, hochoptimierten Runtime-Parser: `@intlayer/core/messageFormat`.

- **Interpolate Message**: Löst Standard `{{var}}` (Leerzeichen & Dot-Pfade), ICU-formatierte Argumente (`{v, number, percent}` etc.) und einfache `{var}`-Templates auf.
- **Message Node Resolver**: Löst verschachtelte Nodes auf: `insert()`, `plural()` (CLDR-Pluralregeln), `enu()` (Aufzählung), `gender()`, HTML-Tags, Arrays und aufrufbare Funktions-Nodes.
- **Tokenized Tag Parser**: Unterstützt Inline-XML/HTML-Tags und nummerierte Tags (z.B. `<1>children</1>`), um Rich-Text-Rendering out-of-the-box zu ermöglichen.

---

## Feature Spec: Collections, Variants & Dynamic Records

Intlayer v9 geht über statische Schlüssel-Wert-Objekte hinaus und ermöglicht es Dictionaries, dynamische Layout-Strukturen zu deklarieren, die End-to-End vollständig typisiert sind.

### 1. Collections

Definieren Sie eine CMS-verwaltete Liste geordneter Elemente (z.B. FAQs, Produkte oder Bloglisten):

```ts fileName="faq.content.ts"
import { t, type Dictionary } from "intlayer";

export default {
  key: "faq",
  content: [
    {
      question: t({
        de: "Was ist Intlayer?",
        en: "What is Intlayer?",
        fr: "Qu'est-ce qu'Intlayer ?",
      }),
      answer: t({
        de: "Ein i18n-Toolkit.",
        en: "An i18n toolkit.",
        fr: "Une boîte à outils i18n.",
      }),
    },
  ],
} satisfies Dictionary;
```

#### Verwendung:

```ts
// Alle Elemente abrufen
const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]

// Einzelnes Element nach Index abrufen
const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
```

### 2. Variants

Liefern Sie A/B-Tests, saisonale Header, Feature Flags oder benutzerdefinierte Landing Pages:

```ts fileName="hero.content.ts"
import { t, type Dictionary } from "intlayer";

export default {
  key: "hero-banner",
  variant: "default",
  content: {
    control: t({ de: "Willkommen", en: "Welcome", fr: "Bienvenue" }),
    black_friday: t({
      de: "Jetzt einkaufen",
      en: "Shop now",
      fr: "Acheter maintenant",
    }),
  },
} satisfies Dictionary;
```

#### Verwendung:

```ts
const banner = useIntlayer("hero-banner", { variant: "black_friday" });
```

### 3. Dynamic Records

Definieren Sie Dictionaries, deren Einträge zur Laufzeit dynamisch über Query-IDs geladen werden:

```ts fileName="product.content.ts"
import { t, type Dictionary } from "intlayer";

export default {
  key: "product-copy",
  meta: {
    id: "prod_123",
    category: "books",
  },
  content: {
    title: t({ de: "Clean Code", en: "Clean Code", fr: "Code Propre" }),
  },
} satisfies Dictionary;
```

#### Verwendung:

```ts
// Ruft nur das angeforderte Element dynamisch ab (erfordert Suspense)
const product = useIntlayer("product-copy", {
  id: "prod_123",
  category: "books",
});
```

---

## Dynamisches Laden & Optimierungen der Bundle-Größe

Um Bundles extrem klein zu halten, unterstützt Intlayer v9 dynamisches Lazy Loading.

Stellen Sie in Ihrer Konfiguration `importMode` auf `'dynamic'` oder `'fetch'` ein:

```ts fileName="intlayer.config.ts"
export default {
  dictionary: {
    importMode: "dynamic", // "static" | "dynamic" | "fetch"
  },
};
```

Zur Build-Zeit scannen `@intlayer/swc` und `@intlayer/babel` Ihre Dateien und ersetzen `useIntlayer` / `getIntlayer`-Aufrufe durch tree-shakeable Wrapper (`useDictionary` / `useDictionaryDynamic`). Nur der für das ausgewählte Collection-Element, die Variante oder das Locale erforderliche Inhalt wird geladen, wodurch verhindert wird, dass Ihr Produktions-Bundle ungenutzte Übersetzungen enthält.

---

## Migrationshinweise von v8

Wenn Sie von v8 upgraden, beachten Sie, dass v9 keine Breaking Changes enthält. Hier sind jedoch die wichtigsten Änderungen:

- **Locales & Dialects**: Wenn Sie externe i18n-Abhängigkeiten verwenden, fügen Sie deren entsprechende Kompatibilitätsadapter-Plugins in Ihrer Konfiguration oder Ihrem Bundler-Setup hinzu, um Imports automatisch umzuschreiben.
- **Custom Selectors**: Beim Aufruf von `useIntlayer` ist der zweite Parameter nun für ein Options-Objekt reserviert, das `{ locale, item, variant, id }` enthält. Wenn Sie zuvor direkt einen Locale-String übergeben haben, können Sie dies weiterhin tun, aber die Verwendung des Options-Objekts wird für erweiterte Auswahlen empfohlen.

---

## Nützliche Links

- [Leitfaden für Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/index.md)
- [Dynamische Dictionaries – Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/index.md)
- [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)