Najlepšie riešenie pre internacionalizáciu (i18n) v React aplikáciách

Ako to funguje

Nainštalujte balík TacoTranslate cez npm:

npm install tacotranslate

Keď máte modul nainštalovaný, budete si musieť vytvoriť účet TacoTranslate, prekladateľský projekt a prislúchajúce API kľúče. Vytvorte si účet tu. Je to zadarmo a nevyžaduje zadanie kreditnej karty.

V používateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na kartu s API kľúčmi. Vytvorte jeden read kľúč a jeden read/write kľúč. Uložíme ich ako premenné prostredia. read kľúč nazývame public, a read/write kľúč je secret. Napríklad ich môžete pridať do súboru .env v koreňovom adresári vášho projektu.

Ďalej budete potrebovať pridať dve ďalšie premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód záložnej lokality. V tomto príklade ho nastavíme na en pre angličtinu.
• TACOTRANSLATE_ORIGIN: „Adresár“, kde budú uložené vaše reťazce, napríklad URL adresa vašej webovej stránky. Prečítajte si viac o pôvodoch tu.

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

Uistite sa, že nikdy neprezradíte tajný kľúč API read/write do produkčného prostredia na strane klienta.

Nastavenie TacoTranslate

Inicializujte TacoTranslate vo svojej React aplikácii tak, že obalíte svoju aplikáciu do poskytovateľa kontextu TacoTranslate:

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

Teraz môžete použiť komponent Translate kdekoľvek vo vašej aplikácii na zobrazenie preloženého textu! Nezabudnite si pozrieť našu dokumentáciu pre viac informácií a návody na implementáciu špecifické pre vaše nastavenie.

import {Translate} from 'tacotranslate/react';

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

Výhody používania TacoTranslate

• Úspora času: Automatizuje zdĺhavý proces lokalizácie a zbierania reťazcov, čím vám šetrí cenný čas.
• Ekonomické riešenie: Znižuje potrebu manuálnych prekladov, čo znižuje vaše náklady na lokalizáciu.
• Zvýšená presnosť: Preklady poháňané AI zabezpečujú kontextovo presné a vysoko kvalitné výsledky.
• Škálovateľné riešenie: Jednoducho pridajte podporu pre nové jazyky, ako rastie vaša aplikácia a zákaznícka základňa.

Začnite ešte dnes!

Vaša React aplikácia bude automaticky preložená, keď pridáte akékoľvek reťazce do komponentu Translate. Všimnite si, že len prostredia s oprávneniami read/write na API kľúči budú môcť vytvárať nové reťazce na preklad.

Odporúčame mať uzavreté a zabezpečené staging prostredie, kde môžete testovať svoju produkčnú aplikáciu a pridávať nové reťazce pred jej spustením do prevádzky. Toto zabráni komukoľvek ukradnúť váš tajný API kľúč a potenciálne nafúknuť váš prekladový projekt pridaním nežiaducej reťazce.

Nezabudnite si pozrieť kompletné príklady na našom profile GitHub. Ak narazíte na akýkoľvek problém, neváhajte nás kontaktovať, radi vám pomôžeme.

TacoTranslate vám umožňuje automaticky lokalizovať vaše React aplikácie rýchlo do a z akéhokoľvek jazyka. Prekladajte zadarmo!