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

Hoe het werkt

Installeer het TacoTranslate-pakket via npm:

npm install tacotranslate

Als je de module hebt geïnstalleerd, moet je een TacoTranslate-account aanmaken, een vertaalsproject en bijbehorende API-sleutels. Maak hier een account aan. Het is gratis, en vereist geen creditcard.

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard fallback locale code. In dit voorbeeld stellen we deze in op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waar je strings worden opgeslagen, zoals de URL van je 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 installeren

Initialiseer TacoTranslate in je React-toepassing door je toepassing te omhullen met de TacoTranslate context provider:

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 binnen je applicatie gebruiken om vertaalde tekst weer te geven! Bekijk zeker onze documentatie voor meer informatie en implementatiehandleidingen die specifiek zijn voor jouw setup.

import {Translate} from 'tacotranslate/react';

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

Voordelen van het gebruik van TacoTranslate

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

Begin vandaag nog!

Je React-applicatie wordt automatisch vertaald wanneer je strings toevoegt aan een Translate component. Let op dat alleen omgevingen met read/write permissies op de API-sleutel nieuwe strings kunnen aanmaken om te vertalen.

We raden aan om een gesloten en beveiligde staging-omgeving te hebben waar je je productieapplicatie kunt testen en nieuwe strings kunt toevoegen voordat je live gaat. Dit voorkomt dat iemand je geheime API-sleutel steelt en mogelijk je vertaalproject vult met ongewenste strings.

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!