i18nテキストと翻訳を追加するのは比較的簡単です。一般的な作業の流れは:

コンポーネントにテキストを追加

Re:Earthでは、すべてのテキストにTextコンポーネントを使用しているので、そのコンポーネントの中で、次のように英語を最初に追加します:

<aside> 🔥 **DANGER:**変数名がtでないと、以下に紹介するi18next-parserで翻訳が検出されない。

</aside>

import { useT } from "@react/i18n"

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

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

翻訳ファイルを再生成

コンポーネント内に英語のテキストを追加し終えたら、i18n翻訳ファイルを再生成する必要があります。コマンドで行います(i18next-parserが実行されます):

yarn i18n

翻訳ファイルを再生成しても、すでに書いた訳文は保持されますのでご安心ください!

翻訳の追加

この時点で、src/i18n/translationsディレクトリ内のファイルが更新されたことになります。 t関数の引数で指定された文字列がキーとして使われます。

'We like maps':