Internationalization (i18n)

Internationalization (i18n) is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes. Our application uses the i18next library along with the

react-i18next

framework to facilitate internationalization.

Adding Translations

To add a new language to the application, follow these steps:

1. Create Translation File:

In the

src/i18n/translations

directory, create a new TypeScript file with a two-letter language code as the filename (e.g.,

it.ts

for Italian).

2. Translation Object:

Within this file, export a constant object containing key-value pairs of translations. The key will be the token used in the application, and the value will be the translated string.

3. Import Translation:

Import the new translation file into

src/i18n/i18n.ts

4. Add to Resources:

In the resources object of the i18n configuration, add a new key for the language and set its value to

translation: itJson

Example for Italian
it.ts
:

export const it = {
  welcome: "Benvenuto",
  // ... other translations
};

In
i18n.ts
:

import { it } from "./translations/it";

// ... existing imports and configuration

i18n.use(initReactI18next).init({
  resources: {
    // ... existing resources
    it: { translation: it },
  },
  // ... remaining configuration
});

Using Translations

To use the translations in your React components, you can use the

useTranslation

hook provided by

react-i18next

Example usage:

import React from "react";
import { useTranslation } from "react-i18next";

const MyComponent = () => {
  const { t } = useTranslation();

  return <h1>{t("welcome")}</h1>; // 'welcome' is the key in your translation files
};

Fallback Language

The fallbackLng option in the i18n configuration specifies a default language to use if the current language does not have a given translation. By default, this is set to English (en).