@mercell/i18n

Introduction

This packages is to used in combination with i18next and Sanity CMS. It exposes the following feature:

• i18next backend that fetches translations from you Sanity CMS project and wraps around i18next-http-backend and i18next-multiload-backend-adapter.
• Various constants for supported locales, languages, default language.
• Custom error messages that can be used to track missing translations and keys.
• Mercell preferred language detectors using i18next-browser-languagedetector and i18next-http-middleware

Usage

Prerequisites

• You'll need to be authorized to Mercell npm registry. See github packages documentation
• Have a sanity project with @mercell/sanity-plugin-translations up and running.
• Have configured a i18next instance. There are multiple alternatives here:
  • i18next
  • react-i18next
  • next-i18next
  • See i18next supported frameworks for other alternatives

Installation

Install the package

yarn

yarn add @mercell/i18n

pnpm

pnpm add @mercell/i18n

npm

npm i --save @mercell/i18n

You'll need to configure the i18n instance with using the SanityBackend. This can have slight variations depending on your application framework.

import {
    I18nextBrowserLanguageDetector,
    LOCALE,
    SanityBackend,
} from '@mercell/i18n';
import i18n from 'i18next';

i18n.use(SanityBackend)
    .use(I18nextBrowserLanguageDetector)
    .init({
        fallbackLng: LOCALE,
        backend: {
            backendOption: {
                sanity: {
                    projectId: '<SANITY_PROJECT_ID>',
                    dataset: 'production',
                    useCdn: true,
                },
            },
        },
    });

That should be it. Now just fetch your t-function from your i18next framework and use the translations from sanity.