React i18n ohne Übersetzungsschlüssel

Die meisten React i18n-Bibliotheken arbeiten mit Übersetzungsschlüsseln. Du ersetzst jeden Text in deiner App durch einen Schlüssel, führst eine Datei mit Übersetzungen für jede Sprache und suchst zur Laufzeit nach dem richtigen Text. Magic Translate überspringt all das: Du schreibst deinen Text in deiner eigenen Sprache und er wird übersetzt, wenn die Seite angezeigt wird.

So funktioniert i18n mit Übersetzungsschlüsseln

Bei einer schlüsselbasierten Bibliothek sieht eine einfache Schaltfläche so aus:

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

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

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

Jeder neue Text bedeutet einen neuen Schlüssel, einen Eintrag in jeder Sprachdatei und eine Übersetzung für jede Sprache. Wenn du den englischen Text änderst, sind die anderen Sprachen veraltet, bis sie wieder jemand übersetzt.

Derselbe Knopf ohne Schlüssel

Mit Magic Translate bleibt der Text da, wo er ist:

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

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

Es müssen keine Sprachdateien verwaltet werden. Wenn du den Text änderst, wird die neue Version übersetzt, wenn sie das nächste Mal angezeigt wird, und die Übersetzung wird von da an zwischengespeichert.

Erste Schritte

1. Melde dich für Magic Translate an und hol dir deinen API-Schlüssel. Das kostenlose Abo beinhaltet 5.000 Zeichen pro Monat.
2. Installiere den Client und packe deine App in MagicTranslateProvider ein, wie in der React-Anleitung gezeigt.
3. Wickle deinen Text in <T> ein. Verwende für props und Attribute den 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>
);

Wenn du auf dem Server renderst, verwende stattdessen React SSR, damit Suchmaschinen und Nutzer vollständig übersetztes HTML erhalten.

Wenn Übersetzungsschlüssel immer noch die bessere Wahl sind

Maschinelle Übersetzung ist gut, aber sie wird nicht von einer Person überprüft. Wenn jedes Wort deiner App von einem Übersetzer genehmigt werden muss, zum Beispiel für juristische oder medizinische Texte, gibt dir eine schlüsselbasierte Bibliothek mit menschlichen Übersetzungen diese Kontrolle. Viele Apps kombinieren beides: Magic Translate für den Großteil der Benutzeroberfläche und überprüfte Texte, wo es darauf ankommt.

Häufig gestellte Fragen

Ist die Übersetzung schnell genug?

Die erste Übersetzung eines Textes kann ein paar Sekunden dauern. Danach wird es zwischengespeichert und dauert 100 bis 300 ms. Mit React SSR finden Übersetzungen auf dem Server statt, sodass Benutzer nie auf sie warten.

Was kostet das?

Die Nutzung wird in übersetzten Zeichen pro Monat gezählt, und Text, der bereits übersetzt wurde, wird nicht noch einmal gezählt. Schau dir an, wie die Nutzung berechnet wird und wie die Preise sind.

Welche Sprachen werden unterstützt?

Über 70. Sieh dir die vollständige Liste der unterstützten Sprachen an.