react-i18nextとは？React向けi18next Binding

ページ内ナビ

概要

react-i18nextはi18next coreをReact component modelへ接続するbindingです。useTranslation hook、Trans component、I18nextProvider、initReactI18nextを使い、translation key/resourceをReact UIへ組み込みます。SSR helperやReact Native対応も持ち、coreのi18n設計をReact applicationで再利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

useTranslationでcomponentからt()とactive i18n instanceを利用する

hookを使ってtranslation functionとi18next instanceへアクセスし、component内のhard-coded stringをtranslation keyへ置き換えられます。

出典：[1][3]

Transでmarkupを含むtranslationをReact elementとして構成する

Trans componentはstrong/link等を含むmessageをtranslation resourceとReact elementへ対応付け、単純なtext置換では扱いにくいrich contentを表現できます。

出典：[1][3]

provider・plugin・SSR helperでapplication lifecycleへ統合する

initReactI18nextでi18next instanceをReact向けに初期化し、I18nextProviderでinstanceを渡せます。withSSR/useSSRもexportされ、server-rendering構成へ統合できます。

出典：[3][2]

向いている用途

既存i18next resourceをReact/React Native UIで共有したい場合に向く

translation key/resourceとlanguage detection/backend等をi18next側へ集約しつつ、React componentではhook/component APIだけを使いたいapplicationに適します。

出典：[1]

導入前の確認

17.0.15はi18next 26.2以上とReact 16.8以上を要求する

package metadataはi18next >=26.2.0、React >=16.8.0をpeer dependencyとして定義し、TypeScript 5/6/7をoptional peerにしています。

出典：[2]

translation management SaaSはbindingの必須条件ではない

READMEはLocize等を案内しますが、同時にi18nextはそれらなしでも利用できることを明記しています。core bindingとtranslation operation/SaaSは分離して評価してください。

出典：[1]

参考にした公式資料

[1]react-i18next v17.0.15 README(2026-10-05)
[2]react-i18next 17.0.15 package metadata(2026-10-05)
[3]react-i18next 17.0.15 exports(2026-10-05)
[4]react-i18next v17.0.15 tag commit(2026-10-05)
[5]react-i18next MIT license(2026-10-05)

編集部からの補足

i18next coreとは別repository・別packageです。Locize等のtranslation management serviceは必須ではなく、採用しない場合でもreact-i18nextとi18nextだけで利用できます。

3ステップで試す

1
react-i18next 17.0.15とi18nextを固定して導入する
一時npm projectへReact binding、i18next core、React peer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/react-i18next.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact react-i18next@17.0.15 i18next@26.4.2 react@19.2.0 react-dom@19.2.0
2
translation resourceをReactへ接続する
外部translation serviceへ接続せず、inline resourceとuseTranslationを使う最小server-render例を作ります。
printf '%s\n' "import React from 'react'" "import {renderToStaticMarkup} from 'react-dom/server'" "import i18next from 'i18next'" "import {I18nextProvider,initReactI18next,useTranslation} from 'react-i18next'" "const i18n=i18next.createInstance()" "await i18n.use(initReactI18next).init({lng:'ja',resources:{ja:{translation:{hello:'こんにちは'}}}})" "function App(){const {t}=useTranslation();return React.createElement('span',null,t('hello'))}" "console.log(renderToStaticMarkup(React.createElement(I18nextProvider,{i18n},React.createElement(App))))" > demo.mjs
3
translated markupを検証する
I18nextProvider配下のcomponentがresourceからtranslationを取得し、期待するmarkupを出力することを確認します。
test "$(node demo.mjs)" = '<span>こんにちは</span>'

公式READMEで確認

成長

成長の推移 · 直近30日

10,051 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 5
Open PR: 0

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
react-native
translation
internationalization
i18n
i18next
ssr

Stars: 10,051
Forks: 1,048
Watchers: 43
Open Issues: 1
Contributors: 190
所有者種別: Organization
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/05