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

Leder du efter at udvide din React-applikation til nye markeder? TacoTranslate gør det utroligt nemt at lokalisere dine React-apps, så du kan nå et globalt publikum uden besvær.

Hvorfor vælge TacoTranslate til React?

Problemfri integration: Designet specifikt til React-applikationer, integrerer TacoTranslate ubesværet i din eksisterende arbejdsproces.
Automatisk strengindsamling: Ikke mere manuel håndtering af JSON-filer. TacoTranslate indsamler automatisk strenge fra din kodebase.
AI-drevne oversættelser: Udnyt kraften i AI til at levere kontekstuelt præcise oversættelser, der passer til tonen i din applikation.
Øjeblikkelig sprogunderstøttelse: Tilføj support for nye sprog med blot et klik, så din applikation bliver globalt tilgængelig.

Hvordan det virker

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 du behøver ikke at tilføje et kreditkort.

Inden for TacoTranslate-applikationens brugerflade skal du oprette et projekt og navigere til fanen for API-nøgler. Opret en read nøgle og en read/write nøgle. Vi vil gemme dem som miljøvariabler. read nøglen er det, vi kalder public og read/write nøglen er secret. For eksempel kan du tilføje dem til en .env fil i rodmappen af dit projekt.

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

TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-sprogkode. I dette eksempel sætter vi den til en for engelsk.
TACOTRANSLATE_ORIGIN: Den "mappe", hvor dine strenge vil blive gemt, såsom URL'en på dit website. Læs mere om origins her.

.env

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

Vær sikker på aldrig 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 indpakke din applikation i 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>
	);
}

Du kan nu bruge Translate komponenten hvor som helst i din applikation for at vise oversat tekst! Sørg for at tjekke vores dokumentation for mere information og for implementationsvejledninger, 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 kedelige proces med lokalisering og indsamling af strenge, hvilket sparer dig værdifuld tid.
Omkostningseffektiv: Mindsker behovet for manuelle oversættelser og reducerer dine lokaliseringsomkostninger.
Forbedret nøjagtighed: AI-drevne oversættelser sikrer kontekstuelt nøjagtige og højtkvalitative resultater.
Skalerbar løsning: Tilføj nemt understøttelse af nye sprog, efterhånden som din applikation og kundegruppe vokser.

Kom i gang i dag!

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

Vi anbefaler at have et lukket og sikret staging-miljø, hvor du kan teste din produktionsapplikation og tilføje nye strenge, før du 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 strenge.

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!