Add or Load Translations

localization as a service Find your translator

Search…

There are a few options to load translations to your application instrumented by i18next. The most common approach to this adding a so called backend plugin to i18next. The range of backends is large from loading translations in the browser using xhr/fetch request to loading translations from databases or filesystem in Node.js.
Add on init
You can add the translations on init
1
import i18next from 'i18next';
2
​
3
i18next
4
  .init({
5
    resources: {
6
      en: {
7
        namespace1: {
8
          key: 'hello from namespace 1'
9
        },
10
        namespace2: {
11
          key: 'hello from namespace 2'
12
        }
13
      },
14
      de: {
15
        namespace1: {
16
          key: 'hallo von namespace 1'
17
        },
18
        namespace2: {
19
          key: 'hallo von namespace 2'
20
        }  
21
      }
22
    }
23
  });
Copied!
Add after init
You can add the translations after init
1
import i18next from 'i18next';
2
​
3
i18next.init({ resources: {} });
4
i18next.addResourceBundle('en', 'namespace1', {
5
  key: 'hello from namespace 1'
6
});
Copied!
There are more options to adding, removing translations...learn more about resource handling.
Please make sure to at least pass in an empty resources object on init. Else i18next will try to load translations and give you a warning that you are not using a backend.
Combined with a backend plugin
If you want to lazy load some translations via a backend plugin, you may need to use the partialBundledLanguages: true option. This allows some resources (or no resources) to be set on initialization while others can be loaded using a backend connector.
You may also want to set the ns option. To an empty array if you do not want to load any namespaces (also not the default namespace: 'translation') or to an array containing the namespaces to load.
1
import i18next from 'i18next';
2
​
3
i18next.init({
4
  partialBundledLanguages: true,
5
  ns: [],
6
  resources: {}
7
});
8
i18next.addResourceBundle('en', 'namespace1', {
9
  key: 'hello from namespace 1'
10
});
11
// or via backend
12
// i18next.loadNamespaces(['myNamespace1', 'myNamespace2'])
13
// i18next.loadLanguages(['de', 'fr'])
14
// etc.
Copied!
Lazy load in memory translations
​i18next-resources-to-backend helps to transform resources to an i18next backend. This means, you can also lazy load translations, for example when using webpack:
1
import i18next from 'i18next';
2
import resourcesToBackend from 'i18next-resources-to-backend';
3
​
4
i18next
5
  .use(resourcesToBackend((language, namespace, callback) => {
6
    import(`./locales/${language}/${namespace}.json`)
7
      .then((resources) => {
8
        callback(null, resources)
9
      })
10
      .catch((error) => {
11
        callback(error, null)
12
      })
13
  }))
14
  .init({ /* other options */ })
Copied!
Load using a backend plugin
Each plugin comes with a set of configuration settings like path to load resources from. Those settings are documented on the individual readme file of each repository.
Here is a sample using the i18next-http-backend to load resources from the server.
1
import i18next from 'i18next';
2
import Backend from 'i18next-http-backend';
3
​
4
i18next
5
  .use(Backend)
6
  .init({
7
    backend: {
8
      // for all available options read the backend's repository readme file
9
      loadPath: '/locales/{{lng}}/{{ns}}.json'
10
    }
11
  });
Copied!
Having a combination of defining resources + having a backend will not implicitly take one or the other source as fallback resources.
If you need some fallback behaviour you may use the i18next-chained-backend. A short example can be found here.
With i18next-chained-backend you can also create some caching behaviour.
​What's a plugin?​
Load using a smart backend plugin serving directly from a CDN​
Just use the i18next-locize-backend to load resources from the CDN.
1
import i18next from 'i18next';
2
import Backend from 'i18next-locize-backend';
3
​
4
i18next
5
  .use(Backend)
6
  .init({
7
    backend: {
8
      projectId: '[PROJECT_ID]',
9
      apiKey: '[API_KEY]',
10
      referenceLng: '[LNG]'
11
    }
12
  });
Copied!
​Here you can find a step by step guide with a React.js app, which will unleash the full power of i18next in combination with locize.
See how your developer experience with this localization workflow could look like.
There's also the possibility to have an even more focused developer experience, with the help of the auto-machinetranslation workflow and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also automatically translated into the target languages using machine translation (like Google Translate).
​locize is the perfect translation management tool for your i18next project
➡️ i18next + locize = true continuous localization​