Skip to main content
Internationalization is the process of designing your project to support multiple languages and regions. It will be provided by Experro’s basetheme, integrated for the default channel in English - United States with the language code en-us. you can take a look at the main configoration files, under 
src
 └── locale
      ├── en.json
      └── index.ts
en.json Contains, It will have just normal json object like, 
{
  "translation": {
      "common": {
        "model_select_msg": "Please select a record"
      }
    // Object keys for internalization,
  }
}
index.ts
When creating a new config file for another language, remember to add an entry in the index.ts file of the locale folder. 
import en from './en.json';

// NOTE 1 : Ensure that each key in the following object is formatted according to the specified pattern: "en-US" or 'en-MX'.
//          The language code before the '-' should be lowercase, while all characters after the '-' should be uppercase.

// NOTE 2 : Ensure that the object name 'exp_lang' remains unchanged; otherwise, it may not function as expected.
// NOTE 3 : For the default or fallback language, use the key 'en' exclusively, as demonstrated in the following object.
const exp_lang: any = { 'en-US': en };

export { exp_lang };
That’s all for setting up internationalization and configuration. Here’s how you can use internationalization during theme development: 
import { useTranslation } from 'react-i18next';

const ExpBanner = () => {
    const { t } = useTranslation();

    return (
        <div>
            Next word is translated: {t('common.model_select_msg')}
        </div>
    );
}
That’s all—it’s that easy to use!