Skip to main content

How to add i18n translation

Adding i18n text and translations is relatively easy. The general work flow is:

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

Adding text to your component

In Re:Earth we use the Text component for all our text, so inside that component we will add the English first like so:


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")}

Regenerate translation files

After you are finished adding your text in English within your component, you will need to regenerate the i18n translation files. Do so with the command (i18next-parser will be executed):

yarn i18n

Don't worry, the translations you have already written will be retained even if you regenerate the translation files!

Add translations

At this point the files located inside src/i18n/translations directory will have been updated. A string value specified in the argument of the t function is used as keys.

'We like maps':

Locate your new text inside the en.yml file and with its key locate the corresponding key in the ja.yml file. Input the translations and you are good to go!


When a translation is empty, its key will be displayed in an UI.