Обзор

В gt-next 6.6.0 мы по-новому подходим к интернационализации приложений «brown field». Мы представляем функцию t.obj(), которая может возвращать структуры словаря с переводами.

Мотивация

«Brown field» и «green field» — термины, пришедшие из сферы недвижимости. Green field — это участок без существующих строений, а brown field — участок, где такие строения уже есть. В i18n это соответствует приложениям без i18n-инфраструктуры (green field) и приложениям, где i18n-инфраструктура уже существует (brown field).

До сих пор наша библиотека была в первую очередь ориентирована на интернационализацию приложений «green field». В качестве примеров можно привести компонент <T> и хук useGT().

Единственная инфраструктура, которую мы специально создали для приложений «brown field», — это хуки const t = useTranslations() и const t = getTranslations(), построенные по образцу словарного паттерна next-intl. Однако наша функция t() была ограничена: она возвращала только строки, а не поддеревья словаря.

Как мы выяснили, разработчики часто ожидают, что библиотека i18n будет возвращать не только строки, но и поддеревья словаря. Поэтому для gt-next крайне важно поддерживать эту возможность, когда разработчики переходят с других библиотек i18n.

Использование

Рассмотрим следующую структуру словаря со списком элементов, который нужно перебрать:

{
  "cards": [
    {
      "title": "Card 1",
      "description": "Card 1 description"
    },
    {
      "title": "Card 2",
      "description": "Card 2 description"
    },
    {
      "title": "Card 3",
      "description": "Card 3 description"
    }
  ]
}

В предыдущем подходе нужно было обращаться к каждому элементу по отдельности, используя его точный ключ:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

Этот подход явно не масштабируется и плохо поддаётся сопровождению.

Новая функция t.obj() предоставляет удобный способ обращаться к структурам словаря как к поддеревьям:

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

Заключение

Функция t.obj() — важный шаг вперёд, который делает gt-next более универсальным как для green field-, так и для brown field-приложений. Благодаря возможности напрямую работать с поддеревьями словаря разработчики избавляются от одного из основных препятствий при интернационализации существующих приложений.

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