React i18n ohne Übersetzungsschlüssel

Die meisten React i18n-Bibliotheken arbeiten mit Übersetzungsschlüsseln. Du ersetzt jeden Text in deiner App durch einen Schlüssel, führst eine Übersetzungsdatei für jede Sprache und suchst zur Laufzeit nach dem richtigen Text. Mit Magic Translate schreibst du deinen Text in deiner eigenen Sprache und die KI übersetzt ihn, 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 benötigt einen Schlüssel und eine Übersetzung in jeder Sprachdatei. Wenn du den englischen Text änderst, sind die anderen Sprachen veraltet, bis jemand die Übersetzungen aktualisiert.

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

Die KI-Ü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 kann ein paar Sekunden dauern. Danach wird sie zwischengespeichert und dauert 100 bis 300 ms. Mit React SSR finden Übersetzungen auf dem Server statt, sodass Nutzer eine bereits übersetzte Seite erhalten.

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.