This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation
DocumentationNext.js and Supabase

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.

Adding a new translation string

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

  1. Open the public/locales/en/common.json file and add the new translation string:
{
  "new_translation_string": "This is a new translation string"
}

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

  1. Using the Trans component from ~/core/ui/Trans
  2. Using the useTranslation hook from react-i18next

For example, using the Trans component:

<Trans i18nKey="common:new_translation_string" />

or using the useTranslation hook:

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