Skip to main content

next-intl

Installation​

npm install @crowdin/ota-client

Usage​

Integrating the Crowdin OTA JS client with the next-intl is pretty straightforward. You just need to provide messages received from the OTA client instead of local files.

For example:

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
    }
  };
}

For more detail, see the working example here.

Further reading​