Adding new translations | Remix Supabase SaaS Kit

Learn how to add new translations to your Remix Supabase SaaS project.

Translations are stored at application level and can be found at apps/web/public/locales. Translations for English (which is the only language provided by default) will be found at apps/web/public/locales/en.

If you wish to provide a new language, there are two steps.

1. Add the language files

Create a new folder using the correct language code at apps/web/public/locales/[lng] where [lng] can be any correct language code, such as de, it, es, ja, etc.

2. Update settings

Add the language to the settings file at apps/web/lib/i18n/i18n.settings.ts:

/**
* The list of supported languages.
* By default, only the default language is supported.
* Add more languages here if needed.
*/
export const languages: string[] = [defaultLanguage, 'es'];

In the above, I appended the language es to the languages array. You can add as many languages as you need.

3. Add new namespaces

If you want to add a new namespace (for example, chatbots.json) where you will store translations for chatbots, you can do so by creating a new file in the apps/web/public/locales/[lng] directory. For example, apps/web/public/locales/en/chatbots.json.

Then, you register the new namespace in the i18n.settings.ts file:

export const defaultI18nNamespaces = [
'common',
'auth',
'account',
'teams',
'billing',
'marketing',
'chatbots',
];

In the example above, the chatbots namespace is added to the defaultI18nNamespaces array. And that's it! You can now start adding translations to your new namespace.