Skip to main content

i18n

No one modern app can avoid multi language support. Framework supports internalization out of the box.

All internalization based on i18next library

Detectors​

As we are talking about languages then we need some way for the codebase to understand what language the user should use.

That feature is called detectors.

Order of detection:

  • X-Lang header
  • Query
  • User

X-Lang header detector​

This detector will parse “X-Lang” header on request to detect user language. Frontend should add here user language (“en”,”fr”, etc) and if backend support it that app will use given user language

tip

“xLang” preferred way to work with languages on framework

Example for frontend with axios

axios.get("https://example.com/getSomething", {
  headers: {
    "X-Lang": "en", // Added language
  },
});
const api = axios.create({
      baseURL: process.env.APP_SERVER_URL,
      headers: {
        'Content-Type': 'application/json',
        'X-Lang': 'en' // Added language
      },

 // change it after
api.defaults.headers.common['X-Lang'] = 'fr';

Query detector​

Query is a simple detector. Just add the 'lookupQuerystring' parameter to your query string. 'lookupQuerystring' by default is lng, but you can change it as you want inside config file

const res = await fetch("httsp://someUrl.com?lng=en");

User detector​

User detectors try to find authorized users (that provided by middleware) and grab ‘locale field’ from this user.

Adding own detector​

That time you are not able to add your own detector. Please contact us if you need that option and we will be happy to help you

Configuration​

Please look at the ‘config/i18n.js’ file for all configuration options. There are limited amount of options available

Language files​

All files in JSON format located on ‘src/locales/{localeCode}/translations.json’

note

Bakends beside files not supported

You can find details documentation about json files on i18next json documentation

API​

Framework provides easy integration for controllers. You can grab i18n instance with

req.appInfo.i18n;
req.appInfo.i18n.language; // current language
req.appInfo.i18n.t("some.phrase"); // translate some phrase https://www.i18next.com/overview/api#t
tip

You can pass controller ‘request’ errors as strings for internalization. And it be processed with i18next

class SomeController extends AbstractController {
  get routes() {
    return {
      post: {
        "/login": {
          handler: this.postLogin,
          request: yup.object().shape({
            email: yup.string().email().required("auth.emailProvided"), // <-- look here i18n
          }),
        },
      },
    };
  }
}