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

Czy chcesz rozszerzyć swoją aplikację React na nowe rynki? TacoTranslate sprawia, że lokalizowanie aplikacji React jest niezwykle proste, pozwalając dotrzeć do użytkowników na całym świecie bez zbędnych komplikacji.

Dlaczego wybrać TacoTranslate dla React?

Bezproblemowa integracja: Zaprojektowane specjalnie dla aplikacji React, TacoTranslate bezproblemowo integruje się z Twoim istniejącym przepływem pracy.
Automatyczne zbieranie tekstów: Koniec z ręcznym zarządzaniem plikami JSON. TacoTranslate automatycznie zbiera teksty z Twojego kodu.
Tłumaczenia oparte na AI: Wykorzystaj moc sztucznej inteligencji, aby uzyskać tłumaczenia kontekstowo dokładne, dopasowane do tonu Twojej aplikacji.
Natychmiastowe wsparcie językowe: Dodaj obsługę nowych języków za pomocą jednego kliknięcia, dzięki czemu Twoja aplikacja będzie dostępna globalnie.

Jak to działa

Zainstaluj pakiet TacoTranslate za pomocą npm:

npm install tacotranslate

Gdy zainstalujesz moduł, musisz utworzyć konto TacoTranslate, projekt tłumaczeniowy oraz powiązane klucze API. Utwórz konto tutaj. Jest darmowe i nie wymaga dodania 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 to to, co nazywamy public, a klucz read/write to secret. Na przykład możesz dodać je do pliku .env w katalogu głównym projektu.

Musisz także 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 teksty, np. adres URL twojej strony. Dowiedz się więcej o originach tutaj.

.env

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

Pamiętaj, aby nigdy nie ujawniać sekretnego read/write klucza API 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>
	);
}

Teraz możesz 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 wdrożeniowe dostosowane do twojej konfiguracji.

import {Translate} from 'tacotranslate/react';

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

Korzyści z używania 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.
Poprawiona dokładność: Tłumaczenia wspierane przez 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.

Rozpocznij już dziś!

Twoja aplikacja React zostanie przetłumaczona automatycznie, gdy dodasz jakiekolwiek teksty do komponentu Translate. Zauważ, że tylko środowiska, w których klucz API ma uprawnienia read/write, będą mogły tworzyć nowe teksty do przetłumaczenia.

Zalecamy posiadanie zamkniętego i zabezpieczonego środowiska stagingowego, w którym możesz testować aplikację produkcyjną i dodawać nowe teksty przed uruchomieniem na żywo. Zapobiegnie to temu, że ktokolwiek ktokolwiek ukradnie Twój tajny klucz API i potencjalnie rozrostowi projektu tłumaczeniowego poprzez dodawanie nieautoryzowanych tekstó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!