Den beste løsningen for internasjonalisering (i18n) i React-apper
Ønsker du å utvide React-applikasjonen din til nye markeder? TacoTranslate gjør det utrolig enkelt å lokalisere React-appene dine, slik at du kan nå et globalt publikum uten bryderi.
Hvorfor velge TacoTranslate for React?
- Sømløs integrasjon: Spesialdesignet for React-applikasjoner, TacoTranslate integreres lett i din eksisterende arbeidsflyt.
- Automatisk strenginnsamling: Slutt på manuell håndtering av JSON-filer. TacoTranslate samler automatisk strenger fra kodebasen din.
- AI-drevne oversettelser: Utnytt kraften til AI for å levere kontekstuelt nøyaktige oversettelser som passer tonen i applikasjonen din.
- Umiddelbar språkstøtte: Legg til støtte for nye språk med bare ett klikk, 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 krever ikke at du legger til et kredittkort.
I TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt, og naviger til fanen for API-nøkler. Opprett en read
nøkkel, og en read/write
nøkkel. Vi vil lagre 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 reserveringskode for lokalitet. I dette eksemplet setter vi den tilen
for engelsk.TACOTRANSLATE_ORIGIN
: “mappen” hvor strengene dine lagres, for eksempel URL-en til nettstedet ditt. Les mer om origin her.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Pass på å aldri lekke den hemmelige read/write
API-nøkkelen til klient-side produksjonsmiljøer.
Sette opp TacoTranslate
Initialiser TacoTranslate i din React-applikasjon ved å pakke applikasjonen din inn i 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 vår dokumentasjon for mer informasjon og for implementeringsveiledninger som er spesifikke for din oppsett.
import {Translate} from 'tacotranslate/react';
export default async function Component() {
return (
<Translate string="Hello? This is TacoTranslate speaking." />
);
}
Fordeler med å bruke TacoTranslate
- Tidsbesparende: Automatiserer den kjedelige prosessen med lokalisering og innsamling av strenger, og sparer deg verdifull tid.
- Kostnadseffektivt: Reduserer behovet for manuelle oversettelser, og senker dine lokaliseringskostnader.
- Forbedret nøyaktighet: AI-drevne oversettelser sikrer kontekstuelt nøyaktige og høykvalitetsresultater.
- 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!
Din React-applikasjon vil bli oversatt automatisk når du legger til strenger i en Translate
komponent. Vær oppmerksom på 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ø der du kan teste produksjonsapplikasjonen din, og legge til nye strenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt blåser opp oversettelsesprosjektet ditt ved å legge til falske 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!