To add i18n text and translations to your component, you can follow these steps:

• Add English text to your component
• Regenerate translation files
• Add translations

1. Adding text to your component

Inside your component, add the English text as plain strings directly in the JSX code or assign them to variables/constants. For example:

⚠️ DANGER The variable name must be t. Otherwise, the translation will not be detected by i18next-parser introduced below.

import { useT } from "@react/i18n"

// ...
// inside React component
const t = useT();

return (
    <Text size="s">
        {t("We like maps")}
    </Text>
);

Regenerate translation files

After adding the English text to your component, you can regenerate the i18n translation files by following these steps:

1. Open your terminal or command prompt.

2. Navigate to the root directory of your Re:Earth project.

3. Run the following command:

   yarn i18n
   

   This command will execute the i18next-parser tool, which will parse your codebase for text marked for translation and update the translation files accordingly.

4. The translation files will be regenerated based on the updated source code. Existing translations will be retained, and new text will be added for translation.

By running the yarn i18n command, you ensure that your translation files are up to date with the latest changes in the codebase, allowing you to manage translations effectively in Re:Earth.

Add translations

Once you have regenerated the i18n translation files, you can proceed to update the translations for your new text. Here's how you can do it:

1. Open the src/i18n/translations/en.yml file in a text editor.
2. Locate the key corresponding to your new text. In this case, it would be the key associated with the English text 'We like maps'.
3. In the same directory, open the ja.yml file, which contains the translations for the Japanese language.