Введение

На днях я наткнулся на шаблон AI‑чатбота на Next.js от Vercel. К своему удивлению, он был доступен только на английском.

Поэтому я добавил в него поддержку нескольких языков. За 5 минут. Вот как:

Посмотреть демо можно здесь.

Код доступен здесь.

Зачем заниматься интернационализацией?

Часто разработчики настолько сосредоточены на создании продукта, что забывают о пользователях. Для приложений вроде AI‑чатботов, которые по своей сути многоязычны и рассчитаны на любых пользователей, какая польза от чатбота, который поддерживает только английский?

Большинство людей в мире вообще не говорят по‑английски. Фактически, лишь около 20% владеют им. Если вы работаете над стартапом и ваш продукт доступен только на английском, разве вы не упускаете более 80% потенциальных клиентов?

Оказывается, есть причина, почему большинство продуктов доступны только на английском. Дело в том, что интернационализация — это сложно.

Существующие библиотеки вроде next-intl или next-i18next сложно настраивать и использовать. Более того, они вообще не занимаются переводами. Вам всё равно приходится нанимать переводчиков, управлять словарями с сотнями ключей и разбираться со всеми прочими болями интернационализации. Даже небольшие правки текста могут занимать часы, а то и дни на перевод.

До сих пор.

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

Я использовал gt-next, чтобы интернационализировать Vercel AI chatbot всего за 5 минут.

Установка

Сначала я форкнул и клонировал репозиторий:

git clone https://github.com/vercel/ai-chatbot.git

Затем я установил зависимости:

npm install

Если вы, как и я, сталкиваетесь с конфликтами зависимостей, попробуйте использовать эту ветку.

git clone -b base https://github.com/General-Translation/ai-chatbot.git

Затем я установил пакеты gt-next и gt-next-cli.

npm install gt-next gt-next-cli

Конфигурация

Затем я запустил инструмент настройки CLI и для каждого вопроса выбрал «Yes»:

npx gt-next-cli setup

После этого я добавил несколько локалей в плагин в next.config.js:

export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['fr', 'es', 'zh'], // французский, испанский, китайский
})

Я мог бы добавить больше локалей, но просто хотел протестировать чат-бота на нескольких языках. Можете смело добавлять столько локалей, сколько хотите!

Вот список всех локалей, которые поддерживает gt-next.

Как это работает

Основной элемент библиотеки — компонент <T>.

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

Все, что обернуто в компонент <T>, может быть переведено. Инструмент настройки CLI использует собственный парсер babel, чтобы просканировать наш код и автоматически обернуть все найденные React‑компоненты в <T>.

Использование компонента <T> имеет несколько преимуществ по сравнению с другими библиотеками:

• Вам никогда не придется работать со словарями или управлять ключами.
• Переводы всегда актуальны и синхронизированы с кодом.
• Переводы автоматически включают всю окружающую контекстную информацию, что обеспечивает более качественные переводы.

Запуск чат-бота

Разумеется, я не забыл про все переменные окружения.

cp .env.example .env.local

Мне нужно было создать бесплатную учетную запись в dashboard General Translation, чтобы получить API-ключ. На это ушло всего несколько кликов.

После того как я заполнил все необходимые переменные окружения, я запустил чат-бота:

npm run dev

Вот и всё! Я переключил язык браузера на французский — и интерфейс тоже стал французским. То же самое с испанским и китайским.

Просто, правда?

Я сделал переключение языков ещё проще, добавив переключатель языка в шапку чат-бота.

// components/chat-header.tsx
import { LocaleSelector } from 'gt-next/client';
export default function PureChatHeader() {
  return (
    {/* ... остальной код ... */}
    <LocaleSelector />
    {/* ... остальной код ... */}
  );
}

Все заработало сразу «из коробки».

Очистка

Хотя инструмент настройки CLI хорошо справился с переводом всех элементов React, нашлось несколько досадных строк, которые были жёстко прописаны в коде.

Например, в файле model-selector.tsx были жёстко заданные описания моделей чата:

{
  id: 'chat-model-large',
  name: 'Большая модель',
  description: 'Большая модель для сложных многошаговых задач',
},

Я привёл это в порядок, импортировав хук useGT из gt-next/client и используя его для перевода строк:

import { useGT } from 'gt-next/client';
const t = useGT();
{
  id: 'chat-model-large',
  name: t('Большая модель'),
  description: t('Большая модель для сложных многошаговых задач'),
},

Вот и всё! Весь текст в чат‑боте теперь интернализован и доступен на любом языке.

Развертывание в продакшн

Развертывание в продакшн оказалось ещё проще. Я заменил значение переменной окружения GT_API_KEY на продакшн-ключ API и запустил команду перевода:

npx gt-next-cli translate --locales es fr zh

Наконец я задеплоил чат-бота на Vercel.

Заключение

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

Всего за несколько минут у меня был полностью рабочий, интернационализированный AI‑чатбот, доступный на испанском, французском и китайском языках.

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

Если вы хотите попробовать General Translation в деле, загляните на сайт, в репозиторий на GitHub или в документацию.