---
title: MDX
subtitle: KI-Übersetzung für MDX-Dateien mit Lingo.dev CLI
---

## Was ist MDX?

MDX ist ein Format, das Markdown mit JSX kombiniert und es ermöglicht, React-Komponenten direkt in Ihren Markdown-Inhalten zu verwenden. Es wird häufig für Dokumentationswebsites und inhaltsreiche Webanwendungen eingesetzt.

Zum Beispiel:

```mdx

---

title: "Restaurant-Bewertung: Bella Vista"
description: "Unser Essenserlebnis im neuen italienischen Restaurant in der Innenstadt"
author: "not-localized-author"

---

# Abendessen bei Bella Vista

Wir haben endlich das neue italienische Restaurant ausprobiert, das letzten Monat in der Hauptstraße eröffnet wurde.

## Die Atmosphäre

Das Restaurant hat eine warme, einladende Atmosphäre mit:

- **Gedämpftem Licht**, das eine intime Umgebung schafft
- *Sanfter Jazzmusik*, die im Hintergrund spielt
```

## Was ist Lingo.dev CLI?

**Lingo.dev CLI** ist eine kostenlose, quelloffene CLI zur Übersetzung von Apps und Inhalten mit KI. Sie wurde entwickelt, um herkömmliche Translation-Management-Software zu ersetzen und sich gleichzeitig in bestehende Pipelines zu integrieren.

Um mehr zu erfahren, siehe [Überblick](/cli).

## Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man MDX-Dateien mit **Lingo.dev CLI** übersetzt.

Sie werden lernen, wie man:

- Ein Projekt von Grund auf erstellt
- Eine Übersetzungspipeline konfiguriert
- Übersetzungen mit KI generiert

## Voraussetzungen

Um **Lingo.dev CLI** zu verwenden, stellen Sie sicher, dass Node.js v18+ installiert ist:

```bash
❯ node -v
v22.17.0
```

## Schritt 1. Projekt einrichten

Erstellen Sie in Ihrem Projektverzeichnis eine `i18n.json`-Datei:

```json
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}
```

Diese Datei definiert das Verhalten der Übersetzungspipeline, einschließlich der Sprachen, zwischen denen übersetzt werden soll, und wo die lokalisierbaren Inhalte im Dateisystem existieren.

Um mehr über die verfügbaren Eigenschaften zu erfahren, siehe [i18n.json](/cli/i18n-json-configuration).

## Schritt 2. Konfigurieren der Quellsprache

Die _Quellsprache_ ist die ursprüngliche Sprache und Region, in der Ihr Inhalt verfasst wurde. Um die Quellsprache zu konfigurieren, setzen Sie die `locale.source` Eigenschaft in der `i18n.json` Datei:

```json
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}
```

Die Quellsprache muss als [BCP 47 Sprachkennzeichen](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag) angegeben werden.

Für die vollständige Liste der Sprachcodes, die **Lingo.dev CLI** unterstützt, siehe [Unterstützte Sprachcodes](/cli/supported-locales).

## Schritt 3. Konfigurieren der Zielsprachen

Die _Zielsprachen_ sind die Sprachen und Regionen, in die Sie Ihre Inhalte übersetzen möchten. Um die Zielsprachen zu konfigurieren, setzen Sie die `locale.targets` Eigenschaft in der `i18n.json` Datei:

```json
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}
```

## Schritt 4. Erstellen des Quellinhalts

Falls Sie es noch nicht getan haben, erstellen Sie eine oder mehrere MDX-Dateien, die den zu übersetzenden Inhalt enthalten. Diese Dateien müssen sich in einem Pfad befinden, der irgendwo die Quellsprache enthält (z.B. als Verzeichnisname wie `en/` oder als Teil des Dateinamens wie `messages.en.mdx`).

## Schritt 5. Erstellen eines Buckets

1. Fügen Sie in der `i18n.json` Datei ein `"mdx"` Objekt zum `buckets` Objekt hinzu:

    ```json
    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "mdx": {}
      }
    }
    ```

2. Definieren Sie im `"mdx"` Objekt ein Array mit einem oder mehreren `include` Mustern:

    ```json
    {
      "$schema": "https://lingo.dev/schema/i18n.json",
      "version": "1.10",
      "locale": {
        "source": "en",
        "targets": ["es"]
      },
      "buckets": {
        "mdx": {
          "include": ["./[locale]/example.mdx"]
        }
      }
    }
    ```

   Diese Muster definieren, welche Dateien übersetzt werden sollen.

   Die Muster selbst:

   - müssen `[locale]` als Platzhalter für die konfigurierte Sprache enthalten
   - können auf Dateipfade verweisen (z.B. `"[locale]/blog.mdx"`)
   - können Sternchen als Platzhalter verwenden (z.B. `"[locale]/*.mdx"`)

   Rekursive Glob-Muster (z.B. `**/*.mdx`) werden nicht unterstützt.

## Schritt 6. Konfigurieren eines LLM

**Lingo.dev CLI** verwendet große Sprachmodelle (LLMs), um Inhalte mit KI zu übersetzen. Um eines dieser Modelle zu nutzen, benötigen Sie einen API-Schlüssel von einem unterstützten Anbieter.

Um so schnell wie möglich loszulegen, empfehlen wir die Verwendung von **Lingo.dev Engine** — unserer eigenen, gehosteten Plattform, die 10.000 Token kostenlose monatliche Nutzung bietet:

1. [Registrieren Sie sich für ein Lingo.dev-Konto](/auth).
2. Führen Sie den folgenden Befehl aus:

   ```bash
   npx lingo.dev@latest login
   ```

   Dies öffnet Ihren Standard-Browser und fordert Sie zur Authentifizierung auf.

3. Folgen Sie den Anweisungen.

## Schritt 7. Generieren der Übersetzungen

Führen Sie im Verzeichnis, das die Datei `i18n.json` enthält, den folgenden Befehl aus:

```bash
npx lingo.dev@latest run
```

Dieser Befehl:

1. Liest die `i18n.json`-Datei.
2. Findet die Dateien, die übersetzt werden müssen.
3. Extrahiert den übersetzbaren Inhalt aus den Dateien.
4. Verwendet das konfigurierte LLM, um den extrahierten Inhalt zu übersetzen.
5. Schreibt den übersetzten Inhalt zurück in das Dateisystem.

Bei der ersten Generierung von Übersetzungen wird eine `i18n.lock`-Datei erstellt. Diese Datei verfolgt, welche Inhalte übersetzt wurden, und verhindert unnötige Neuübersetzungen bei nachfolgenden Durchläufen.

## Beispiel

### en/example.mdx

```mdx

---

title: "Restaurantbewertung: Bella Vista"
description: "Unsere Essenserfahrung im neuen italienischen Restaurant in der Innenstadt"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"
ignored_key_1: "This field should not appear in target locales"

---

# Abendessen bei Bella Vista

Wir haben endlich das neue italienische Restaurant ausprobiert, das letzten Monat in der Hauptstraße eröffnet wurde. Hier ist unsere ehrliche Bewertung.

## Die Atmosphäre

Das Restaurant hat eine warme, einladende Atmosphäre mit:

- **Gedämpfter Beleuchtung**, die eine intime Umgebung schafft
- *Sanfter Jazzmusik* im Hintergrund
- Frischen Blumen auf jedem Tisch
```

### es/example.mdx

```mdx

---

title: "Reseña de Restaurante: Bella Vista"
description: "Nuestra experiencia gastronómica en el nuevo restaurante italiano del centro"
author: "not-localized-author"
published: "2024-03-15"
rating: 4.5
locked_key_1: "This value should remain unchanged in all locales"

---

# Cena en Bella Vista

Finalmente probamos el nuevo restaurante italiano que abrió el mes pasado en Main Street. Esta es nuestra reseña honesta.

## El Ambiente

El restaurante tiene un ambiente cálido y acogedor con:

- **Iluminación tenue** que crea un ambiente íntimo
- *Música de jazz suave* sonando de fondo
- Flores frescas en cada mesa
```

### i18n.json

```json
{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {
      "include": ["./[locale]/example.mdx"],
      "lockedKeys": ["locked_key_1"],
      "lockedPatterns": ["pattern_1"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}
```

### i18n.lock

```yml
version: 1
checksums:
  0d5b5aa6d2b9937d47fd63868ef9e9f6:
    meta/title: a4bdd0dee24f8318f3300dcae130a353
    meta/description: 609213841f122e494f62262618ee4761
    meta/author: f3f7164b5963b4da6cd31a2ec0251630
    content/0: 8a8520492d23503da5691602e60bd22a
    content/1: 1fc859854cda505b2a94a04c8b09ab43
    content/2: 8add667f2a1d5d791a64b50bde54fa59
    content/3: e6e34c4c92eda512ec209266abe8e074
    content/4: 07f1896ad050b9606d7674f70d847818
    content/5: bd4d40a4f0cc92ac8a880c8d9ce8b43d
    content/6: 3036a07a887121ea080427d84fc80912
    content/7: f555318416c5c5388c1d961ef02f5955
    content/8: 90e02688ab103de60e42c70ece7efc4d
    content/9: 8c5be3cd002a3a194c991821e0182e08
    content/10: 3495801a7461ac5ea8d78369873a5409
    content/11: d444739ce3d48afb7976067c67149a9e
    content/12: 5f02c0a3b6385f80bdd08cf7e2d8c04d
    content/13: 0a15fd446b87d907f58c303aece0882b
    content/14: 778ed0aa1f81768280a23afe559c55f7
    content/15: fa244af2d8e558d6c3644ff8c1a64562
    content/16: 14f593e7cf3b3df84a21e17db318912e
    content/17: 5f42d26a42aa29be063019eea27ad07c
    content/18: 48bb7e89e72d68d6de12f5cdac64fc18
    content/19: 1639b9ef57bf363e04293e27d1c13952
    content/20: bb1c8d22064f7af4879c69d444e6e769
    content/21: 52f9d6beaa85591f77811e1162d756c4
```
