Guides
Add new language

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 example).

Initiate the dayjs locale and the zod locale in this file.

Example:

src/locales/de/index.ts
import "dayjs/locale/de";
import zod from "zod-i18n-map/locales/de/zod.json";

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:

src/locales/index.ts
import de from "@/locales/de";

and add it to the default export:

src/locales/index.ts
export default { en, fr, ar, sw, de } as const;

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.