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':