Лучшее решение для интернационализации (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-ключ смогут создавать новые строки для перевода.

Мы рекомендуем иметь закрытое и защищённое staging-окружение, где вы можете тестировать ваше production-приложение, добавляя новые строки до запуска в продакшн. Это предотвратит кражу вашего секретного API-ключа и потенциальное раздувание проекта переводов за счёт добавления посторонних строк.