Magic Translate vs. react-intl

react-intl fait partie de FormatJS. Il met en forme les messages, les dates et les chiffres avec la syntaxe ICU, et tu fournis les traductions pour chaque langue. Magic Translate traduit directement le texte de tes composants, donc tu n'écris ni ne mets à jour aucune traduction.

En un coup d'œil

	Magic Translate	react-intl
Comment tu écris le texte	Tes propres mots, encadrés par `<T>`	`<FormattedMessage>` avec un identifiant et un message par défaut
Traductions	Traduction automatique, créée automatiquement	Tu extrais les messages et tu les fais traduire
Fichiers de messages	Aucun	Un fichier par langue
Dates et chiffres	Utilise les API `Intl` du navigateur	Composants intégrés et syntaxe ICU
Rendu sur serveur	Composants du serveur React et Next.js	Oui, avec une configuration supplémentaire
Prix	Forfait gratuit, puis forfaits mensuels en fonction de l'utilisation	Open source et gratuit

En quoi le code diffère-t-il

Avec react-intl, chaque message possède un identifiant et les traductions se trouvent dans des fichiers séparés :

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.

Avec Magic Translate, tu n'écris le message qu'une seule fois :

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

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

Quand choisir Magic Translate

Tu veux que ton application soit disponible dans de nombreuses langues sans flux de traduction.
Tes textes changent souvent et tu veux que chaque langue soit à jour.
Tu veux de nouvelles langues sans payer ni attendre de traducteurs.

Quand choisir react-intl

Tu as besoin de la syntaxe ICU pour les pluriels complexes et le genre.
Tes traductions doivent être écrites ou révisées par des personnes.
Tu veux une bibliothèque open source gratuite, sans service externe.

Utiliser les deux

Les deux fonctionnent bien ensemble. Utilise les API react-intl ou Intl pour mettre en forme les dates, les chiffres et les devises, et Magic Translate pour traduire le texte qui les entoure.

Prête à l'essayer ? Suis le guide de démarrage pour traduire ton premier composant en cinq minutes.