Найкраще рішення для інтернаціоналізації (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: Код локалі за замовчуванням (fallback). У цьому прикладі ми встановимо його на 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-ключ у продукційних середовищах на стороні клієнта.

Налаштування 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-середовище, де ви можете тестувати ваш production-додаток, додаючи нові рядки перед виходом у продакшен. Це запобігатиме тому, щоб будь-хто будь-хто вкрав ваш секретний ключ API і потенційно роздмухав ваш проєкт перекладів шляхом додавання несанкціонованих рядків.