API
Integrate with i18next
Connect your project with your translations instantly
Quick Start
Option 1: Connecting i18next to your latest translations
- i18next – the main i18next library
- i18next-http-backend – for making AJAX requests to load translations
- 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
supportedLngs: ["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
- i18next-localstorage-backend – improves the loading speed of your translations by caching them in the browser.
- i18next-chained-backend – helps us manage how our translations are retrieved.
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
supportedLngs: ["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.