Najlepsze rozwiązanie do internacjonalizacji (i18n) w aplikacjach React

Jak to działa

Zainstaluj pakiet TacoTranslate za pomocą npm:

npm install tacotranslate

Po zainstalowaniu modułu musisz utworzyć konto TacoTranslate, projekt tłumaczeniowy oraz powiązane klucze API. Utwórz konto tutaj. To bezpłatne i nie wymaga podawania danych karty kredytowej.

W interfejsie aplikacji TacoTranslate utwórz projekt i przejdź do zakładki kluczy API. Utwórz jeden klucz read i jeden klucz read/write. Zapiszemy je jako zmienne środowiskowe. Klucz read nazywamy public, a klucz read/write nazywamy secret. Na przykład możesz dodać je do pliku .env w katalogu głównym projektu.

Będziesz także musiał dodać dwie dodatkowe zmienne środowiskowe: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Domyślny kod lokalizacji zapasowej. W tym przykładzie ustawimy go na en dla języka angielskiego.
• TACOTRANSLATE_ORIGIN: „folder”, w którym będą przechowywane Twoje ciągi tekstowe, na przykład adres URL Twojej strony internetowej. Przeczytaj więcej o originach tutaj.

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

Upewnij się, że nigdy nie ujawnisz sekretnego klucza API read/write w środowiskach produkcyjnych po stronie klienta.

Konfiguracja TacoTranslate

Zainicjalizuj TacoTranslate w swojej aplikacji React, otaczając ją dostawcą kontekstu 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>
	);
}

Możesz teraz używać komponentu Translate w dowolnym miejscu swojej aplikacji, aby wyświetlać przetłumaczony tekst! Koniecznie sprawdź naszą dokumentację, aby uzyskać więcej informacji oraz przewodniki implementacyjne dostosowane do Twojej konfiguracji.

import {Translate} from 'tacotranslate/react';

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

Zalety korzystania z TacoTranslate

• Oszczędność czasu: Automatyzuje żmudny proces lokalizacji i zbierania ciągów tekstowych, oszczędzając Twój cenny czas.
• Ekonomiczne: Zmniejsza potrzebę ręcznych tłumaczeń, obniżając koszty lokalizacji.
• Zwiększona dokładność: Tłumaczenia oparte na SI zapewniają kontekstowo trafne i wysokiej jakości rezultaty.
• Skalowalne rozwiązanie: Łatwo dodawaj obsługę nowych języków w miarę rozwoju aplikacji i bazy klientów.

Zacznij już dziś!

Twoja aplikacja React zostanie przetłumaczona automatycznie, gdy dodasz jakiekolwiek teksty do komponentu Translate. Zauważ, że tylko środowiska posiadające uprawnienia read/write na kluczu API będą mogły tworzyć nowe teksty do przetłumaczenia.

Zalecamy posiadanie zamkniętego i zabezpieczonego środowiska testowego (staging), w którym możesz przetestować aplikację produkcyjną, dodając nowe teksty przed uruchomieniem. To zapobiegnie kradzieży twojego sekretnego klucza API przez niepowołane osoby oraz potencjalnemu rozrostowi projektu tłumaczeń wskutek dodawania niepożądanych ciągów.

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!