Quick Integration

Integrate with i18next

Connect your project with your translations instantly

Quick Start

For the quickest setup, visit the Export section of your i18nexus project where you will find code snippets already set up for you!
For React developers, you can also check out this post on Medium.
Option 1: Connecting i18next to your latest translations
Connecting your application to the i18nexus API is an awesome way to develop. Every time you add a string to i18nexus, it will immediately appear in your application with all its Google translations! Now you can see how your project looks in other languages before your translators have even gotten started!
 
In the code snippet below, we are making use of three awesome i18next libraries:
  1. i18next – the main i18next library
  2. i18next-http-backend – for making AJAX requests to load translations
  3. i18next-browser-languagedetector – for detecting a user’s browser language
 

In this method, we are simply telling i18next to make an AJAX request to your i18nexus project to retrieve translations for a specific language. 

In production environments, it is recommended to optimize with versioning and caching. Scroll down to Option 2 to see how to do this.

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

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

    backend: {
      loadPath: loadPath
    }
  })

*To learn more about using i18next, see their documentation.

Option 2: Connecting i18next to a specific version of your translations
Below, we are making use of two more awesome i18next libraries:
  1. i18next-localstorage-backend – improves the loading speed of your translations by caching them in the browser.
  2. i18next-chained-backend – helps us manage how our translations are retrieved.
 
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). 

In the code snippet below, we are retrieving our translations from the i18nexus CDN and then caching the translations in the user’s browser. 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}/{{ns}}/{{lng}}.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

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

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

*To learn more about using i18next, see their documentation.

Need help?

We are always available for any questions you have. 

Click the chat bubble in the bottom right of this page, or email us at support@i18nexus.com.