Magic Translate vs. react-intl

react-intl ist Teil von FormatJS. Es formatiert Nachrichten, Daten und Zahlen mit der Nachrichtensyntax ICU, und du lieferst die Übersetzungen für jede Sprache. Magic Translate übersetzt den Text in deinen Komponenten direkt, sodass du keine Übersetzungen schreibst oder verwaltest.

Auf einen Blick

	Magic Translate	react-intl
Wie schreibst du Text	Deine eigenen Worte, verpackt in `<T>`	`<FormattedMessage>` mit einer ID und einer Standardnachricht
Übersetzungen	KI-Übersetzung, automatisch erstellt	Du extrahierst Nachrichten und lässt sie übersetzen.
Nachrichtendateien	Keine	Eine Datei pro Sprache
Daten und Zahlen	Verwende die `Intl`-APIs des Browsers	Eingebaute Komponenten und ICU-Syntax
Server-Rendern	React-Serverkomponenten und Next.js	Ja, mit zusätzlichen Einstellungen
Preis	Kostenloses Abo, dann monatliche Tarife je nach Nutzung	Open Source und kostenlos

Wie sich der Code unterscheidet

Mit react-intl hat jede Nachricht eine ID und die Übersetzungen befinden sich in separaten Dateien:

import { FormattedMessage } from 'react-intl';

const Welcome = () => (
  <FormattedMessage id="home.welcome" defaultMessage="Welcome back!" />
);

// Then extract the messages, translate them for every language
// and load the right file when the app starts.

Mit Magic Translate schreibst du die Nachricht einmal:

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

const Welcome = () => <T>Welcome back!</T>;

Wann wähle ich Magic Translate

Du willst deine App in vielen Sprachen ohne Übersetzungs-Workflow.
Dein Text ändert sich oft und du möchtest, dass jede Sprache auf dem neuesten Stand bleibt.
Du möchtest Sprachen hinzufügen, ohne auf manuelle Übersetzungen zu warten oder dafür zu bezahlen.

Wann wähle ich react-intl

Du benötigst die Nachrichtensyntax ICU für komplexe Pluralformen und Geschlecht.
Deine Übersetzungen müssen von Leuten geschrieben oder überprüft werden.
Du möchtest eine kostenlose Open-Source-Bibliothek ohne externen Dienst.

Benutze beide

Die beiden passen gut zusammen. Verwende react-intl oder die Intl APIs, um Daten, Zahlen und Währungen zu formatieren, und Magic Translate, um den Text um sie herum zu übersetzen.

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