Adding a new translation string

Adding new translations to your application is easy. This guide will show you how to add a new translation string to your application.

The translations of the application are stored at public/locales/<en>.

We have various translations languages JSON files by default (only in English):

public/locales/en/common.json - where we store the common translations
public/locales/en/auth.json - where we store the auth translations
public/locales/en/profile.json - where we store the profile settings translations
public/locales/en/organization.json - where we store the organization settings translations
public/locales/en/subscription.json - where we store the subscription settings translations

You can keep adding translations to these files if you wish, or create new bundles for your translations.

Let's say we want to add a new translation string to the common.json file.

Open the public/locales/en/common.json file and add the new translation string:

json

{
  "new_translation_string": "This is a new translation string"
}

You can then reference this key in your application like this:

For example, using the Trans component:

tsx

<Trans i18nKey="common:new_translation_string" />

or using the useTranslation hook:

tsx

const { t } = useTranslation();
const newTranslationString = t('common:new_translation_string');