Den beste løsningen for internasjonalisering (i18n) i React-apper

Slik fungerer det

Installer TacoTranslate-pakken via npm:

npm install tacotranslate

Når du har installert modulen, må du opprette en TacoTranslate-konto, et oversettelsesprosjekt og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du legger inn et kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt og gå til fanen for API-nøkler. Opprett en read nøkkel og en read/write nøkkel. Vi lagrer dem som miljøvariabler. read nøkkelen er det vi kaller public og read/write nøkkelen er secret. For eksempel kan du legge dem til i en .env fil i roten av prosjektet ditt.

Du må også legge til to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksemplet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “mappen” hvor strengene dine vil bli lagret, for eksempel URL-en til nettstedet ditt. Les mer om opprinnelser her.

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

Sørg for at du aldri lekker den hemmelige read/write API-nøkkelen i produksjonsmiljøer på klientsiden.

Slik setter du opp TacoTranslate

Initialiser TacoTranslate i React-applikasjonen din ved å omslutte applikasjonen med TacoTranslate-kontekstleverandøren:

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 nå bruke Translate komponenten hvor som helst i applikasjonen din for å vise oversatt tekst! Sørg for å sjekke ut dokumentasjonen vår for mer informasjon og implementeringsveiledninger tilpasset oppsettet ditt.

import {Translate} from 'tacotranslate/react';

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

Fordeler ved å bruke TacoTranslate

• Tidsbesparende: Automatiserer den tidkrevende prosessen med lokalisering og innsamling av tekststrenger, og sparer deg verdifull tid.
• Kostnadseffektiv: Reduserer behovet for manuelle oversettelser og senker kostnadene ved lokalisering.
• Forbedret nøyaktighet: AI-drevne oversettelser sikrer kontekstuelt korrekte oversettelser av høy kvalitet.
• Skalerbar løsning: Legg enkelt til støtte for nye språk etter hvert som applikasjonen og kundebasen vokser.

Kom i gang i dag!

React-applikasjonen din vil bli oversatt automatisk når du legger til strenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger som kan oversettes.

Vi anbefaler å ha et lukket og sikret staging-miljø hvor du kan teste produksjonsapplikasjonen din, og legge til nye strenger før du går live. Dette vil forhindre at noen får tak i din hemmelige API-nøkkel, og potensielt gjøre oversettelsesprosjektet ditt urimelig stort ved å legge til uønskede strenger.

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!