React i18n sans clés de traduction

La plupart des bibliothèques React i18n fonctionnent avec des clés de traduction. Tu remplaces chaque texte de ton application par une clé, tu conserves un fichier de traductions pour chaque langue et tu recherches le bon texte au moment de l'exécution. Magic Translate ignore tout cela : tu écris ton texte dans ta propre langue, et il est traduit lorsque la page est affichée.

Comment fonctionne i18n avec clés de traduction

Dans une bibliothèque basée sur des clés, un simple bouton ressemble à ceci :

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

Chaque nouveau texte signifie une nouvelle clé, une entrée dans chaque fichier linguistique et une traduction pour chaque langue. Quand tu modifies le texte anglais, les autres langues ne sont plus à jour jusqu'à ce que quelqu'un les traduise à nouveau.

Le même bouton sans clé

Avec Magic Translate, le texte reste là où il est :

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

<button>
  <T>Continue to payment</T>
</button>

Il n'y a aucun fichier de langue à gérer. Quand tu modifies le texte, la nouvelle version est traduite la prochaine fois qu'elle est affichée, et la traduction est ensuite mise en cache.

Commencer

1. Inscris-toi à Magic Translate et obtiens ta clé API. Le forfait gratuit inclut 5 000 caractères par mois.
2. Installe le client et intègre ton application dans le MagicTranslateProvider, comme indiqué dans le guide React.
3. Enveloppe ton texte avec <T>. Pour props et ses attributs, utilise le useT hook.

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

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

Si tu fais le rendu sur le serveur, utilise plutôt React SSR, afin que les moteurs de recherche et les utilisateurs obtiennent du HTML entièrement traduit.

Quand les clés de traduction restent le meilleur choix

La traduction automatique, c'est bien, mais personne ne la revoit. Si chaque mot de ton application doit être approuvé par un traducteur, par exemple pour des textes juridiques ou médicaux, une bibliothèque basée sur des clés avec des traductions humaines te donne ce contrôle. De nombreuses applis combinent les deux : Magic Translate pour la majeure partie de l'interface, et des textes révisés là où c'est important.

Questions fréquemment posées

La traduction est-elle assez rapide ?

La première traduction d'un texte peut prendre quelques secondes. Ensuite, il est mis en cache et prend de 100 à 300 ms. Avec React SSR, les traductions sont effectuées sur le serveur, donc les utilisateurs ne les attendent jamais.

Combien ça coûte ?

L'utilisation est comptabilisée en caractères traduits par mois, et le texte déjà traduit n'est pas comptabilisé à nouveau. Voir comment la consommation est calculée et quels sont les tarifs.

Quelles langues sont prises en charge ?

Plus de 70 ans. Voir la liste complète des langues prises en charge.