How to use the i18next.use function in i18next

loadPath: path.join(serverFolder, "locales", "{{lng}}", "{{ns}}.json"),

			// path to post missing resources
			addPath: path.join(serverFolder, "locales", "{{lng}}", "{{ns}}.missing.json"),

			// jsonIndent to use when storing json files
			jsonIndent: 4
		}
	};

	// In test mode only English enabled!
	if (config.isTestMode()) {
		conf.whitelist = ["en"];
	}

	i18next
		.use(i18nextFs)
		.use(i18nextExpress.LanguageDetector)
		.init(conf, function(err, t) {
			app.t = t;
			if (err)
				logger.warn(err);
		});

	/*i18next.on("languageChanged", function(lng) {
		console.log("languageChanged", lng);
	});

	i18next.on("loaded", function(loaded) {
		console.log("loaded", loaded);
	});	*/

// return the fallback language for no matches
  debug('  no match found, using default language:', defaultLanguage);
  return defaultLanguage;
};

const whitelist = Object.keys(languages).reduce((acc: string[], lang) => {
  acc.push(lang);

  if (lang.includes('-')) {
    acc.push(lang.substring(0, lang.indexOf('-')));
  }

  return acc;
}, []);

i18n.use(initReactI18next).init({
  lng: detectLang(),
  resources,
  whitelist,
  fallbackLng: defaultLanguage,
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

if (isClient) {
    // webpack substitutes based on local dev or prod/integrated JSS service
    const translationPath = SitecoreContentService.getTranslationPath();
    options.backend = {
      loadPath: translationPath,
      parse: (data) => {
        const parsedData = JSON.parse(data);
        if (parsedData.phrases) {
          return parsedData.phrases;
        }
        return parsedData;
      },
    };

    i18n.use(i18nextFetch).init(options);

    if (dictionary) {
      // when using a back-end, need to add static resources after init
      i18n.addResources(language, 'translation', dictionary);
    }
  } else {
    if (dictionary) {
      // load dictionary statically from server
      options.resources = {};
      options.resources[language] = {
        translation: dictionary,
      };
    }

    i18n.init(options);
  }

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-backend
  .use(XHR)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to the react-i18next components.
  // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    keySeparator: false,
    backend: {
      loadPath: '/i18n/{{lng}}.json',
    },

// reload that namespace in given language
            await i18n.reloadResources(lng, ns);
            // trigger an event on i18n which triggers a rerender
            // based on bindI18n below in react options
            i18n.emit('editorSaved');
          },
        },
        react: {
          useSuspense: false, // TODO: Was seeing weird errors without this
          wait: true,
          bindI18n: 'languageChanged editorSaved',
        },
      });
  } else {
    customDebug(`Using local translation files`, 'info');
    initialized = i18n
      // detect user language
      // learn more: https://github.com/i18next/i18next-browser-languageDetector
      .use(LanguageDetector)
      // pass the i18n instance to react-i18next.
      .use(initReactI18next)
      // init i18next
      // for all options read: https://www.i18next.com/overview/configuration-options
      .init({
        fallbackLng: DEFAULT_LANGUAGE,
        resources: locales,
        debug: debugMode,
        keySeparator: false,
        interpolation: {
          escapeValue: false, // not needed for react as it escapes by default
        },
        detection,

context: (app) => (context, cb) => {
    const resources = app.get('locales')
    const { locale } = app.get('config')
    for(let ln in resources) {
      resources[ln] = _.merge({}, ...resources[ln])
    }
    i18next
      .use(XHR) // or any other backend implementation
      .use(Cache) // or any other cache implementation
      .use(LanguageDetector) // or any other implementation
      .init({
        debug: false,
        lng: 'en',
        fallbackLng: false,
        keySeparator: false,
        nsSeparator: false,
        resources,
        ...(locale || {})
      }, (err, t) => {
        moment.locale((locale && locale.moment) || 'en')
        cb(null, { ...context, _t: t, i18n: i18next })
      })
  },

useCookie: false, // using URLs and Sitecore to store language context, don't need a cookie

      interpolation: {
        escapeValue: false, // not needed for react
      },
    };

    if (dictionary) {
      // if we got dictionary passed, that means we're in a SSR context with a server-provided dictionary
      // so we do not want a backend, because we already know all possible keys
      options.resources = {};
      options.resources[language] = {
        translation: dictionary,
      };

      i18n.use(reactI18nextModule).init(options, (error) => {
        if (error) reject(error);
        resolve();
      });
    } else {
      // We're running client-side, so we get translation data from the Sitecore dictionary API using fetch backend
      // For higher performance (but less simplicity), consider adding the i18n chained backend to a local cache option like the local storage backend.

      // eslint-disable-next-line prettier/prettier
      const dictionaryServicePath = `${config.sitecoreApiHost}/sitecore/api/jss/dictionary/${config.jssAppName}/{{lng}}?sc_apikey=${config.sitecoreApiKey}`;

      options.backend = {
        loadPath: dictionaryServicePath,
        parse: (data) => {
          const parsedData = JSON.parse(data);
          if (parsedData.phrases) {
            return parsedData.phrases;

import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import { languages } from './locale/languages'

i18next
	.use(initReactI18next)
	.init({
		fallbackLng: 'en-US',
		lng: 'en-US',
		resources: languages,
		debug: true,
		returnEmptyString: false,
	})
	.then()
	.catch((e: any) => {
		console.log('failed to init i18n:', e)
	})

export default i18next

import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import XHR from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18next
  .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json'
    },
    react: {
      useSuspense: true
    },    
    fallbackLng: 'en',
    preload: ['en'],
    keySeparator: false,
    interpolation: { escapeValue: false }
  })