Installation (i18next)

To install Tolgee i18next integration library run:

npm

npm install @tolgee/i18next

yarn

yarn add @tolgee/i18next

pnpm

pnpm install @tolgee/i18next

Then wrap your i18next instance withTolgee:

import i18n from 'i18next';
import { withTolgee, Tolgee, I18nextPlugin, DevTools } from '@tolgee/i18next';

const tolgee = Tolgee()
  .use(DevTools())
  .use(I18nextPlugin())
  .init({
    // for development
    apiUrl: ...,
    apiKey: ...,

    // for production
    staticData: {
      'en:translation': ...,
      'cs:translation': ...
    }
  });

withTolgee(i18n, tolgee)
  .use(...)
  .init(...)

Check all tolgee options and tolgee plugins.

Now you can use regular i18next translation features.

info

i18next namespaces are mapped to Tolgee namespaces and since i18next doesn't support empty namespace, you have to have your translations in some namespace in the Tolgee platform (i18next defaults to "translation").

Language detection/changes

Tolgee will follow i18next configuration, so you can use i18next language detectors or set the language manually.

To change language use i18next.changeLanguage function.

Preparing for production

Tolgee will automatically omit DevTools from your bundle when you build your app for production. So it won't fetch translations directly from Tolgee Platform and it won't allow users to modify translations.

There are generally two ways how to use translations in production:

• Tolgee Content Delivery - translations are loaded dynamically from fast and reliable storage
• Providing localization files directly - your translations are bundled with your code

In production mode, you should never use localization data directly from Tolgee REST API, because it can negatively affect your page performance.