I have multiple namespaces and multiple different language files, but we might have much more and it's going to be tremendously large, I want to know if there's a simpler or better-organized way. Currently, I import every namespace from every single language, so I import them like so:

// auth
import auth_de from './de/auth.json';
import auth_en from './en/auth.json';
import auth_es from './es/auth.json';
import auth_fr from './fr/auth.json';
import auth_it from './it/auth.json';
import auth_pt from './pt/auth.json';
import auth_zh from './zh/auth.json';
// global
import global_de from './de/global.json';
import global_en from './en/global.json';
import global_es from './es/global.json';
import global_fr from './fr/global.json';
import global_it from './it/global.json';
import global_pt from './pt/global.json';
import global_zh from './zh/global.json';

Then I create the resource file for each language:

const resources = {
  de: {
    auth: auth_de,
    global: global_de,
  },
  en: {
    auth: auth_en,
    global: global_en,
  },
  es: {
    auth: auth_es,
    global: global_es,
  },
  fr: {
    auth: auth_fr,
    global: global_fr,
  },
  it: {
    auth: auth_it,
    global: global_it,
  },
  pt: {
    auth: auth_pt,
    global: global_pt,
  },
  zh: {
    auth: auth_zh,
    global: global_zh,
  },
};

In this example, I have 7 languages and 2 namespaces, but we might have more languages in the future but we'll definitely have more namespaces, I'd guess around 15, so this file is going to be incredibly large, is there any better way to organize it?

CodePudding user response：

Personally, I would lazy load the translations with a backend plugin like i18next-http-backend (or i18next-locize-backend)?

There's a nice react guide that shows how to separate translations from code and lazy load them, here. And the usage on how to use multiple namespaces with react-i18next.