Nejlepší řešení pro internacionalizaci (i18n) v aplikacích React

Jak to funguje

Nainstalujte balíček TacoTranslate pomocí npm:

npm install tacotranslate

Jakmile máte modul nainstalovaný, budete muset vytvořit účet TacoTranslate, překladový projekt a související API klíče. Založte si účet zde. Je to zdarma a nevyžaduje zadání platební karty.

V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na záložku API klíčů. Vytvořte jeden read klíč a jeden read/write klíč. Uložíme je jako proměnné prostředí. read klíč je to, čemu říkáme public, a read/write klíč je secret. Například je můžete přidat do souboru .env v kořenovém adresáři vašeho projektu.

Budete také muset přidat další dvě proměnné prostředí: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód záložního jazyka. V tomto příkladu jej nastavíme na en pro angličtinu.
• TACOTRANSLATE_ORIGIN: „složka“, kde budou vaše řetězce uloženy, například URL vaší webové stránky. Přečtěte si více o originách zde.

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

Ujistěte se, že tajný API klíč read/write nikdy neunikne do produkčního prostředí na straně klienta.

Nastavení TacoTranslate

Inicializujte TacoTranslate ve své React aplikaci tak, že aplikaci obalíte poskytovatelem 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>
	);
}

Nyní můžete komponentu Translate použít kdekoli ve své aplikaci k zobrazení přeloženého textu! Nezapomeňte se podívat na naši dokumentaci, kde najdete více informací a návody k implementaci přizpůsobené vašemu nastavení.

import {Translate} from 'tacotranslate/react';

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

Výhody používání TacoTranslate

• Úspora času: Automatizuje únavný proces lokalizace a sběru řetězců, čímž vám šetří cenný čas.
• Nákladově efektivní: Snižuje potřebu ručních překladů a tím i náklady na lokalizaci.
• Vyšší přesnost: Překlady poháněné umělou inteligencí zajišťují kontextově přesné a vysoce kvalitní výsledky.
• Škálovatelné řešení: Snadno přidáte podporu nových jazyků, jak vaše aplikace a zákaznická základna rostou.

Začněte ještě dnes!

Vaše React aplikace bude automaticky přeložena, když přidáte jakékoli řetězce do komponenty Translate. Všimněte si, že pouze prostředí s oprávněními read/write u API klíče budou moci vytvářet nové řetězce k překladu.

Doporučujeme mít uzavřené a zabezpečené stagingové prostředí, kde můžete otestovat svou produkční aplikaci a přidávat nové řetězce před jejím nasazením. Tím zabráníte komukoli komukoli ukrást váš tajný API klíč a případně i zbytečně nafouknout váš překladový projekt přidáváním neautorizovaných řetězců.

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!