TacoTranslate
/
DokumentasjonPriser
 
Artikkel
04. mai 2025

Enkel lokalisering av React-applikasjoner

Ønsker du å utvide React-applikasjonen din til nye markeder? TacoTranslate gjør det utrolig enkelt å lokalisere React-applikasjonene dine, slik at du kan nå et globalt publikum uten problemer.

Hvorfor velge TacoTranslate for React?

  • Sømløs integrasjon: Utviklet spesielt for React-applikasjoner, integreres TacoTranslate sømløst i din eksisterende arbeidsflyt.
  • Automatisk innsamling av strenger: Ikke mer manuell håndtering av JSON-filer. TacoTranslate samler automatisk strenger fra kodebasen din.
  • AI-drevne oversettelser: Utnytt kraften i AI for å gi kontekstuelt nøyaktige oversettelser som passer til tonen i applikasjonen din.
  • Umiddelbar språkstøtte: Legg til støtte for nye språk med bare ett klikk, og gjør applikasjonen din tilgjengelig globalt.

Hvordan det fungerer

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 du trenger ikke å oppgi et kredittkort.

I TacoTranslate-applikasjonens brukergrensesnitt oppretter du et prosjekt og går til fanen for API-nøkler. Opprett én read nøkkel og én 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 rotmappen til prosjektet ditt.

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

  • TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. I dette eksempelet setter vi den til en for engelsk.
  • TACOTRANSLATE_ORIGIN: Mappen hvor tekststrengene dine vil bli lagret, for eksempel URL-en til nettstedet ditt. Les mer om origins her.
.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Pass på at du aldri lekker den hemmelige read/write API-nøkkelen til produksjonsmiljøer på klientsiden.

Oppsett av 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! Husk å sjekke dokumentasjonen vår for mer informasjon, og for implementasjonsveiledninger som er spesifikke for 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 strenger, og sparer deg verdifull tid.
  • Kostnadseffektivt: Reduserer behovet for manuelle oversettelser og senker kostnadene ved lokalisering.
  • Forbedret nøyaktighet: AI-drevne oversettelser sikrer kontekstuelt nøyaktige resultater av høy kvalitet.
  • Skalerbar løsning: Legg enkelt til støtte for nye språk etter hvert som applikasjonen og kundebasen din vokser.

Kom i gang i dag!

React-applikasjonen din blir automatisk oversatt når du legger til noen strenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger som skal 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 hindre at noen noen stjeler din hemmelige API-nøkkel, og potensielt øke omfanget av oversettelsesprosjektet ditt 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!

Et produkt fra NattskiftetLaget i Norge