TL;DR

Управление переводами в JSON файлах становится проблемой с ростом приложения. Better i18n предлагает современный подход с интеграцией в GitHub, CDN доставкой и AI-переводами, упрощая процесс локализации.

Введение

Каждое мультиязычное приложение начинается с простой структуры JSON файлов для переводов. Однако со временем количество ключей увеличивается, переводы теряются, а поддержка становится сложной. Проблема не в JSON, а в том, что переводы находятся вне рабочего процесса разработки. Better i18n решает эту проблему, интегрируя переводы в процесс разработки и обеспечивая автоматизацию и контроль.

Основная часть

Проблемы управления переводами в JSON

С ростом приложения возникают следующие проблемы:

Дрейф ключей: разработчик меняет ключ в коде, но переводы остаются старыми.
Мертвые ключи: удаленные функции оставляют неиспользуемые ключи.
Ошибки форматирования: сложные строки, такие как ICU MessageFormat, легко ломаются.
Задержки в деплое: исправление опечатки требует полного пересборки.

Решение с Better i18n

Better i18n предлагает следующий рабочий процесс:

Разработчик добавляет t('pricing.title') в коде.
CLI сканирует код, обнаруживает новый ключ.
Ключ появляется в панели переводов.
Переводчик или AI добавляет перевод.
Better i18n создает PR в GitHub репозитории.
Команда проверяет PR → CI проверки проходят → мердж.
CDN кэш обновляется → пользователи видят новый перевод.

Установка и использование в Next.js

Установите необходимые пакеты:

npm install @better-i18n/next @better-i18n/cli

Настройте middleware:

// middleware.ts
import { createI18nMiddleware } from '@better-i18n/next';

export default createI18nMiddleware({
  locales: ['en', 'tr', 'de', 'ja'],
  defaultLocale: 'en',
});

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

Используйте переводы в компонентах:

import { useTranslations } from '@better-i18n/next';

export default function PricingPage() {
  const t = useTranslations('pricing');

  return (
    <main>
      <h1>{t('title')}</h1>
      <p>{t('subtitle')}</p>
      {/* другие элементы */}
    </main>
  );
}

CLI и автоматизация

Сканируйте код на наличие ключей:

npx @better-i18n/cli scan

Синхронизируйте результаты с панелью переводов:

npx @better-i18n/cli sync

Практическое применение

Better i18n поддерживает ICU MessageFormat, обеспечивая корректную обработку множественных форм, дат и чисел. AI-переводы учитывают контекст и глоссарий, что повышает качество переводов.

Для мобильных приложений используется пакет @better-i18n/expo, обеспечивающий оффлайн поддержку и обновления переводов без пересборки приложения.

Заключение

Better i18n предлагает современный подход к управлению переводами, интегрируя их в процесс разработки и обеспечивая автоматизацию и контроль. Это позволяет избежать проблем с JSON файлами и упрощает процесс локализации для разработчиков и переводчиков.

Ссылки:

better-i18n.com — платформа (доступен бесплатный тариф)
docs.better-i18n.com — документация
npm packages — все опубликованные SDK
AI agent skills — лучшие практики для AI ассистентов

Источник: https://dev.to/erayg/stop-managing-translations-in-json-files-theres-a-better-way-4fd6