De beste oplossing voor internationalisatie (i18n) van React-apps

Hoe het werkt

Installeer het TacoTranslate-pakket via npm:

npm install tacotranslate

Zodra je de module hebt geïnstalleerd, moet je een TacoTranslate-account, een vertaalproject en de bijbehorende API-sleutels aanmaken. Maak hier een account aan. Het is gratis en je hoeft geen creditcard op te geven.

Binnen de TacoTranslate-applicatie UI, maak een project aan en ga naar het tabblad API-sleutels. Maak één read sleutel en één read/write sleutel aan. We slaan ze op als omgevingsvariabelen. De read sleutel is wat we public noemen en de read/write sleutel is secret. Je kunt ze bijvoorbeeld toevoegen aan een .env bestand in de root van je project.

Je moet ook nog twee omgevingsvariabelen toevoegen: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard fallback-localecode. In dit voorbeeld zetten we deze op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waarin uw strings worden opgeslagen, zoals de URL van uw website. Lees hier meer over origins.

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

Zorg ervoor dat je de geheime read/write API-sleutel nooit lekt naar client-side productieomgevingen.

TacoTranslate instellen

Initialiseer TacoTranslate in je React-applicatie door je applicatie te omhullen met de TacoTranslate contextprovider:

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>
	);
}

Je kunt nu de Translate component overal in je applicatie gebruiken om vertaalde tekst weer te geven! Bekijk zeker onze documentatie voor meer informatie en voor implementatiegidsen die specifiek zijn voor jouw configuratie.

import {Translate} from 'tacotranslate/react';

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

Voordelen van het gebruik van TacoTranslate

• Tijdwinst: Automatiseert het vervelende proces van lokalisatie en het verzamelen van strings, waardoor je waardevolle tijd bespaart.
• Kosteneffectief: Vermindert de behoefte aan handmatige vertalingen en verlaagt zo je lokalisatiekosten.
• Verbeterde nauwkeurigheid: AI-gestuurde vertalingen zorgen voor contextueel nauwkeurige en hoogwaardige resultaten.
• Schaalbare oplossing: Voeg eenvoudig ondersteuning voor nieuwe talen toe naarmate je applicatie en klantenbestand groeien.

Begin vandaag nog!

Uw React-applicatie wordt automatisch vertaald wanneer u strings toevoegt aan een Translate component. Houd er rekening mee dat alleen omgevingen met read/write rechten op de API-sleutel nieuwe strings kunnen aanmaken voor vertaling.

We raden aan een gesloten en beveiligde staging-omgeving te hebben waar u uw productieapplicatie kunt testen en nieuwe strings kunt toevoegen voordat u live gaat. Dit voorkomt dat iemand uw geheime API-sleutel steelt en mogelijk uw vertaalproject opblaast door ongewenste strings toe te voegen.

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!