> ## Documentation Index
> Fetch the complete documentation index at: https://developers.phrase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# i18next

> OTA backend plugin for i18next

<Card title="phrase/i18next-phrase-backend" icon="github" horizontal href="https://github.com/phrase/i18next-phrase-backend" />

`@phrase/i18next-backend` is a backend plugin for [i18next](https://www.i18next.com/) 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.

<Note>
  This guide applies to v2+ of the SDK.
</Note>

## Installation

```bash theme={null}
npm install --save @phrase/i18next-backend
```

## Setup

```javascript theme={null}
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](/en/api/strings/introduction).

## 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.

```bash theme={null}
npm install --save @phrase/i18next-backend @react-native-async-storage/async-storage
```

```javascript theme={null}
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](/en/api/strings/introduction) or the Phrase Strings dashboard. To publish releases automatically on a schedule, use [release triggers](/en/ota/introduction#release-triggers).