Quick Integration

Enjoy flexible integration options to suit your team's needs

Tutorials

Whether you're using Next.js or React, i18next or react-intl, we have a series of tutorials prepared for your use case. If you're new to i18nexus, we recommend checking out the following tutorials:

Integration Options

On the Export page of your i18nexus project, you will find code snippets ready for you to copy and paste into your app. But if you would like to learn more about the different ways i18nexus can integrate with your app, read on!

There are 3 primary ways to integrate your i18nexus translations:

  1. Connecting your app to your latest live translations through the i18nexus API
  2. Connecting your app to a static cached version of your translations stored on the i18nexus CDN.
  3. Downloading your translations with the i18nexus CLI to bundle with your app.

Option 1: Connecting your app to your latest translations

Connecting your application to the i18nexus API is a great way to ensure you app always displays your latest translations.

In this method, we are simply making a fetch request to your i18nexus project to retrieve translations for a specific language and namespace.

i18next:

import i18next from "i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

const loadPath = `https://api.i18nexus.com/project_resources/translations/{{lng}}/{{ns}}.json?api_key=YOUR_PROJECT_API_KEY`;

i18next
  .use(HttpBackend)
  .use(LanguageDetector)
  .init({
    fallbackLng: "en", // set to your project's base language

    ns: ["example-namespace", "example-namespace-2"], // namespaces you want to load
    defaultNS: "example-namespace", // namespace that is your default

    supportedLngs: ["en", "fr", "es-mx"], // languages in your project

    backend: {
      loadPath: loadPath
    }
  })

react-intl:

// If using Next.js, it is recommended to call this in getStaticProps

export const getMessages = async (locale, namespace) => {
  const apiKey = process.env.I18NEXUS_API_KEY;

  const response = await fetch(
    `https://api.i18nexus.com/project_resources/translations/${locale}/${namespace}?api_key=${apiKey}`
  );

  return response.json();
};

Option 2: Connecting your app to a specific version of your translations

When you create a new version in your project’s Export section, that version is automatically served as JSON through our blazing-fast CDN (Content Delivery Network).

i18next:

In the code snippet below, we are retrieving our translations from the i18nexus CDN and then caching the translations in the user’s browser using i18next-localstorage-backend. This ensures much faster load times and a better user experience:

import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpBackend from "i18next-http-backend";
import ChainedBackend from "i18next-chained-backend";
import LocalStorageBackend from "i18next-localstorage-backend";

const version = 1; // change this to the version you want to use
const loadPath = `https://cdn.i18nexus.com/versions/${version}/translations/{{lng}}/{{ns}}.json?api_key=YOUR_PROJECT_API_KEY`;

i18next
  .use(ChainedBackend)
  .use(LanguageDetector)
  .init({
    fallbackLng: "en", // set to your project's base language

    ns: ["example-namespace"], // namespaces you want to load
    defaultNS: "example-namespace", // namespace that is your default

    supportedLngs: ["en", "fr", "es-mx"], // languages available on this version

    backend: {
      backends: [
        LocalStorageBackend,
        HttpBackend
      ],
      backendOptions: [{
        defaultVersion: version
      }, {
        loadPath: loadPath
      }]
    }
  })

react-intl:

// If using Next.js, it is recommended to call this in getStaticProps

export const getMessages = async (locale, namespace, version) => {
  const apiKey = process.env.I18NEXUS_API_KEY;

  const response = await fetch(
    `https://cdn.i18nexus.com/versions/${version}/translations/${locale}/${namespace}.json?api_key=${apiKey}`
  );

  return response.json();
};

Option 3: Downloading translations as json files with the i18nexus CLI

The i18nexus CLI allows you to download your translations to bundle with your app.

$ npm install -g i18nexus-cli
$ i18nexus pull -k <YOUR_PROJECT_API_KEY>

Your project API key can also be set using an an environment variable I18NEXUS_API_KEY

All CLI options can be viewed here.

Level up your localization

It only takes a few minutes to streamline your translations forever.

Get started