Magic Translate vs. i18next

i18next, mit seinen React-Bindungen react-i18next, ist die beliebteste Open-Source-i18n-Bibliothek für JavaScript. Es basiert auf Übersetzungsschlüsseln und Sprachdateien. Magic Translate übersetzt den Text in deinen Komponenten direkt, ohne Schlüssel oder Dateien. Diese Seite erklärt den Unterschied, sodass du das richtige Tool für deine App auswählen kannst.

Auf einen Blick

	Magic Translate	i18next
Wie schreibst du Text	Deine eigenen Worte, verpackt in `<T>`	Ein Schlüssel pro Text, wie `t('cart.title')`
Übersetzungen	Maschinelle Übersetzung, automatisch erstellt	Du oder deine Übersetzer schreiben sie.
Sprachdateien	Keine	Eine Datei pro Sprache und Namespace
Neue Sprachen	Ändere die Einstellung `language`	Übersetze jeden Schlüssel in die neue Sprache
Server-Rendern	React-Serverkomponenten und Next.js	Ja, mit zusätzlichen Einstellungen
Pluralformen und Formatierung	Übersetzt als Teil des Satzes	Eingebaut, mit Pluralregeln pro Sprache
Preis	Kostenloses Abo, dann monatliche Tarife je nach Nutzung	Open Source und kostenlos

Wie sich der Code unterscheidet

Mit react-i18next führst du eine Sprachdatei für jede Sprache und referenzierst die Texte nach Schlüssel:

// locales/en/translation.json
{ "cart": { "title": "Your shopping cart" } }

// Cart.tsx
import { useTranslation } from 'react-i18next';

const Cart = () => {
  const { t } = useTranslation();
  return <h2>{t('cart.title')}</h2>;
};

Bei Magic Translate bleibt der Text in der Komponente:

import { T } from '@magic-translate/react';

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

Wann wähle ich Magic Translate

Du möchtest deine App in vielen Sprachen haben, ohne Sprachdateien zu verwalten.
Du hast keine Übersetzer, oder du möchtest nicht auf sie warten, bevor du eine neue Version veröffentlichst.
Deine Texte ändern sich oft und du möchtest, dass jede Sprache auf dem neuesten Stand bleibt.
Du verwendest React Server Components oder Next.js und möchtest vollständig übersetzten HTML-Code für Suchmaschinen.

Wann wähle ich i18next

Jeder Text muss von einer Person übersetzt oder überprüft werden.
Du benötigst genaue Kontrolle über Pluralformen, Daten und Zahlen in jeder Sprache.
Du möchtest eine kostenlose Open-Source-Bibliothek ohne externen Dienst.

Wechsel von i18next zu Magic Translate

Du kannst eine Komponente nach der anderen wechseln. Ersetze t('key') durch den englischen Text aus deiner Sprachdatei, eingeschlossen in <T>, oder verwende useT hook für props und Attribute. Beide Bibliotheken können Seite an Seite laufen, während du migrierst.

Bereit, es zu versuchen? Folge der Anleitung für die ersten Schritte, um deine erste Komponente in fünf Minuten zu übersetzen.