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

Налаштування 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 зможуть створювати нові рядки для перекладу.

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