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 trzeba utworzyć konto TacoTranslate, projekt tłumaczeniowy i powiązane klucze API. Utwórz konto tutaj. To darmowe i nie wymaga podawania karty kredytowej.

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

Musisz też dodać dwie dodatkowe zmienne środowiskowe: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Domyślny kod zapasowej lokalizacji (fallback). 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. Więcej informacji o originach znajdziesz 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 read/write klucza API w środowiskach produkcyjnych po stronie klienta.

Konfigurowanie TacoTranslate

Zainicjuj TacoTranslate w aplikacji React, opakowując aplikację w 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>
	);
}

Teraz możesz używać komponentu Translate w dowolnym miejscu swojej aplikacji, aby wyświetlać przetłumaczony tekst! Koniecznie zapoznaj się z naszą dokumentacją, aby uzyskać więcej informacji oraz przewodniki wdrożeniowe dopasowane 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 cenny czas.
• Opłacalne: Zmniejsza potrzebę ręcznych tłumaczeń, obniżając koszty lokalizacji.
• Lepsza dokładność: Tłumaczenia wspomagane sztuczną inteligencją 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 ciągi tekstowe do komponentu Translate. Zwróć uwagę, że tylko środowiska z uprawnieniami read/write w kluczu API będą mogły tworzyć nowe ciągi do przetłumaczenia.

Zalecamy utrzymanie zamkniętego i zabezpieczonego środowiska stagingowego, w którym możesz przetestować aplikację produkcyjną, dodając nowe ciągi przed wdrożeniem. Zapobiegnie to kradzieży Twojego tajnego klucza API przez osoby trzecie i potencjalnemu nadmuchaniu projektu tłumaczeń przez dodanie niechcianych 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!