i18nextは、ウェブアプリケーションを複数の言語に簡単に翻訳できるようにする、人気の国際化ライブラリです。 世界中のユーザーをサポートしたいReactおよびNext.js開発者にとって素晴らしい選択です。 この記事では、i18nextがReactやNext.jsアプリケーションにどのように簡単に統合できるかについて詳しく説明します。
まず、i18nextの概要について簡単に説明します。 それは、翻訳の読み込みと管理のためのシンプルなAPIを提供するJavaScriptライブラリです。 ReactやNext.jsを含むさまざまなフロントエンドフレームワークとともに使用できます。 i18nextは、複数形、文脈、補間など、多くの機能を標準でサポートしています。 それはまた、JSONファイルやバックエンドAPIなど、さまざまなソースからの翻訳の読み込みもサポートしています。
i18nextをあなたのReactまたはNext.jsアプリケーションに統合するには、まずインストールする必要があります。 これを行うには、npmまたはyarnを使用して次のコマンドを実行します：
npm install i18next
または
yarn add i18next
i18nextをインストールしたら、アプリケーションで使用し始めることができます。 i18nextをReactと一緒に使う最も簡単な方法の一つは、 useTranslation フック。 このフックは、翻訳を読み込み、コンポーネント内のテキストを翻訳する便利な方法を提供します。
こちらは使い方の例です useTranslation Reactコンポーネントにおけるフック：
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
この例では、私たちはインポートしています useTranslation フックからの react-i18next パッケージ。 次に、それを使って翻訳を読み込み、翻訳関数を取得します（tコンポーネント内のテキストを翻訳するために使用できるもの
次に、私たちはそれを使用することができます t 翻訳するための関数 title そして description 私たちの翻訳ファイルからの文字列。 翻訳ファイルはこのようなJSONファイルです：
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentCは、i18next FluentCプラグインを使用して複数の言語を自動的に構築できます。
この例では、英語とフランス語の2つの翻訳があります。 これらの翻訳を私たちのアプリケーションにロードすることができます。 i18next 図書館
翻訳を読み込むには、私たちはを使用できます i18next 物体とその init 関数。 こちらが例です。
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
この例では、JSONファイルから英語とフランス語の翻訳をインポートしています。 私たちはこれらの翻訳を使用してi18nextを初期化し、デフォルトの言語を英語に設定しています。 私たちはまた、翻訳で変数を使用できるように補間設定を構成しています。
翻訳を読み込み、i18nextの設定を終えたら、次のように使用を開始できます。 useTranslation コンポーネント内のテキストを翻訳するためのフック
Next.jsアプリケーションでは、i18nextを統合するために同じ方法を使用できます。 翻訳をロードできます。 getStaticProps または getServer