Den bedste løsning til internationalisering (i18n) i React-apps

Sådan fungerer det

Installer TacoTranslate-pakken via npm:

npm install tacotranslate

Når du har installeret modulet, skal du oprette en TacoTranslate-konto, et oversættelsesprojekt og tilhørende API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.

I TacoTranslate-applikationens brugergrænseflade opretter du et projekt og går til fanen API-nøgler. Opret en read nøgle og en read/write nøgle. Vi gemmer dem som miljøvariabler. Den read nøgle er det, vi kalder public, og read/write nøglen er secret. For eksempel kan du tilføje dem til en .env fil i roden af dit projekt.

Du skal også tilføje to yderligere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. I dette eksempel sætter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den “mappe”, hvor dine strenge gemmes, f.eks. URL'en til dit websted. Læs mere om origins her.

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

Sørg altid for ikke at lække den hemmelige read/write API-nøgle til klient-side produktionsmiljøer.

Opsætning af TacoTranslate

Initialiser TacoTranslate i din React-applikation ved at omslutte din applikation med TacoTranslate-kontekstprovideren:

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

Du kan nu bruge Translate komponenten overalt i din applikation for at vise oversat tekst! Sørg for at tjekke vores dokumentation for mere information og for implementeringsvejledninger, der er specifikke for din opsætning.

import {Translate} from 'tacotranslate/react';

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

Fordele ved at bruge TacoTranslate

• Tidsbesparende: Automatiserer den tidskrævende proces med lokalisering og indsamling af tekststrenge, så du sparer værdifuld tid.
• Omkostningseffektivt: Reducerer behovet for manuelle oversættelser og sænker dine omkostninger til lokalisering.
• Forbedret nøjagtighed: AI-drevne oversættelser sikrer kontekstuelt korrekte oversættelser af høj kvalitet.
• Skalerbar løsning: Tilføj nemt understøttelse af nye sprog, efterhånden som din applikation og kundebase vokser.

Kom i gang i dag!

Din React-applikation vil blive oversat automatisk, når du tilføjer tekststrenge til en Translate komponent. Bemærk, at kun miljøer med read/write tilladelser på API-nøglen vil kunne oprette nye tekststrenge til oversættelse.

Vi anbefaler, at du har et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation og tilføje nye tekststrenge, inden den går live. Dette vil forhindre, at nogen stjæler din hemmelige API-nøgle og potentielt oppuster dit oversættelsesprojekt ved at tilføje uautoriserede tekststrenge.

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!