Internationalization with Intlayer and i18next

i18nextは、JavaScriptアプリケーション向けに設計されたオープンソースの国際化（i18n）フレームワークです。これは、ソフトウェアプロジェクトにおける翻訳、ローカリゼーション、言語切替の管理に広く使用されています。しかし、いくつかの制限があり、スケーラビリティや開発を複雑にする可能性があります。

Intlayerは、これらの制限に対処する別の国際化フレームワークであり、コンテンツの宣言と管理に対してより柔軟なアプローチを提供します。i18nextとIntlayerの主な違いと、国際化の最適化のための両者の設定方法を探ってみましょう。

Intlayer vs. i18next: 主な違い

1. コンテンツの宣言

i18nextでは、翻訳辞書は特定のフォルダーに宣言する必要があり、アプリケーションのスケーラビリティを複雑にすることがあります。対照的に、Intlayerでは、コンテンツをコンポーネントと同じディレクトリ内で宣言することができます。これにはいくつかの利点があります。

• コンテンツ編集の簡易化: ユーザーは編集するための正しい辞書を探す必要がなくなり、エラーの可能性が減ります。
• 自動適応: コンポーネントの場所が変更されたり削除された場合、Intlayerは自動的に検出して適応します。

2. 設定の複雑性

i18nextの設定は複雑になることがあり、特にサーバーサイドコンポーネントとの統合や、Next.jsのようなフレームワークのミドルウェアの設定時に問題が生じることがあります。Intlayerはこのプロセスを簡略化し、より簡単な設定を提供します。

3. 翻訳辞書の一貫性

翻訳辞書が異なる言語間で一貫していることを確保するのは、i18nextでは難しいことがあります。この一貫性の欠如は、適切に対処されないとアプリケーションのクラッシュを引き起こす可能性があります。Intlayerは、翻訳されたコンテンツに制約を課すことでこれに対処し、翻訳が漏れることがなく、翻訳されたコンテンツが正確であることを保証します。

4. TypeScriptとの統合

IntlayerはTypeScriptとの統合が優れており、コード内のコンテンツの自動提案を可能にし、開発の効率を向上させます。

5. アプリケーション間のコンテンツ共有

Intlayerは複数のアプリケーションや共有ライブラリ間でのコンテンツ宣言ファイルの共有を容易にします。この機能により、より大きなコードベース全体で一貫した翻訳を維持することが容易になります。

Intlayerを使用してi18next辞書を生成する方法

i18next辞書をエクスポートするためのIntlayerの設定

重要な注意事項
i18next辞書のエクスポートは現在ベータ版であり、他のフレームワークとの1:1互換性を保証するものではありません。問題を最小限に抑えるために、Intlayerに基づいた設定を維持することをお勧めします。

i18next辞書をエクスポートするには、Intlayerを適切に設定する必要があります。以下は、Intlayerを設定してIntlayerとi18nextの辞書の両方をエクスポートする方法の例です。

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  content: {
    // IntlayerがIntlayerとi18nextの両方の辞書をエクスポートすることを示します
    dictionaryOutput: ["intlayer", "i18next"],
    // プロジェクトルートからi18n辞書がエクスポートされるディレクトリへの相対パス
    i18nDictionariesDir: "./i18n/dictionaries",
  },
};

export default config;

設定に'i18next'を含めることで、IntlayerはIntlayer辞書に加えて専用のi18next辞書を生成します。設定から'intlayer'を削除すると、React-IntlayerやNext-Intlayerとの互換性が破損する可能性があることに注意してください。

辞書をi18next設定にインポートする

生成された辞書をあなたのi18next設定にインポートするには、'i18next-resources-to-backend'を使用できます。以下は、i18next辞書をインポートする方法の例です。

// i18n/client.ts

import i18next from "i18next";
import resourcesToBackend from "i18next-resources-to-backend";

i18next
  // あなたのi18next設定
  .use(
    resourcesToBackend(
      (language: string, namespace: string) =>
        import(`../i18n-dictionaries/${language}/${namespace}.json`)
    )
  );