Die beste Lösung für Internationalisierung (i18n) in React-Anwendungen

Suchen Sie nach Möglichkeiten, Ihre React‑Anwendung auf neue Märkte auszuweiten? TacoTranslate macht es unglaublich einfach, Ihre React‑Apps zu lokalisieren und ermöglicht es Ihnen, ein weltweites Publikum ganz ohne Aufwand zu erreichen.

Warum TacoTranslate für React wählen?

Nahtlose Integration: Speziell für React-Anwendungen entwickelt, fügt sich TacoTranslate mühelos in Ihren bestehenden Arbeitsablauf ein.
Automatische Erfassung von Strings: Nie mehr manuelles Verwalten von JSON-Dateien. TacoTranslate sammelt automatisch Strings aus Ihrer Codebasis.
KI-gestützte Übersetzungen: Nutzen Sie die Kraft der KI, um kontextuell genaue Übersetzungen zu liefern, die dem Ton Ihrer Anwendung entsprechen.
Sofortige Sprachunterstützung: Fügen Sie mit nur einem Klick Unterstützung für neue Sprachen hinzu und machen Sie Ihre Anwendung weltweit zugänglich.

So funktioniert es

Installieren Sie das TacoTranslate-Paket über npm:

npm install tacotranslate

Sobald Sie das Modul installiert haben, müssen Sie ein TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API‑Schlüssel anlegen. Erstellen Sie hier ein Konto. Es ist kostenlos und erfordert keine Angabe einer Kreditkarte.

Erstellen Sie in der TacoTranslate-Anwendungsoberfläche ein Projekt und navigieren Sie zum Reiter "API-Schlüssel". Erstellen Sie einen read Schlüssel und einen read/write Schlüssel. Wir speichern sie als Umgebungsvariablen. Der read Schlüssel ist das, was wir public nennen, und der read/write Schlüssel ist secret. Zum Beispiel könnten Sie sie in eine .env Datei im Stammverzeichnis Ihres Projekts einfügen.

Sie müssen außerdem zwei weitere Umgebungsvariablen hinzufügen: TACOTRANSLATE_DEFAULT_LOCALE und TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: Der standardmäßige Fallback-Locale-Code. In diesem Beispiel setzen wir ihn auf en für Englisch.
TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Strings gespeichert werden, z. B. die URL Ihrer Website. Lesen Sie hier mehr über Origins.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Stellen Sie sicher, dass der geheime read/write API-Schlüssel niemals in clientseitigen Produktionsumgebungen preisgegeben wird.

TacoTranslate einrichten

Initialisieren Sie TacoTranslate in Ihrer React-Anwendung, indem Sie Ihre Anwendung in den TacoTranslate-Kontext-Provider einbetten:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Sie können jetzt die Translate Komponente überall in Ihrer Anwendung verwenden, um übersetzten Text anzuzeigen! Schauen Sie sich unbedingt unsere Dokumentation für weitere Informationen und Implementierungsanleitungen an, die speziell auf Ihre Einrichtung zugeschnitten sind.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Vorteile von TacoTranslate

Zeitersparnis: Automatisiert den mühsamen Prozess der Lokalisierung und das Sammeln von Strings und spart Ihnen wertvolle Zeit.
Kosteneffizient: Verringert den Bedarf an manuellen Übersetzungen und senkt so Ihre Lokalisierungskosten.
Verbesserte Genauigkeit: KI-gestützte Übersetzungen sorgen für kontextuell genaue und hochwertige Ergebnisse.
Skalierbare Lösung: Fügen Sie mühelos Unterstützung für neue Sprachen hinzu, während Ihre Anwendung und Ihre Kundenbasis wachsen.

Jetzt loslegen!

Ihre React-Anwendung wird automatisch übersetzt, wenn Sie beliebige Strings zu einer Translate Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write Berechtigungen für den API-Schlüssel neue zu übersetzende Strings erstellen können.

Wir empfehlen, eine geschlossene und gesicherte Staging-Umgebung zu haben, in der Sie Ihre Produktionsanwendung testen und neue Strings hinzufügen können, bevor Sie live gehen. Dies verhindert, dass jemand Ihren geheimen API-Schlüssel stiehlt und damit möglicherweise Ihr Übersetzungsprojekt durch das Hinzufügen unerwünschter Strings aufbläht.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!