Add a new language

Why?

You may want to add a new language to your app to make your content available to a larger audience.

How?

Add the translation files

First, you will have to add the JSON translation files under the src/locales/<yourLanguageCode> folder, with yourLanguageCode being a country's alpha2 code (de for instance), or a value allowed by React i18next (opens in a new tab).

Import translations in the index

All translation files are referenced in the src/locales/index.ts file. You need to import the new folder you created, for instance, for german :

import de from "@/locales/de";

and add it to the default export :

export default { en, fr, ar, sw, de } as const;

Import the dayjs locale

Start UI is using dayjs to format dates, and each country has its own specificities for displaying dates, so you need to import the new locale's plugin in the src/locales/index.ts file, for instance :

import "dayjs/locale/de";

You can find the available plugins here (opens in a new tab)

Add the language to the list of user's available languages

Finally, you need to add the language to the AVAILABLE_LANGUAGES list in src/lib/i18n/constants.ts, in order to make the language appear in the Select when creating an account.