How do I translate my React website?

Use an i18n library like react-i18next (replace text with t() keys and maintain a file per language), or add a translation script such as ConveyThis to index.html to translate the rendered app without code changes.

What is the best translation library for React?

react-i18next is the most widely used option and works with hooks via useTranslation. Other libraries exist, but the concepts (keys, locale files, interpolation, plurals) are the same.

Does ConveyThis work with React Router and dynamic content?

Yes. The script tracks client-side route changes and watches for newly rendered content, so new views and updated text are translated.

Is Google Translate a good way to translate a React site?

Browser translation helps individual visitors but creates no indexable pages and gives you no control over quality. Google's own website widget has been limited to non-commercial use since 2020.

How do I keep some React components untranslated?

With ConveyThis, add className="conveythis-no-translate" to the element. With react-i18next, don't pass that text through t().

React Web サイトを翻訳する方法（i18next または No-Code）

この投稿を次のように要約します: 7分で読めます

チャットGPT

困惑

グロック

Google AI

React Web サイトを翻訳するには 2 つの方法があります。コードルートは react-i18next などの i18n ライブラリです。ハードコードされたテキストをキーに置き換えて呼び出します t('key') を通して useTranslation フックし、言語ごとに翻訳ファイルを維持します。ノーコードルートは Web サイトの翻訳レイヤーです。HTML エントリファイルに 1 つのスクリプトを追加すると、クライアント側のナビゲーション後に表示されるビューを含む、レンダリングされたアプリが翻訳されます。react-i18next は、開発者がテキストを所有し、コードベースにテキストを含めるチームに適しています。CMS や API のコンテンツなど、サイト全体を多くの言語で必要とする場合、翻訳レイヤーの方が高速になります。

主なポイント

react-i18next（i18next 上に構築）は、最も一般的な React i18n セットアップです npm install react-i18next i18nextで初期化します initReactI18next、その後使用 const { t } = useTranslation().
I18n ライブラリは文字列を翻訳します。翻訳者、言語 URL、hreflang、CMS または API コンテンツのプランがまだ必要です。
ConveyThis コードの変更は必要ありません。スニペットを貼り付けます index.html言語を選択し、ビジュアルエディターで翻訳を編集します。React Router ナビゲーションに従い、新しくレンダリングされたコンテンツを翻訳します。
クライアント側のみのレンダリングでは、あらゆる方法で多言語 SEO が制限されます。他の言語での検索トラフィックが重要な場合は、サーバーレンダリング（Next。js など）またはプリレンダリングを使用します。

オプション1: react-i18nextでReactアプリを翻訳する

の react-i18next 入門ガイド最小限のセットアップを示します。

1。インストール

npm install react-i18next i18next --save

2。i18next を設定する

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3。エントリポイントで一度インポートします

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(<App />);

4。コンポーネントでフックを使用する

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

ガイドにあるように、“useTranslation フックを使用して t 関数を取得します。” 大規模なアプリの場合は、すべての言語をバンドルするのではなく、翻訳を名前空間に分割し、オンデマンドでロードします（バックエンドプラグインなど）。

I18nライブラリはあなたに何をもたらすのか

誰かがすべてのキーをあらゆる言語で書き、英語のコピーが変更されるたびに更新する必要があります。不足しているキーは静かにデフォルトの言語に戻ります。
製品の説明、ブログ投稿、CMS コンテンツはコードに含まれていないため、独自のローカリゼーションプロセスが必要です。
言語 URL を構築します。ルートに言語を入力します(/de/pricing) React Router またはフレームワークのルーティングを使用し、同期を保ちます i18n.language。Googleは、Cookieやブラウザの設定で切り替えるのではなく、言語ごとに別々のURLを推奨しています(Google検索セントラル).
フレフランも扱っており、 <html lang>。各言語バージョンはそれ自体と他のすべてをリストする必要があります。そうしないと、Google はタグを無視します (Google検索セントラル)。アップデート document.documentElement.lang 言語の変化について。
価格と日付が必要です Intl.NumberFormat そして Intl.DateTimeFormat （または i18next のフォーマット）。

React i18nのベストプラクティス

説明キーを使用する(checkout.pay) キーとして完全な英語の文を使用するのではなく。
翻訳された断片を連結して文を構築しないでください。翻訳者が単語の順序を変更できるように補間を使用してください。
I18next の複数形の処理を使用します。多くの言語には 3 つ以上の複数形があります。
翻訳できない画像や SVG にテキストを入れないでください。
アラビア語またはヘブライ語が必要な場合は、長い文字列を設計し、右から左へのレイアウトを早期にテストしてください。
キーが英語には存在するが他のロケールには存在しない場合に失敗する CI チェックを追加します。

オプション 2: コードなしで ConveyThis を使用して React サイトを翻訳します

すべてのコンポーネントをリファクタリングしたくない場合、またはコンテンツの大部分がCMSまたはAPIから来ている場合は、 ConveyThis React アプリをレンダリング時に翻訳できます。

セットアップには 5 つの手順が必要です

ConveyThis アカウントを作成しますそしてドメインを追加します。
ソース言語とターゲット言語を選択し (210 がサポートされています）、保存します。
ダッシュボードから JavaScript スニペットをコピーします。の React インストールガイド各画面を歩き回ります。
閉じる前にHTMLエントリファイルに貼り付けます </head> または </body> タグ: public/index.html Create React App プロジェクトで、または index.html Vite プロジェクトのプロジェクトルートで。
展開する。言語スイッチャーが表示され、サイトが自動的に翻訳されます。

シングルページアプリでは、スクリプトはロード後に追加または変更されたコンテンツがないかページを監視し、クライアント側のルート変更（履歴 API ナビゲーションとハッシュの変更）に従います。React Router が新しいビューをレンダリングしたり、状態が更新されて新しいテキストが追加されたりすると、ConveyThis がそれを翻訳します。コンポーネントは何も呼び出す必要はありません。

出力を制御し続けます:

ビジュアルエディターを使用して、コンテキスト内の任意の文を編集します。
製品名と固定用語（有料プラン）の用語集ルールを設定し、承認された翻訳を翻訳メモリで再利用します。
で要素を除外します conveythis-no-translate クラス、例えばユーザー名、コードサンプル、自分でフォーマットした価格(セグメントを除外する方法).
チームの役割を持つ各言語のレビュアーを招待します。

JSX では、除外は次のようになります

<span className="conveythis-no-translate">{user.displayName}</span>

React サイトの SEO

クライアントレンダリングされた React アプリは、ほぼ空の HTML シェルを送信し、ブラウザでページを構築します。どちらの翻訳方法を使用する場合でも、それが多言語 SEO の主な障害となります。

他の言語でのオーガニックトラフィックが重要な場合は、サーバー上またはビルド時にコンテンツをレンダリングします（Next。js、または事前レンダリングステップ）。
各言語に独自のURLを指定します。ConveyThis サブフォルダ、サブドメイン、または ?lang パラメータを指定し、hreflang タグを自動的に追加し、タイトル、メタ説明、JSON-LD を翻訳します。見る多言語SEO.
翻訳された URL に対する Search Console の URL 検査を使用して、Google が表示するものを確認します。

react-i18next と翻訳レイヤー

	react-i18next	ConveyThis
コードの変更	すべての文字列がに置き換えられました `t()` キー	1つのスクリプトタグ
誰が翻訳するのか	チームまたは翻訳者を JSON ファイルで表示します	機械翻訳初稿、視覚的に編集
CMS / API コンテンツ	別プロセス	ページとともに翻訳
新しいコンテンツ	すべてのロケールにキーを追加します	自動的に検出され、翻訳されます
URL と hreflang	あなたがそれらを構築します	に建て
に最適	開発者が所有するアプリUI	コンテンツの多いサイト、マーケティングページ、多くの言語

多くのチームが、ログインした製品 UI に react-i18next を使用し、マーケティングサイト、ドキュメント、CMS コンテンツに翻訳レイヤーを使用しています。

コンセプトの背景については、を参照してください国際化（i18n）ガイド。Vueでも働いている方は、 Vue。jsウェブサイトの翻訳方法。アプリが Angular の場合、別のアプリがあります Angular 統合.

よくある質問

React Webサイトを翻訳するにはどうすればよいですか？

React-i18nextのようなi18nライブラリを使用する（テキストを t() キーを使用して言語ごとにファイルを維持するか）、または ConveyThis などの翻訳スクリプトを追加します index.html コードを変更せずにレンダリングされたアプリを翻訳します。

Reactに最適な翻訳ライブラリは何ですか？

react-i18nextは最も広く使用されているオプションであり、フックを介して動作します useTranslation。他のライブラリも存在しますが、概念（キー、ロケールファイル、補間、複数形）は同じです。

ConveyThis React Router と動的コンテンツで動作しますか？

はい。スクリプトはクライアント側のルート変更を追跡し、新しくレンダリングされたコンテンツを監視するため、新しいビューと更新されたテキストが翻訳されます。

Google翻訳はReactサイトを翻訳する良い方法ですか？

ブラウザ翻訳は個々の訪問者に役立ちますが、インデックス可能なページは作成されず、品質を制御することもできません。Google 独自の Web サイトウィジェットは、2020 年以降、非営利目的での使用に限定されています。

一部の React コンポーネントを翻訳せずに維持するにはどうすればよいですか？

ConveyThis で追加します className="conveythis-no-translate" 要素に。react-i18nextでは、そのテキストを渡さないでください t().

Reactアプリで試すには、 ConveyThis アカウントを作成しますそして、スニペットをあなたのものに貼り付けます index.html.