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.