Adding and updating locales in your Makerkit application

Much of the MakerKit's codebase uses translations using the packagesreact-i18next and i18next:

• this package allows you to create multi-language apps effortlessly
• it also helps easily renaming the Makerkit's entities according to your preferences: for example, renaming "organizations" to another entity such as "team" or "workspace"
• in a way, it helps write cleaner HTML

To add or update the default strings, you must use the locale files at public/locales/{lang}/{file}.json. For example, all the locale files for the English language are placed under public/locales/en.

The locales are split by functionality, page, or entity: as your application grows, you may not want to load every JSON file to reduce your bundle size.

For example, the translations for the authentication are placed in auth.json, while the ones used across every page are placed under common.json.

If you are unsure where to add some translations, simply add them to common.json.

Adding new languages

By default, Makerkit uses English for translating the website's text. All the files are stored in the files at /public/locales/en.

Adding a new language is very simple:

1. Translation Files: First, we need to create a new folder, such as /public/locales/es, and then copy over the files from the English version and start translating files.
2. i18n config: We need to also add a new language to the Remix configuration at app/i18n/i18n.config.ts. Simply add your new language's code to the languages array.

The configuration will look like the below:

const i18Config = {
 fallbackLanguage: DEFAULT_LOCALE,
 supportedLanguages: [DEFAULT_LOCALE, 'es'],
 defaultNS: ['common', 'auth', 'organization', 'profile', 'subscription'],
 react: { useSuspense: false },
};

To add new locale files by default, add them to the i18Config.supportedLanguages array.

Setting the default Locale

To set the default locale, simply update the environment variable DEFAULT_LOCALE stored in .env.

So, open the .env file, and update the variable:

DEFAULT_LOCALE=de

Using the Language Switcher

The MakerKit kits come with a language switcher that allows users to switch between the available languages. This is not enabled by default, but you can easily add it anywhere in your application by importing the LanguageSwitcherDropdown component from ~/components/LanguageSwitcherDropdown.

It does not require any props, and it will automatically detect the available languages and display them in a dropdown.

If you want to customize the language switcher or use a different component, you can leverage the useChangeLanguage hook to change the language and store the selection as a cookie, which will then be used to set the default language.