Обзор

В gt-next 6.6.0 мы предлагаем новый подход к интернационализации приложений «brownfield». Мы вводим функцию 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(), основанные на dictionary‑паттерне next-intl. Однако наша функция t() была ограничена: она возвращала только строки, а не поддеревья словаря.

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

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

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

{
  "cards": [
    {
      "title": "Карточка 1",
      "description": "Описание карточки 1"
    },
    {
      "title": "Карточка 2",
      "description": "Описание карточки 2"
    },
    {
      "title": "Карточка 3",
      "description": "Описание карточки 3"
    }
  ]
}

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

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 как для новых, так и для уже существующих приложений. Давая разработчикам возможность напрямую работать с поддеревьями словаря, мы устраняем один из ключевых источников трения при интернационализации уже созданных приложений.

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