next-intl – как подключиться к Crowdin JS SDK?

Question

next-intl – как подключиться к Crowdin JS SDK?

Существует страница документации, на которой Crowdin рекомендуется в качестве инструмента управления локализацией. https://next-intl-docs.vercel.app/docs/localization-management

На странице приведен пример с интеграцией с github (автоматизировать создание запросов на включение, но с использованием локальных файлов en.json и т. д.).

Но мы пытаемся выяснить, как использовать next-intl с Crowdin JS SDK https://store.crowdin.com/crowdin-api-client-js, чтобы мы могли загружать и интегрировать все переводы с панели инструментов Crowdin и обновлять их в реальном времени. .

Есть ли у кого-нибудь пример кода, как добиться этого с помощью next-intl?

Мы пытались найти пример, но не нашли его на сайте документации.

0

next.js localization internationalization crowdin

Источник

user8547800 05 май '23 в 10:45

1 ответ

Другие вопросы по тегам next.js localization internationalization crowdin

user7328018 16 май '23 в 07:27 2023-05-16 07:27 · Answer 1 · 2023-05-16 07:27

В таких случаях не рекомендуется использовать REST API (из-за ограничений скорости и соображений безопасности). Вместо этого используйте клиент Crowdin OTA JS .

Клиент Crowdin OTA JS предоставляет методы для получения строк перевода из JSON в виде объектов или обычного текста для других файлов. Основным преимуществом здесь является AWS CDN (сеть доставки контента) для переводов, которая обеспечивает низкую задержку и высокую надежность загрузки переводов.

Для демонстрации я буду использовать официальный пример проекта next-intl , а для получения переводов — метод getStringsByLocale .

src/pages/index.tsx:

      import otaClient from '@crowdin/ota-client';
import {GetStaticPropsContext} from 'next';
import {useTranslations} from 'next-intl';
import LocaleSwitcher from 'components/LocaleSwitcher';
import PageLayout from 'components/PageLayout';

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

  return (
    <PageLayout title={t('title')}>
      <p>{t('description')}</p>
      <LocaleSwitcher />
    </PageLayout>
  );
}

export async function getStaticProps({locale}: GetStaticPropsContext) {
  const client = new otaClient('<distribution-hash>');

  const messages =
    locale === 'en'
      ? (await import(`../../messages/en.json`)).default
      : await client.getStringsByLocale(locale);

  return {
    props: {
      messages
    }
  };
}

Обратите внимание, что вам нужно будет создать дистрибутив в вашем проекте Crowdin. Распространение — это хранилище CDN, которое отражает переведенный контент вашего проекта. Затем используйте хэш распределения дляotaClientинициализация.

Вот демоверсии: