A legjobb megoldás a React-alkalmazások nemzetközivé tételéhez (i18n)

Hogyan működik

Telepítse a TacoTranslate csomagot az npm segítségével:

npm install tacotranslate

Miután telepítetted a modult, létre kell hoznod egy TacoTranslate-fiókot, egy fordítási projektet és a hozzájuk tartozó API-kulcsokat. Hozd létre fiókodat itt. Ingyenes, és nem kell hozzá bankkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd lépj az API-kulcsok fülre. Hozz létre egy read kulcsot és egy read/write kulcsot. Ezeket környezeti változókként fogjuk elmenteni. A read kulcs a public, míg a read/write kulcs a secret. Például hozzáadhatod őket a projekt gyökerében lévő .env fájlhoz.

Hozzá kell adnod még két környezeti változót: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett visszaesési (fallback) nyelvi kód. Ebben a példában az angolhoz en-re állítjuk.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahová a sztringjeid lesznek tárolva, például a webhelyed URL-je. További információ az originokról itt.

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

Győződj meg róla, hogy soha ne szivárogtasd ki a titkos read/write API-kulcsot a kliensoldali éles környezetekbe.

TacoTranslate beállítása

Inicializáld a TacoTranslate-et a React-alkalmazásodban úgy, hogy az alkalmazást a TacoTranslate kontextus-szolgáltató (context provider) komponensébe ágyazod:

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

Mostantól az alkalmazásod bármely részén használhatod a Translate komponenst, hogy lefordított szöveget jeleníts meg! Feltétlenül nézd meg dokumentációnkat további információkért és az adott beállításodhoz illeszkedő megvalósítási útmutatókért.

import {Translate} from 'tacotranslate/react';

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

A TacoTranslate használatának előnyei

• Időmegtakarítás: Automatizálja a lokalizálás és a szövegek gyűjtésének időigényes, monoton folyamatát, így értékes időt takarít meg.
• Költséghatékony: Csökkenti a kézi fordítások szükségességét, így mérsékli a lokalizációs költségeket.
• Javított pontosság: Az MI-vezérelt fordítások a kontextusnak megfelelő, magas minőségű eredményeket biztosítanak.
• Skálázható megoldás: Új nyelveket könnyen hozzáadhat, ahogy az alkalmazása és ügyfélköre növekszik.

Kezdje el még ma!

A React-alkalmazásodat automatikusan lefordítjuk, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek tudnak új, lefordítandó szövegeket létrehozni, amelyeknél az API-kulcson read/write jogosultság van.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, és új szövegeket adhatsz hozzá élesítés előtt. Ez megakadályozza, hogy bárki bárki ellopja a titkos API-kulcsodat, és potenciálisan felfújja a fordítási projektedet nem kívánt szövegek hozzáadásával.

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!