next-intl -如何连接Crowdin JS SDK?

kmpatx3s  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(277)

有一个文档页面推荐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 Jmeter 板下载和集成所有翻译并实时更新它们。
有没有人有一个示例代码,如何使用next-intl实现这个目标?
我们试图找到一个例子,但在文档网站上没有找到

9o685dep

9o685dep1#

不建议在这种情况下使用REST API(由于速率限制和安全原因)。使用Crowdin OTA JS Client代替。
Crowdin OTA JS客户端提供了从JSON中检索翻译字符串的方法,作为对象或其他文件的纯文本。这里的主要优势是用于翻译的AWS CDN(内容交付网络),它为下载翻译提供了低延迟和高可靠性。
为了演示,我将使用official next-intl example project,为了获取翻译,我将使用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项目中创建一个分发。Distribution是一个CDN保管库,可镜像项目的翻译内容。然后使用分发散列进行otaClient初始化。

以下是演示:

相关问题