Лучшее решение для интернационализации (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

Ни в коем случае не разглашайте секретный API-ключ read/write в клиентских 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 и потенциальное раздувание проекта переводов за счёт добавления лишних строк.