在 i18n 中为同一语言环境使用两种语言代码

Question

I am utilizing i18n to render translations English/Japanese -- My default language is English in en . but recently realized my website is not using the correct ISO language code for Japanese. jp instead of ja .

I am wondering if it's possible to have two language codes in i18n reference the same locale files -- and perplexed how to do this.

For example, I'd like /whatever?lng=jp and /whatever?lng=ja to work for Japanese text.

Here are my configs:

i18nConfig.js

const path = require("path");

module.exports = {
  fallbackLng: "en",
  preload: ["en", "ja", "jp"],
  ns: [
    "localefiles"
  ],
  backend: {
    loadPath: path.join(__dirname, "locales", "{{lng}}", "{{ns}}.json"),
    addPath: path.join(__dirname, "locales", "{{lng}}", "{{ns}}.missing.json"),
  },
};

i18n.js

const i18n = require("i18next");
const XHR = require("i18next-xhr-backend");
const LanguageDetector = require("i18next-browser-languagedetector");

const options = {
  fallbackLng: "en",
  load: "languageOnly",

  ns: ["common"],
  defaultNS: "common",

  debug: process.env.NODE_ENV !== "production" && false,
  saveMissing: true,

  interpolation: {
    escapeValue: false,
    formatSeparator: ",",
    format: (value, format) => {
      if (format === "uppercase") {
        return value.toUpperCase();
      }
      return value;
    },
  },
};

if (process.browser) {
  i18n.use(XHR).use(LanguageDetector);
}

if (!i18n.isInitialized) {
  i18n.init(options);
}

if (i18n.initialLanguage == "jp") {
  console.log({i18n})
  i18n.setLng("ja");
}

i18n.getInitialProps = (req, namespaces) => {
  if (!namespaces) {
    namespaces = i18n.options.defaultNS;
  }
  if (typeof namespaces === "string") {
    namespaces = [namespaces];
  }

  req.i18n.toJSON = () => null;

  const initialI18nStore = {};
  req.i18n.languages.forEach((lan) => {
    initialI18nStore[lan] = {};
    namespaces.forEach((ns) => {
      initialI18nStore[lan][ns] = req.i18n.services.resourceStore.data[lan]
        ? req.i18n.services.resourceStore.data[lan][ns] || {}
        : {};
    });
  });
  return {
    i18n: req.i18n,
    initialI18nStore,
    initialLanguage: req.i18n.language,
  };
};

module.exports = i18n;

Thanks so much for help on this basic question.

Answer 1

You can define backend.loadPath as a function which gets langs & namespace and returns a string with the path to the file.

// i18next.js

const i18n = require('i18next');
const XHR = require('i18next-xhr-backend');
const LanguageDetector = require('i18next-browser-languagedetector');

const options = {
  fallbackLng: 'en',
  load: 'languageOnly',

  ns: ['common'],
  defaultNS: 'common',

  debug: process.env.NODE_ENV !== 'production' && false,
  saveMissing: true,
  backend: {
    loadPath(lng, ns) {
      if (lng === 'jp') {   // <---
        return '/locales/ja/{{ns}}.json';
      }
      return '/locales/{{lng}}/{{ns}}.json';
    },
    addPath: path.join(__dirname, 'locales', '{{lng}}', '{{ns}}.missing.json'),
  },
  interpolation: {
    escapeValue: false,
    formatSeparator: ',',
    format: (value, format) => {
      if (format === 'uppercase') {
        return value.toUpperCase();
      }
      return value;
    },
  },
};