Начало работы

Выберите свой React‑фреймворк, чтобы начать:

npx gtx-cli@latest

Что такое General Translation?

General Translation — это полноценный стек интернационализации (i18n), который позволяет быстро и легко выпускать многоязычные приложения.

General Translation включает:

• Open-source библиотеки для разработчиков на React и Next.js
• Сервис AI‑перевода
• Полный инфраструктурный пакет для доставки переводов

Если вы хотите использовать библиотеки GT с собственным провайдером переводов, ознакомьтесь с отдельной документацией по gt-next и gt-react.

Если вы хотите использовать собственную библиотеку i18n, но при этом пользоваться сервисом AI‑перевода General Translation, см. документацию по нашему CLI‑инструменту.

Если вы хотите использовать General Translation для перевода файлов JSON, Markdown или MDX, см. документацию по нашему CLI‑инструменту.

npx gtx-cli@latest

Запустите наш мастер установки, чтобы начать!

Функции

⚛️ Переводите целые компоненты React прямо в коде

• Один парный компонент <T> — всё, что нужно, чтобы перевести целый компонент React.
  • Не потребуется сложный рефакторинг или громоздкие вызовы функций.
• Контент — встроенный и находится там же, где и ваш код.
  • Не нужны ключи, строки или дополнительные файлы!
• Библиотека берёт на себя всю i18n‑логику, так что вам не приходится этим заниматься.
• Переводы всегда синхронизированы с исходным кодом.
• Переводы содержат контекст о содержимом, поэтому они точнее.

export default function Page() {
  return (
    <T>
      <p>Вы можете передавать любой JSX в качестве дочерних элементов компонента {'<T>'}.</p>
      <p>
        Например, вы можете добавить <a href='/'>ссылку</a>, и текст будет
        переведён с учётом контекста.
      </p>
      <div>
        <div>
          <p>Даже глубоко вложенные компоненты переводятся с учётом контекста.</p>
          <button>Нажмите меня</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Паритет функциональности с существующими библиотеками

• Библиотеки GT поддерживают те же возможности, что и популярные решения, такие как i18next, react-intl и next-intl.
• Поддерживаются словари, множественное число, форматы валют и автоматическая маршрутизация.

🧠 Бесплатный сервис перевода на ИИ

• Наш бесплатный сервис перевода на ИИ позволяет создавать переводы для вашего приложения за считанные секунды.
• Горячая перезагрузка переводов автоматически обновляет ваши переводы по мере их редактирования.
• HTML‑контент переупорядочивается и настраивается в зависимости от языка.

🔧 Удобно для разработчиков

• Настройка простая и занимает несколько минут.
• Все библиотеки GT — с открытым исходным кодом и могут работать автономно.
  • Вы можете использовать своего поставщика переводов или наш бесплатный сервис переводов на базе ИИ.
• Больше не нужно тратить время на управление ключами перевода вроде t('menu.header.title').
  • Просто пишите всё прямо в коде!

См. наш репозиторий на GitHub с исходным кодом и примерами проектов.

Почему выбирают General Translation?

General Translation — это полноценный стек i18n, включающий библиотеки для разработчиков, AI‑переводы и полный набор инфраструктурных инструментов для многоязычных приложений.

Вы можете комбинировать наши библиотеки с собственным провайдером переводов или использовать наш бесплатный сервис переводов на базе AI со своей библиотекой i18n.

Для действительно бесшовной, сквозной работы с i18n мы рекомендуем использовать наши библиотеки вместе с нашим сервисом переводов.

С библиотеками GT, такими как gt-react и gt-next, вы можете:

1. Переводите целые компоненты React, а не только строки

UI, переданный как дочерние элементы компонента <T>, будет переведён вне зависимости от сложности дерева JSX. Например:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Любые дочерние элементы <b>компонента {`<T>`}</b> будут переведены.
      </p>
      <p>
        Такие элементы, как <a href='/'>ссылки</a>
        {', '}
        <button>кнопки</button>
        {', '}
        и даже{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> глубоко вложенные компоненты </div>{' '}
          </div>{' '}
        </div>{' '}
        будут переведены.
      </p>
    </T> 
  );
}

2. Переводите клиентские и серверные компоненты

Благодаря полноценной поддержке Next.js App Router и React Server Components вы можете переводить как клиентские, так и серверные компоненты.

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      Здравствуйте, <Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      Привет, <Var>{name}</Var>
    </T>
  );
}

3. Пишите содержимое inline или в словарях

JSX‑содержимое, размещённое внутри компонента <T>, помечается для перевода:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>Привет, мир!</p> {/* translates <p>Hello, world!</p> */}
    </T>
  );
}

В качестве альтернативы, если вам ближе классический подход со словарём, вы можете хранить контент в файле словаря:

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // перевод «Привет, мир!»
}

4. Просматривайте переведённый контент в процессе разработки

Не беспокойтесь о том, как интерфейс выглядит на разных языках — General Translation будет автоматически переводить ваш контент по мере ввода, в реальном времени.

Вместо того чтобы многократно править интерфейс уже на продакшене, просто один раз напишите контент на английском и доверьте остальное General Translation.

Нужно увидеть, как элементы интерфейса будут выглядеть на немецком перед деплоем? Без проблем — General Translation автоматически переведёт их для вас!

5. Перевод контента по требованию

Приложения часто нужно переводить контент, который известен только во время выполнения. Для Next.js библиотеки GT поддерживают перевод контента по требованию.

Некоторые распространённые примеры:

• Персонализированные данные пользователя
• Контент, хранящийся удалённо
• Динамически генерируемый контент

После загрузки перевода компонент будет обновлён в реальном времени с новым переводом.

Быстрый старт

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

Готовы масштабироваться по всему миру? Начните переводить приложение за минуты и охватывайте пользователей по всему миру!