2025-04-12- translation

Translation Microfrontend

i18n

i18n
  .use(Backend) // load translation using xhr -> see /public/locales. We will add locales in the next step
  .use(LanguageDetector) // detect user language
  .use(initReactI18next) // pass the i18n instance to react-i18next.
  .init({
    fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
    debug: true,
    lng: "en",
    // whitelist: availableLanguages,
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
    backend: {
      loadPath:
        "https://translations-language.s3.us-east-2.amazonaws.com/locales/{{lng}}/{{ns}}.json",
      crossDomain: true,
      allowMultiLoading: true,
    },
    ns,//get all translated word in namespace follow by list of ns then store it in i18n.store.data
    defaultNS: "buying", //use this namespace first 
  });

function

MyTranslation

• send reference word to i18n for output translated word follow by current using language

format

{MyTranslation("greeting")}

changeLanguage

• set new language

example

changeLanguage("jp");

S3

• Store translations of each language in their respective directory.

S3 tree

  /translations-language
    /locales
     /{language_name} 
      -{namespace_name}.json

.json file

• key = reference word
• value = translated word

{
  "greeting": "Hello",
  "text": "Thank you for visiting our website.",
  "language": "Language",
  "Hi": "What's up",
  "Hello": "greeting from translation"
}

Object link

• format

  "https://translations-language.s3.us-east-2.amazonaws.com/locales/Template:Lng/Template:Ns.json"

• example

  "https://translations-language.s3.us-east-2.amazonaws.com/locales/en/buying.json"