Reactベースの国際化のためのi18nextの活用

国際化（i18n）は、ソフトウェアのグローバル市場へのリーチを拡大するために不可欠です。JavaScriptエコシステムでは、i18nextが最も効果的なツールの1つです。この記事では、i18next、特にReactとの統合について詳しく説明し、その利点、さまざまなフレームワークとの互換性、およびローカリゼーションの取り組みに役立つヒントを強調します。

i18nextとは？

i18nextは、JavaScriptアプリケーション用の強力な国際化フレームワークです。 Web、モバイル、デスクトップアプリケーションに多言語サポートを追加することを簡素化します。 このフレームワークでは、動的な翻訳管理が可能になり、アプリケーションをさまざまな言語やリージョンに簡単に適応させることができます。

i18nextの利点

• 統合の容易さ

i18nextは既存のプロジェクトに簡単に統合でき、React、Angular、Vueなどの一般的なJavaScriptフレームワークをサポートしています。この汎用性により、開発者の間で好まれる選択肢となっています。

• カスタマイズと柔軟性

i18nextは、開発者が必要な機能のみを使用できるモジュール構造を提供しています。この高いカスタマイズ性は、フレームワークが幅広いプロジェクト要件に適合できることを保証します。

• 翻訳の動的読み込み

フレームワークは翻訳の動的読み込みをサポートしており、必要に応じて必要な言語リソースのみを取得することでパフォーマンスを最適化します。

• 複数形と文脈化

i18nextは、数量または文脈に基づいて言語のバリエーションを正確に処理するための、複数形と文脈化のサポートを組み込みで提供しています。

• さまざまなファイル形式のサポート

• 複数のファイル形式をサポート

JSON や YAML などの複数のファイル形式をサポートすることで、プロジェクトのニーズに最適な形式を選択できます。

• 豊富なエコシステム

活気のあるコミュニティと豊富なエコシステムにより、プラグイン、拡張機能、サポートが提供され、i18next の機能を強化および拡張することで、開発時間と労力を節約できます。

• 複数のバックエンドオプション

i18next は、インメモリ、HTTP、カスタムバックエンドなど、さまざまなバックエンドをサポートしており、さまざまなストレージソリューションとの統合を可能にします。

• アクティブな開発とメンテナンス

定期的な更新と改善により、i18next は Web 開発のベストプラクティスと進化するニーズに対応しています。

React-i18next 統合

i18next の最も人気のある統合の 1 つは、react-i18next バインディングを使用した React への統合です。この組み合わせにより、React コンポーネント内で効率的な国際化が可能になり、動的な言語切り替えとシームレスな翻訳管理が促進されます。

i18next インスタンスをセットアップし、必要なオプションで初期化することで、React アプリケーション（nextjs）で i18next を構成します。

React-i18next のコード例

以下は、React アプリケーションで react-i18next をセットアップして使用する方法のステップバイステップの例です。

1. 依存関係のインストール

最初に、i18next、react-i18next、およびサーバーからの翻訳をロードするための next-i18next をインストールします。

npm install i18next react-i18next next-i18next

2. i18next の初期化

next-i18next.config.js というファイルを作成し、i18next の設定と初期化を行います。

// next-i18next.config.js
const path = require('path'); // path を定義するために追加する
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // ここに言語を追加してください
    // localeDetection: false,  // デフォルトは true
  },
  localePath: path.resolve('./content/locales'),  // これが i18n ファイルのパス
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': '英語',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // i18n 設定を追加する
};

3. 翻訳ファイルの設定

locales ディレクトリを作成し、各言語（en、de など）のサブディレクトリを作成します。各サブディレクトリ内に、translation.json ファイルを作成します。

例:

-content
  -locales
    -en
      -translation.json
      -'その他ファイル（存在する場合）'.json
    -de
      -translation.json
      -'その他ファイル（存在する場合）'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. I18nextProviderでアプリをラップする

index.js、App.js、または_app.tsxのようなメインファイルで、appWithTranslationを使ってアプリケーションをラップします。

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // このようにラップします

5. コンポーネントでの翻訳フックの使用

これで、useTranslationフックを使用して、コンポーネント内の文字列を翻訳できます。

まず、ページレベルのファイルでserverSideTranslationsを使用する必要があります。

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

その後、コンポーネント内で

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation は هنا هنا のデフォルトです

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // 別の名前空間を使用する
    </div>
  );
};

export default MyComponent;