Refineでコア機能部分で提供されているメッセージを日本語化する

Refineを使っていて、テンプレート部分を編集すれば画面のメインの部分は日本語化できますが、それではコア機能に近いところは日本語化できません。

例えばサイドバーの「Logout」ですとか、操作系の「Edit」や「Delete」などはテンプレートファイルには記載がなく、日本語化できません。

これらのラベルを日本語化するにはi18nの仕組みを使う必要があります。

i18n 化

これからRefineをインストールする場合には、下記のように --i18n オプションを付与してインストールします。

npm create refine-app@latest my-app --i18n

すでにインストール済みの場合には下記のようにすると必要なパッケージがインストールされます。

npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend

その上でi18nの初期化とi18nプロバイダを渡すようにします。

src/i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import ja from "./locales/ja/common.json";

  .use(initReactI18next)
  .init({
    lng: "ja",
    fallbackLng: "ja",
    resources: { ja: { translation: ja } },
    detection: { /* ブラウザ言語検出オプション */ },
    backend: { /* JSON ファイル読み込みオプション */ },
  });

export default i18n;

src/App.tsx

import "./i18n";
import { useTranslation } from "react-i18next";
import { Refine, I18nProvider } from "@refinedev/core";

const App: React.FC = () => {
  const { t, i18n } = useTranslation();
  const i18nProvider: I18nProvider = {
    translate: (key, params) => t(key, params),
    changeLocale: lang => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <Refine
      /* …既存の dataProvider, authProvider など… */
      i18nProvider={i18nProvider}
    >
      {/* 既存のルーティング/レイアウト */}
    </Refine>
  );
};

実際の翻訳対応ファイルを作成します。
元ファイルは下記から拾ってきました。

このファイルを元にAIに「日本語にして」といったファイルが下記になります。

これを vite-app-ant/src/locales/ja/common.json に置くと日本語化されます。