i18next - Phrase Developer Hub

phrase/i18next-phrase-backend

@phrase/i18next-backend is a backend plugin for i18next that fetches translations from Phrase OTA at runtime. It works with any JavaScript framework that uses i18next — React, Vue, Angular, Node.js, React Native, and others. The plugin caches translations locally and re-fetches when the cache expires, minimizing requests to the Phrase CDN.

This guide applies to v2+ of the SDK.

Installation

npm install --save @phrase/i18next-backend

Setup

import i18n from "i18next";
import { I18nextPhraseBackend } from "@phrase/i18next-backend";

i18n
  .use(I18nextPhraseBackend)
  .init({
    fallbackLng: "en",
    backend: {
      distribution: "YOUR_DISTRIBUTION_ID",
      environment: "YOUR_ENVIRONMENT_SECRET",
      appVersion: "1.0.0",
    },
  });

Both distribution and environment are available in the Phrase Strings dashboard after creating a distribution, or via the Distributions API.

Configuration options

Option	Required	Description
`distribution`	Yes	Your OTA distribution ID
`environment`	Yes	Environment secret — differs between development/beta and production
`appVersion`	No	(Semantic) app version for release targeting via min/max version constraints
`cacheExpirationTime`	No	Cache duration in seconds (default: `300`; recommended minimum for production)
`datacenter`	No	OTA data center — `Datacenter.EU` (default) or `Datacenter.US`, imported from `@phrase/i18next-backend`
`format`	No	Translation format — defaults to `i18next`; set to `i18next_4` for v4 pluralization
`storage`	No	Custom async storage implementation for caching. Required on React Native (see below)

React Native

The backend has no built-in storage on React Native, so pass an AsyncStorage-compatible implementation via the storage option. Any storage exposing getItem, setItem, and clear (returning Promises) works.

npm install --save @phrase/i18next-backend @react-native-async-storage/async-storage

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { I18nextPhraseBackend } from "@phrase/i18next-backend";

i18n
  .use(I18nextPhraseBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    backend: {
      distribution: "YOUR_DISTRIBUTION_ID",
      environment: "YOUR_ENVIRONMENT_SECRET",
      storage: AsyncStorage,
    },
  });

For projects that target both React Native and web via react-native-web, passing AsyncStorage works on both — its web build is backed by localStorage. Alternatively, omit storage and the package auto-detects localStorage on web.

Managing releases

Create and publish releases using the Strings API or the Phrase Strings dashboard. To publish releases automatically on a schedule, use release triggers.

phrase/i18next-phrase-backend

​Installation

​Setup

​Configuration options

​React Native

​Managing releases

Installation

Setup

Configuration options

React Native

Managing releases