Ready to take i18next to the next level?
Add or Load Translations

Add or Load Translations
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 request to loading translations from databases or filesystem in nodejs.
Add on init
You can add the translations on init
import i18next from 'i18next';
​
i18next
  .init({
    resources: {
      en: {
        namespace1: {
          key: 'hello from namespace 1'
        },
        namespace2: {
          key: 'hello from namespace 2'
        }
      },
      de: {
        namespace1: {
          key: 'hallo von namespace 1'
        },
        namespace2: {
          key: 'hallo von namespace 2'
        }  
      }
    }
  });
Add after init
You can add the translations after init
import i18next from 'i18next';
​
i18next.init({ resources: {} });
i18next.addResourceBundle('en', 'namespace1', {
  key: 'hello from namespace 1'
});
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.
Load using a backend plugin
Each plugin comes with a set of on 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.
import i18next from 'i18next';
import Backend from 'i18next-http-backend';
​
i18next
  .use(Backend)
  .init({
    backend: {
      // for all available options read the backend's repository readme file
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    }
  });
Principles - Previous
Plugins
Next - How to
Caching
Last updated 9 months ago