i18next
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // 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: 'en',
      //fallbackLng: false,
      debug: false,
      useSuspense: false,

      saveMissing: true,

      missingKeyHandler: (lngs, ns, key, fallbackValue) => {
        // Handle the missing key, for example, log it to the console

        console.warn(
          `Missing translation for key: "${key}" in namespace: "${ns}" for languages: "${lngs.join(
            ', '
          )}". Fallback value: "${fallbackValue}"`
        );
      },

      interpolation: {
        escapeValue: false // not needed for react as it escapes by default
      },
      // react-i18next options
      react: {
        useSuspense: false,
        bindI18n: 'languageChanged',
      },
      backend: {
        loadPath: '/locales/{{lng}}/{{ns}}.json'
      },
      load: 'languageOnly' // only load main language code, not country specific

    }
  );