Найкраще рішення для інтернаціоналізації (i18n) у React-додатках

Хочете вивести свій React‑додаток на нові ринки? TacoTranslate надзвичайно спрощує локалізацію ваших React‑застосунків, дозволяючи без зайвого клопоту охопити глобальну аудиторію.

Чому обрати TacoTranslate для React?

Безшовна інтеграція: Розроблений спеціально для додатків на React, TacoTranslate легко інтегрується у ваш існуючий робочий процес.
Автоматичний збір рядків: Більше не потрібно вручну керувати JSON‑файлами. TacoTranslate автоматично збирає рядки з вашої кодової бази.
Переклади на базі ШІ: Використовуйте потужність ШІ для отримання контекстно точних перекладів, які відповідають тону вашого додатка.
Миттєва підтримка мов: Додайте підтримку нових мов лише одним кліком, зробивши ваш додаток доступним у всьому світі.

Як це працює

Встановіть пакет TacoTranslate за допомогою npm:

npm install tacotranslate

Коли ви встановите модуль, вам потрібно створити обліковий запис TacoTranslate, проєкт перекладу та відповідні API-ключі. Створіть обліковий запис тут. Це безкоштовно і не вимагає додавання платіжної картки.

У інтерфейсі програми TacoTranslate створіть проект і перейдіть на вкладку ключів API. Створіть один read ключ і один read/write ключ. Ми збережемо їх як змінні середовища. Ключ read — це те, що ми називаємо public, а ключ read/write — secret. Наприклад, ви можете додати їх до файлу .env у корені вашого проєкту.

Вам також потрібно додати ще дві змінні середовища: TACOTRANSLATE_DEFAULT_LOCALE і TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: Код локалі за замовчуванням, що використовується як резервна локаль. У цьому прикладі ми встановимо його як en для англійської.
TACOTRANSLATE_ORIGIN: «папка», де зберігатимуться ваші рядки, наприклад URL вашого сайту. Дізнайтеся більше про origins тут.

.env

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

Переконайтеся, що секретний read/write API-ключ ніколи не потрапляє в клієнтські production-середовища.

Налаштування TacoTranslate

Ініціалізуйте TacoTranslate у вашому React-додатку, обернувши додаток провайдером контексту 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>
	);
}

Тепер ви можете використовувати компонент Translate будь-де у вашому застосунку для відображення перекладеного тексту! Обов’язково перегляньте нашу документацію для отримання додаткової інформації та посібників із впровадження, які стосуються вашої конфігурації.

import {Translate} from 'tacotranslate/react';

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

Переваги використання TacoTranslate

Економія часу: Автоматизує нудний процес локалізації та збору рядків, заощаджуючи ваш цінний час.
Економічно вигідне: Зменшує потребу в ручних перекладах, знижуючи витрати на локалізацію.
Підвищена точність: Переклади на основі ШІ забезпечують контекстно точні та високоякісні результати.
Масштабоване рішення: Легко додавати підтримку нових мов у міру зростання вашого додатка та бази користувачів.

Почніть вже сьогодні!

Ваш React‑застосунок буде автоматично перекладений, коли ви додасте будь-які рядки до компонента Translate. Зверніть увагу, що лише середовища з дозволами read/write на ключ API зможуть створювати нові рядки для перекладу.

Рекомендуємо мати закрите та захищене тестове (staging) середовище, де ви зможете перевіряти продукційну версію застосунку, додаючи нові рядки перед запуском. Це запобігатиме викраденню вашого секретного ключа API та потенційному роздуванню проєкту перекладів через додавання небажаних рядків.