Translations

Learn how to easily translate your Remix Firebase Makerkit SaaS into multiple languages with our guide. Optimize your app and reach a wider audience.

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. Remix i18n config: We need to also add a new language to the Remix configuration at app/i18n/i18next.config.ts. Simply add your new language's code to the supportedLanguages array.

The configuration will look like the below:

app/i18n/i18next.config.ts
const i18Config = { fallbackLanguage: DEFAULT_LOCALE, supportedLanguages: [DEFAULT_LOCALE, 'es'], defaultNS: ['common', 'auth', 'organization', 'profile', 'subscription'], react: { useSuspense: false }, };

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:

.env
DEFAULT_LOCALE=de

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS