ローカリゼーション

ローカリゼーション

組込み翻訳を使って自分のdAppの言語をカスタマイズする

デフォルトでは、RainbowKitは英語使用者のためのen-USロケールをサポートしています。

利用可能であれば、RainbowKitはユーザーの優先言語を検出し、適切な翻訳を選択します。 開発者は常にデフォルトの言語を上書きできます。

ユーザーに言語を指定するには、RainbowKitProviderにlocale="zh-CN"プロップを追加するだけです

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider locale="zh-CN" {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);

RainbowKitのローカリゼーションサポートは、サブパスルーティングともにより良く機能します。

下記の例のようにNext.jsプロジェクトを設定して、/locale/サブパスをルートにオプションで追加すると、検索エンジンとユーザーがあなたの多言語サポートをより良く発見できます。

// next.config.js
{
  i18n: {
    locales: ['default', 'en', 'zh-CN'],
    defaultLocale: 'default',
  },
}

次に、Pages Routerによって提供されたlocaleをRainbowKitProviderに渡します

import { RainbowKitProvider, Locale } from '@rainbow-me/rainbowkit';

export const App = () => {
  const { locale } = useRouter() as { locale: Locale };
  return (
    <RainbowKitProvider locale={locale} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  )
};

Pages Routerの例を参照できます here。

App Routerはまだi18nをサポートしていません。 実装のベストプラクティスについては、別の例を参照してください herenext-intlのミドルウェアについて。

完全なローカリゼーションサポートのために、同じ技術を使用してdAppのコンテンツを翻訳することが推奨されます。 i18n-jsやnext-intlのようなローカリゼーションライブラリとCrowdinのような管理ツールは、このプロセスを簡素化します。

以下のlocale地域に対して完全なサポートを提供します：

追加の言語のサポートを希望する場合は、GitHub Discussionを開いてください。できるだけ早くサポートできるように取り組みます。