FAQ

Часто задаваемые вопросы и ответы о Lingo.dev Compiler.

Могу ли я переводить строковые литералы?

Lingo.dev Compiler следует соглашению, что всё в JSX подлежит локализации. Строковые литералы вне компонентов JSX по умолчанию не локализуются.

Текущее поведение:

// Это НЕ будет переведено
const message = "Hello world";
const errorText = "Something went wrong";

// Это БУДЕТ переведено
function Component() {
  return <h1>Hello world</h1>;
}

Как сделать литералы локализуемыми:

Вы можете сделать строковые литералы локализуемыми, обернув их в фрагменты JSX:

// До: Нелокализуемо
const message = "Hello world";

// После: Локализуемо с использованием фрагментов
const message = <>Hello world</>;

// Использование в вашем компоненте
function Component() {
  return <div>{message}</div>;
}

Альтернативный подход:

// Для динамических сообщений
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// Для условного текста
const statusText = isError ? <>Error occurred</> : <>Success</>;

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

Мы изучаем возможности расширения этого поведения для поддержки большего количества случаев использования в будущем. Присоединяйтесь к нашему Discord, чтобы обсудить конкретные шаблоны, которые вы хотели бы видеть поддержанными.

Какие фреймворки поддерживаются?

Lingo.dev Compiler в настоящее время поддерживает следующие фреймворки React:

  • Next.js (только App Router)
  • React Router v6+
  • Remix (последняя версия)
  • Vite + React

Мы приветствуем вкладчиков, заинтересованных в реализации поддержки компилятора для других платформ. Присоединяйтесь к нашему Discord, чтобы обсудить стратегии реализации.

Могу ли я добавить больше языков?

Да! Вы можете расширить поддержку языков, настроив пользовательские модели прямо в конфигурации вашего компилятора:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

См. расширенную конфигурацию для подробностей.

Могу ли я использовать пользовательские подсказки?

Да! Вы можете настроить подсказки для перевода прямо в конфигурации вашего компилятора:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "Вы профессиональный переводчик, специализирующийся на технической документации. Переведите с {SOURCE_LOCALE} на {TARGET_LOCALE}, сохраняя техническую точность.",
};

Для использования пользовательских глоссариев включите определения терминов в вашу подсказку. Ознакомьтесь с нашим стандартным примером подсказки для лучших практик.

Могу ли я использовать больше провайдеров LLM?

В настоящее время Lingo.dev Compiler интегрирован с GROQ, но мы хотели бы поддерживать больше провайдеров LLM в будущем (свяжитесь с нами или отправьте нам pull request!).

Нужен ли мне ключ API GROQ в CI/CD?

Обычно нет. Если вы собираете приложение локально, все переводы будут сохранены в директории lingo/. Вашему CI/CD не нужно будет вызывать LLM для перевода строк.

В качестве альтернативы вы можете добавить переменную GROQ_API_KEY в ваш CI/CD и выполнять все переводы там во время сборки, но мы не рекомендуем этот подход, чтобы сохранить больший контроль над финальными переводами.

Могу ли я редактировать переводы?

Да! Вы можете вручную редактировать файл lingo/dictionary.js. Он экспортирует объект с переводами для всех файлов и записей. Вы можете редактировать текст для каждого языка в свойстве content. Ваши изменения будут сохранены до тех пор, пока исходный текст в React-компонентах не будет обновлен.

Не любите редактировать JavaScript-объекты? Мы скоро выпустим редактор для улучшения процесса редактирования. Дайте нам знать, если вам это интересно!

Как я могу перевести заново всё приложение, конкретный файл или язык?

Чтобы перевести заново всё приложение, удалите файл dictionary.js из директории lingo/.

Чтобы перевести заново только конкретные файлы, вы можете удалить их ключ (имя файла) из dictionary.js.

Если вы хотите перевести заново конкретный язык, вам нужно удалить все записи для этого языка.

Зачем мне собирать приложение локально?

Локальная сборка нормализует ваши файлы переводов lingo/ за счёт:

  • Удаления неиспользуемых ключей перевода
  • Обновления контрольных сумм содержимого
  • Обеспечения единообразного форматирования файлов
  • Оптимизации для развёртывания в продакшн

Всегда запускайте npm run build перед фиксацией изменений, чтобы поддерживать чистоту файлов переводов.

Переводы отсутствуют!

Если переводы отсутствуют:

  1. Соберите локально, чтобы нормализовать ваши файлы lingo/:

    npm run build

  2. Проверьте ваш API-ключ, чтобы убедиться, что он настроен правильно:

    # Убедитесь, что в вашем файле .env содержится
GROQ_API_KEY=gsk_...

  3. Зафиксируйте обновлённые файлы:

    git add lingo/
git commit -m "Обновление переводов"

  4. Перезапустите ваш сервер разработки после внесения изменений.

Могу ли я настроить собственный глоссарий?

Да! Используйте пользовательские подсказки для определения терминологии и глоссариев прямо в конфигурации компилятора:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "Вы профессиональный переводчик. Используйте эти термины последовательно: 'Dashboard' должно быть 'Tableau de bord' на французском, 'Settings' должно быть 'Configuración' на испанском. Переводите с {SOURCE_LOCALE} на {TARGET_LOCALE}.",
};

Как пропустить определённый контент при переводе?

Используйте атрибут data-lingo-skip:

<div data-lingo-skip>Этот контент не будет переведён</div>

Для условного пропуска на основе типа контента:

<code data-lingo-skip>
  // Блоки кода пропускаются автоматически const apiKey = "secret-key";
</code>

Могу ли я переопределить определённые переводы?

Да! Используйте атрибуты data-lingo-override- для переопределений, специфичных для локали:

<button data-lingo-override-es="¡Hola!" data-lingo-override-fr="Bonjour!">
  Hello
</button>

Это полезно для:

  • Названий брендов, которые не должны переводиться
  • Терминологии, специфичной для региона
  • Маркетингового текста, требующего ручной проверки

Как компилятор обрабатывает множественное число?

Компилятор автоматически обрабатывает базовые шаблоны множественного числа, но для сложных правил множественного числа вам может понадобиться соответствующим образом структурировать ваш JSX:

// Компилятор обработает это корректно
<p>{count === 1 ? "1 элемент" : `${count} элементов`}</p>

Как насчет производительности в продакшене?

Компилятор Lingo.dev оптимизирован для продакшена:

  • Нулевая стоимость выполнения — переводы предварительно компилируются
  • Разделение бандлов — загружается только активная локаль
  • Tree shaking — неиспользуемые переводы удаляются
  • Дружественность к CDN — статические файлы переводов эффективно кэшируются

Могу ли я использовать это с TypeScript?

Да! Компилятор отлично работает с проектами на TypeScript. Все предоставленные React-компоненты полностью типизированы:

import { LocaleSwitcher } from "lingo.dev/react/client";

// Полная поддержка TypeScript
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

Как сообщить об ошибках или запросить новые функции?

Следующие шаги