Intlayerは、JavaScript開発者向けに特別に設計された国際化ライブラリです。コードのあらゆる場所でコンテンツを宣言することができます。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、Intlayerは開発をより強力かつ効率的にします。

なぜIntlayerが作られたのですか？

Intlayerは、next-intl、react-i18next、react-intl、next-i18next、react-intl、およびvue-i18nなどのすべての一般的なi18nライブラリに影響を与える共通の問題を解決するために作られました。

これらのソリューションはすべて、コンテンツをリスト化して管理するために集中型のアプローチを採用しています。例えば：

bash

コードをコピー

コードをクリップボードにコピー

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

またはネームスペースを使用する場合：

bash

コードをコピー

コードをクリップボードにコピー

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

このタイプのアーキテクチャは、いくつかの理由により開発プロセスを遅らせ、コードベースの保守を複雑にします。

新しいコンポーネントを作成するたびに、次のことを行う必要があります：
- localesフォルダに新しいリソース/ネームスペースを作成する
- ページに新しいネームスペースをインポートすることを忘れない
- コンテンツを翻訳する（多くの場合、AIプロバイダーからのコピー/ペーストによって手動で行われます）
コンポーネントに変更を加えるたびに、次のことを行う必要があります：
- 関連するリソース/ネームスペースを探す（コンポーネントから遠い）
- コンテンツを翻訳する
- コンテンツがいずれのロケールでも最新であることを確認する
- ネームスペースに使用されていないキー/値が含まれていないか確認する
- JSONファイルの構造がすべてのロケールで同じであることを確認する

これらのソリューションを使用するプロフェッショナルなプロジェクトでは、コンテンツの翻訳を管理するためにローカライゼーションプラットフォームがよく使用されます。しかし、これは大規模なプロジェクトではすぐにコストがかさむ可能性があります。

この問題を解決するために、Intlayerはコンポーネントごとにコンテンツをスコープし、CSS（styled-components）、型、ドキュメント（storybook）、またはユニットテスト（jest）で行うのと同様に、コンテンツをコンポーネントの近くに保つアプローチを採用しています。

bash

コードをコピー

コードをクリップボードにコピー

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

./components/MyComponent/index.content.ts

コードをコピー

コードをクリップボードにコピー

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

./components/MyComponent/index.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

このアプローチにより、次のことが可能になります：

開発スピードの向上
- VSCode拡張機能を使用して.content.{{ts|mjs|cjs|json}}ファイルを作成できます
- IDEの自動補完AIツール（GitHub Copilotなど）がコンテンツの宣言を支援し、コピー/ペーストを削減できます
コードベースのクリーンアップ
- 複雑さを軽減
- 保守性を向上
コンポーネントとそれに関連するコンテンツの複製をより容易にする（例：ログイン/登録コンポーネントなど）
- 他のコンポーネントのコンテンツに影響を与えるリスクを制限する
- 外部依存関係なしに、あるアプリケーションから別のアプリケーションへコンテンツをコピー/ペーストする
未使用のコンポーネントのための未使用のキー/値でコードベースを汚染することを避ける
- コンポーネントを使用しない場合、Intlayerは関連するコンテンツをインポートしません
- コンポーネントを削除すると、同じフォルダに存在するため、関連するコンテンツの削除を忘れにくくなります
AIエージェントが多言語コンテンツを宣言するための推論コストを削減する
- AIエージェントは、コンテンツをどこに実装すべきかを知るためにコードベース全体をスキャンする必要がありません
- 翻訳は、IDEの自動補完AIツール（GitHub Copilotなど）によって簡単に行えます
読み込みパフォーマンスの最適化
- コンポーネントが遅延読み込みされる場合、関連するコンテンツも同時に読み込まれます

Intlayerの追加機能

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

機能	説明
	クロスフレームワークのサポート Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなどを含むすべての主要なフレームワークおよびライブラリと互換性があります。
	JavaScriptによるコンテンツ管理 JavaScriptの柔軟性を活用して、コンテンツを効率的に定義および管理します。 - コンテンツの宣言
	コンパイラ Intlayerコンパイラはコンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。 - コンパイラ
	ロケールごとのコンテンツ宣言ファイル自動生成の前にコンテンツを一度宣言することで、開発をスピードアップします。 - ロケールごとのコンテンツ宣言ファイル
	型安全な環境 TypeScriptを活用して、コンテンツの定義とコードにエラーがないことを保証し、IDEの自動補完の恩恵も受けられます。 - TypeScriptの設定
	簡素化されたセットアップ最小限の構成ですぐに稼働できます。国際化、ルーティング、AI、ビルド、およびコンテンツ処理の設定を簡単に調整できます。 - Next.jsの統合を探索する
	簡素化されたコンテンツ取得コンテンツごとに`t`関数を呼び出す必要はありません。単一のフックを使用してすべてのコンテンツを直接取得します。 - Reactの統合
	一貫したサーバーコンポーネントの実装 Next.jsサーバーコンポーネントに最適です。クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントに`t`関数を渡す必要はありません。 - サーバーコンポーネント
	整理されたコードベースコードベースをより整理された状態に保ちます：1コンポーネント = 同じフォルダ内の1辞書。それぞれのコンポーネントの近くにある翻訳は、保守性と明快さを向上させます。 - Intlayerの仕組み
	強化されたルーティングアプリルーティングをフルサポートし、Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応します。 - Next.jsの統合を探索する
	Markdownサポートプライバシーポリシー、ドキュメントなどの多言語コンテンツ用にロケールファイルとリモートMarkdownをインポートして解釈します。Markdownメタデータを解釈し、コード内でアクセス可能にします。 - コンテンツファイル
	無料のビジュアルエディタとCMS コンテンツライター向けに無料のビジュアルエディタとCMSが利用可能で、ローカライゼーションプラットフォームの必要性を排除します。Gitを使用してコンテンツを同期させるか、CMSを使用して完全または部分的に外部化します。 - Intlayerエディタ - Intlayer CMS
	Tree-shakableなコンテンツ Tree-shakableなコンテンツにより、最終的なバンドルのサイズを削減します。コンポーネントごとにコンテンツを読み込み、バンドルから未使用のコンテンツを除外します。アプリの読み込み効率を高めるために遅延読み込みをサポートします。 - アプリビルドの最適化
	静的レンダリング静的レンダリングをブロックしません。 - Next.jsの統合
	AIを活用した翻訳独自のAIプロバイダー/APIキーを使用して、Intlayerの高度なAI搭載翻訳ツールにより、ワンクリックでWebサイトを231言語に変換します。 - CI/CDの統合 - Intlayer CLI - 自動入力
	MCPサーバーの統合 IDE自動化のためのMCP（Model Context Protocol）サーバーを提供し、開発環境内でシームレスなコンテンツ管理とi18nワークフローを可能にします。 - MCPサーバー
	VSCode拡張機能 Intlayerは、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などを支援するVSCode拡張機能を提供します。 - VSCode拡張機能
	相互運用性 react-i18next、next-i18next、next-intl、およびreact-intlとの相互運用を可能にします。 - Intlayerとreact-intl - Intlayerとnext-intl - Intlayerとnext-i18next
欠落している翻訳のテスト (CLI/CI)	✅ CLI: npx intlayer content test (CIフレンドリーな監査)

Intlayerと他のソリューションの比較

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

機能	`intlayer`	`react-i18next`	`react-intl` (FormatJS)	`lingui`	`next-intl`	`next-i18next`	`vue-i18n`
コンポーネントの近くにある翻訳	✅ はい、コンテンツは各コンポーネントと同じ場所に配置されます	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	✅ はい - `Single File Components` (SFC)を使用している場合
TypeScriptの統合	✅ 高度、自動生成された厳密な型	⚠️ 基本的。安全性のために追加の設定が必要	✅ 良好だが、それほど厳密ではない	⚠️ タイピング、設定が必要	✅ 良好	⚠️ 基本的	✅ 良好（型は利用可能。キーの安全性には設定が必要）
欠落している翻訳の検出	✅ TypeScriptのエラーハイライトおよびビルド時のエラー/警告	⚠️ 実行時は主にフォールバック文字列	⚠️ フォールバック文字列	⚠️ 追加の設定が必要	⚠️ 実行時のフォールバック	⚠️ 実行時のフォールバック	⚠️ 実行時のフォールバック/警告（設定可能）
リッチコンテンツ (JSX/Markdown/コンポーネント)	✅ 直接サポート	⚠️ 制限あり / 補間のみ	⚠️ ICU構文、実際のJSXではない	⚠️ 制限あり	❌ リッチノード向けに設計されていない	⚠️ 制限あり	⚠️ 制限あり（`<i18n-t>`経由のコンポーネント、プラグイン経由のMarkdown）
AIを活用した翻訳	✅ はい、複数のAIプロバイダーをサポート。独自のAPIキーを使用して利用可能。アプリケーションのコンテキストとコンテンツの範囲を考慮します	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ
ビジュアルエディタ	✅ はい、ローカルのビジュアルエディタ + オプションのCMS。コードベースのコンテンツを外部化可能。埋め込み可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能
ローカライズされたルーティング	✅ はい、ローカライズされたパスを標準でサポート（Next.jsおよびViteで動作）	⚠️ 組み込みなし。プラグイン（`next-i18next`など）またはカスタムルーター設定が必要	❌ いいえ、メッセージのフォーマットのみ。ルーティングは手動で行う必要あり	⚠️ 組み込みなし。プラグインまたは手動設定が必要	✅ 組み込み、App Routerは`[locale]`セグメントをサポート	✅ 組み込み	✅ 組み込み
動的ルート生成	✅ はい	⚠️ プラグイン/エコシステムまたは手動セットアップ	❌ 提供なし	⚠️ プラグイン/手動	✅ はい	✅ はい	❌ 提供なし（Nuxt i18nが提供）
複数形化	✅ 列挙ベースのパターン	✅ 設定可能（i18next-icuなどのプラグイン）	✅ (ICU)	✅ (ICU/messageformat)	✅ 良好	✅ 良好	✅ 組み込みの複数形ルール
フォーマット (日付、数値、通貨)	✅ 最適化されたフォーマッタ（内部でIntlを使用）	⚠️ プラグインまたはカスタムIntlの使用経由	✅ ICUフォーマッタ	✅ ICU/CLIヘルパー	✅ 良好（Intlヘルパー）	✅ 良好（Intlヘルパー）	✅ 組み込みの日付/数値フォーマッタ（Intl）
コンテンツ形式	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml 開発中)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
ICUサポート	⚠️ 開発中	⚠️ プラグイン（i18next-icu）経由	✅ はい	✅ はい	✅ はい	⚠️ プラグイン（`i18next-icu`）経由	⚠️ カスタムフォーマッタ/コンパイラ経由
SEOヘルパー (hreflang, sitemap)	✅ 組み込みツール：sitemap、robots.txt、メタデータのヘルパー	⚠️ コミュニティプラグイン/手動	❌ コアではない	❌ コアではない	✅ 良好	✅ 良好	❌ コアではない（Nuxt i18nがヘルパーを提供）
エコシステム / コミュニティ	⚠️ 小規模だが急速に成長中であり、反応も早い	✅ 最大規模かつ成熟	✅ 大規模	⚠️ 小規模	✅ 中規模、Next.jsに特化	✅ 中規模、Next.jsに特化	✅ Vueエコシステムで大規模
サーバーサイドレンダリングとサーバーコンポーネント	✅ はい、SSR / Reactサーバーコンポーネント向けに合理化されています	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	⚠️ 追加設定によりページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	✅ サポート。設定が必要	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	✅ Nuxt/Vue SSR経由のSSR（RSCなし）
ツリーシェイキング (使用されているコンテンツのみを読み込む)	✅ はい、Babel/SWCプラグインを介してビルド時にコンポーネントごとに実施	⚠️ 通常はすべてを読み込みます（ネームスペース/コード分割で改善可能）	⚠️ 通常はすべてを読み込みます	❌ デフォルトではない	⚠️ 部分的	⚠️ 部分的	⚠️ 部分的（コード分割/手動設定により）
遅延読み込み	✅ はい、ロケールごと / 辞書ごと	✅ はい（例：オンデマンドのバックエンド/ネームスペース）	✅ はい（ロケールバンドルの分割）	✅ はい（動的なカタログインポート）	✅ はい（ルートごと/ロケールごと）。ネームスペースの管理が必要	✅ はい（ルートごと/ロケールごと）。ネームスペースの管理が必要	✅ はい（非同期ロケールメッセージ）
未使用のコンテンツの削除	✅ はい、ビルド時に辞書ごとに実施	❌ いいえ。手動のネームスペース分割経由のみ	❌ いいえ。宣言されたすべてのメッセージがバンドルされます	✅ はい。ビルド時に未使用のキーが検出され、ドロップされます	❌ いいえ。ネームスペース管理により手動で管理可能	❌ いいえ。ネームスペース管理により手動で管理可能	❌ いいえ。手動の遅延読み込み経由でのみ可能
大規模プロジェクトの管理	✅ モジュール化を促進し、デザインシステムに適しています	⚠️ 良好なファイル規律が必要	⚠️ 中央カタログが大きくなる可能性あり	⚠️ 複雑になる可能性あり	✅ 設定によるモジュール化	✅ 設定によるモジュール化	✅ Vue Router/Nuxt i18nの設定によるモジュール化

GitHubのスター

GitHubのスターは、プロジェクトの普及度、コミュニティの信頼、および長期的な関連性を示す強力な指標です。技術的な品質を直接測定するものではありませんが、どれだけの開発者がプロジェクトを有用だと感じ、その進捗をフォローし、採用する可能性があるかを反映しています。プロジェクトの価値を見積もる際、スターは代替案との勢いの比較を助け、エコシステムの成長に関する洞察を提供します。

相互運用性

intlayerは、react-intl、react-i18next、next-intl、next-i18next、およびvue-i18nのネームスペースの管理も支援できます。

intlayerを使用すると、お気に入りのi18nライブラリの形式でコンテンツを宣言でき、intlayerが選択した場所（例：/messages/{{locale}}/{{namespace}}.json）にネームスペースを生成します。

始める

作成:2024-08-14最終更新:2025-09-27

このドキュメントをあなたの好きなAIアシスタントに参照してください

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

バージョン履歴

"コンパイラのリリース"
v7.3.12025/11/27
"比較表の更新"
v5.8.02025/8/19
"履歴の初期化"
v5.5.102025/6/29

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

なぜIntlayerを検討すべきなのですか？

Intlayerとは何ですか？

なぜIntlayerが作られたのですか？

これらのソリューションはすべて、コンテンツをリスト化して管理するために集中型のアプローチを採用しています。例えば：

bash

コードをコピー

コードをクリップボードにコピー

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

.├── locales│   ├── en.json│   ├── es.json│   └── fr.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

またはネームスペースを使用する場合：

bash

コードをコピー

コードをクリップボードにコピー

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

このタイプのアーキテクチャは、いくつかの理由により開発プロセスを遅らせ、コードベースの保守を複雑にします。

新しいコンポーネントを作成するたびに、次のことを行う必要があります：
- localesフォルダに新しいリソース/ネームスペースを作成する
- ページに新しいネームスペースをインポートすることを忘れない
- コンテンツを翻訳する（多くの場合、AIプロバイダーからのコピー/ペーストによって手動で行われます）
コンポーネントに変更を加えるたびに、次のことを行う必要があります：
- 関連するリソース/ネームスペースを探す（コンポーネントから遠い）
- コンテンツを翻訳する
- コンテンツがいずれのロケールでも最新であることを確認する
- ネームスペースに使用されていないキー/値が含まれていないか確認する
- JSONファイルの構造がすべてのロケールで同じであることを確認する

bash

コードをコピー

コードをクリップボードにコピー

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

./components/MyComponent/index.content.ts

コードをコピー

コードをクリップボードにコピー

import { t, type Dictionary } from "intlayer";

const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentExampleContent;

./components/MyComponent/index.tsx

コードをコピー

コードをクリップボードにコピー

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

このアプローチにより、次のことが可能になります：

開発スピードの向上
- VSCode拡張機能を使用して.content.{{ts|mjs|cjs|json}}ファイルを作成できます
- IDEの自動補完AIツール（GitHub Copilotなど）がコンテンツの宣言を支援し、コピー/ペーストを削減できます
コードベースのクリーンアップ
- 複雑さを軽減
- 保守性を向上
コンポーネントとそれに関連するコンテンツの複製をより容易にする（例：ログイン/登録コンポーネントなど）
- 他のコンポーネントのコンテンツに影響を与えるリスクを制限する
- 外部依存関係なしに、あるアプリケーションから別のアプリケーションへコンテンツをコピー/ペーストする
未使用のコンポーネントのための未使用のキー/値でコードベースを汚染することを避ける
- コンポーネントを使用しない場合、Intlayerは関連するコンテンツをインポートしません
- コンポーネントを削除すると、同じフォルダに存在するため、関連するコンテンツの削除を忘れにくくなります
AIエージェントが多言語コンテンツを宣言するための推論コストを削減する
- AIエージェントは、コンテンツをどこに実装すべきかを知るためにコードベース全体をスキャンする必要がありません
- 翻訳は、IDEの自動補完AIツール（GitHub Copilotなど）によって簡単に行えます
読み込みパフォーマンスの最適化
- コンポーネントが遅延読み込みされる場合、関連するコンテンツも同時に読み込まれます

Intlayerの追加機能

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

機能	説明
	クロスフレームワークのサポート Intlayerは、Next.js、React、Vite、Vue.js、Nuxt、Preact、Expressなどを含むすべての主要なフレームワークおよびライブラリと互換性があります。
	JavaScriptによるコンテンツ管理 JavaScriptの柔軟性を活用して、コンテンツを効率的に定義および管理します。 - コンテンツの宣言
	コンパイラ Intlayerコンパイラはコンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。 - コンパイラ
	ロケールごとのコンテンツ宣言ファイル自動生成の前にコンテンツを一度宣言することで、開発をスピードアップします。 - ロケールごとのコンテンツ宣言ファイル
	型安全な環境 TypeScriptを活用して、コンテンツの定義とコードにエラーがないことを保証し、IDEの自動補完の恩恵も受けられます。 - TypeScriptの設定
	簡素化されたセットアップ最小限の構成ですぐに稼働できます。国際化、ルーティング、AI、ビルド、およびコンテンツ処理の設定を簡単に調整できます。 - Next.jsの統合を探索する
	簡素化されたコンテンツ取得コンテンツごとに`t`関数を呼び出す必要はありません。単一のフックを使用してすべてのコンテンツを直接取得します。 - Reactの統合
	一貫したサーバーコンポーネントの実装 Next.jsサーバーコンポーネントに最適です。クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントに`t`関数を渡す必要はありません。 - サーバーコンポーネント
	整理されたコードベースコードベースをより整理された状態に保ちます：1コンポーネント = 同じフォルダ内の1辞書。それぞれのコンポーネントの近くにある翻訳は、保守性と明快さを向上させます。 - Intlayerの仕組み
	強化されたルーティングアプリルーティングをフルサポートし、Next.js、React、Vite、Vue.jsなどの複雑なアプリケーション構造にシームレスに適応します。 - Next.jsの統合を探索する
	Markdownサポートプライバシーポリシー、ドキュメントなどの多言語コンテンツ用にロケールファイルとリモートMarkdownをインポートして解釈します。Markdownメタデータを解釈し、コード内でアクセス可能にします。 - コンテンツファイル
	無料のビジュアルエディタとCMS コンテンツライター向けに無料のビジュアルエディタとCMSが利用可能で、ローカライゼーションプラットフォームの必要性を排除します。Gitを使用してコンテンツを同期させるか、CMSを使用して完全または部分的に外部化します。 - Intlayerエディタ - Intlayer CMS
	Tree-shakableなコンテンツ Tree-shakableなコンテンツにより、最終的なバンドルのサイズを削減します。コンポーネントごとにコンテンツを読み込み、バンドルから未使用のコンテンツを除外します。アプリの読み込み効率を高めるために遅延読み込みをサポートします。 - アプリビルドの最適化
	静的レンダリング静的レンダリングをブロックしません。 - Next.jsの統合
	AIを活用した翻訳独自のAIプロバイダー/APIキーを使用して、Intlayerの高度なAI搭載翻訳ツールにより、ワンクリックでWebサイトを231言語に変換します。 - CI/CDの統合 - Intlayer CLI - 自動入力
	MCPサーバーの統合 IDE自動化のためのMCP（Model Context Protocol）サーバーを提供し、開発環境内でシームレスなコンテンツ管理とi18nワークフローを可能にします。 - MCPサーバー
	VSCode拡張機能 Intlayerは、コンテンツや翻訳の管理、辞書の構築、コンテンツの翻訳などを支援するVSCode拡張機能を提供します。 - VSCode拡張機能
	相互運用性 react-i18next、next-i18next、next-intl、およびreact-intlとの相互運用を可能にします。 - Intlayerとreact-intl - Intlayerとnext-intl - Intlayerとnext-i18next
欠落している翻訳のテスト (CLI/CI)	✅ CLI: npx intlayer content test (CIフレンドリーな監査)

Intlayerと他のソリューションの比較

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

機能	`intlayer`	`react-i18next`	`react-intl` (FormatJS)	`lingui`	`next-intl`	`next-i18next`	`vue-i18n`
コンポーネントの近くにある翻訳	✅ はい、コンテンツは各コンポーネントと同じ場所に配置されます	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	✅ はい - `Single File Components` (SFC)を使用している場合
TypeScriptの統合	✅ 高度、自動生成された厳密な型	⚠️ 基本的。安全性のために追加の設定が必要	✅ 良好だが、それほど厳密ではない	⚠️ タイピング、設定が必要	✅ 良好	⚠️ 基本的	✅ 良好（型は利用可能。キーの安全性には設定が必要）
欠落している翻訳の検出	✅ TypeScriptのエラーハイライトおよびビルド時のエラー/警告	⚠️ 実行時は主にフォールバック文字列	⚠️ フォールバック文字列	⚠️ 追加の設定が必要	⚠️ 実行時のフォールバック	⚠️ 実行時のフォールバック	⚠️ 実行時のフォールバック/警告（設定可能）
リッチコンテンツ (JSX/Markdown/コンポーネント)	✅ 直接サポート	⚠️ 制限あり / 補間のみ	⚠️ ICU構文、実際のJSXではない	⚠️ 制限あり	❌ リッチノード向けに設計されていない	⚠️ 制限あり	⚠️ 制限あり（`<i18n-t>`経由のコンポーネント、プラグイン経由のMarkdown）
AIを活用した翻訳	✅ はい、複数のAIプロバイダーをサポート。独自のAPIキーを使用して利用可能。アプリケーションのコンテキストとコンテンツの範囲を考慮します	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ	❌ いいえ
ビジュアルエディタ	✅ はい、ローカルのビジュアルエディタ + オプションのCMS。コードベースのコンテンツを外部化可能。埋め込み可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能	❌ いいえ / 外部のローカライゼーションプラットフォーム経由で利用可能
ローカライズされたルーティング	✅ はい、ローカライズされたパスを標準でサポート（Next.jsおよびViteで動作）	⚠️ 組み込みなし。プラグイン（`next-i18next`など）またはカスタムルーター設定が必要	❌ いいえ、メッセージのフォーマットのみ。ルーティングは手動で行う必要あり	⚠️ 組み込みなし。プラグインまたは手動設定が必要	✅ 組み込み、App Routerは`[locale]`セグメントをサポート	✅ 組み込み	✅ 組み込み
動的ルート生成	✅ はい	⚠️ プラグイン/エコシステムまたは手動セットアップ	❌ 提供なし	⚠️ プラグイン/手動	✅ はい	✅ はい	❌ 提供なし（Nuxt i18nが提供）
複数形化	✅ 列挙ベースのパターン	✅ 設定可能（i18next-icuなどのプラグイン）	✅ (ICU)	✅ (ICU/messageformat)	✅ 良好	✅ 良好	✅ 組み込みの複数形ルール
フォーマット (日付、数値、通貨)	✅ 最適化されたフォーマッタ（内部でIntlを使用）	⚠️ プラグインまたはカスタムIntlの使用経由	✅ ICUフォーマッタ	✅ ICU/CLIヘルパー	✅ 良好（Intlヘルパー）	✅ 良好（Intlヘルパー）	✅ 組み込みの日付/数値フォーマッタ（Intl）
コンテンツ形式	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml 開発中)	⚠️ .json	✅ .json, .js	⚠️ .po, .json	✅ .json, .js, .ts	⚠️ .json	✅ .json, .js
ICUサポート	⚠️ 開発中	⚠️ プラグイン（i18next-icu）経由	✅ はい	✅ はい	✅ はい	⚠️ プラグイン（`i18next-icu`）経由	⚠️ カスタムフォーマッタ/コンパイラ経由
SEOヘルパー (hreflang, sitemap)	✅ 組み込みツール：sitemap、robots.txt、メタデータのヘルパー	⚠️ コミュニティプラグイン/手動	❌ コアではない	❌ コアではない	✅ 良好	✅ 良好	❌ コアではない（Nuxt i18nがヘルパーを提供）
エコシステム / コミュニティ	⚠️ 小規模だが急速に成長中であり、反応も早い	✅ 最大規模かつ成熟	✅ 大規模	⚠️ 小規模	✅ 中規模、Next.jsに特化	✅ 中規模、Next.jsに特化	✅ Vueエコシステムで大規模
サーバーサイドレンダリングとサーバーコンポーネント	✅ はい、SSR / Reactサーバーコンポーネント向けに合理化されています	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	⚠️ 追加設定によりページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	✅ サポート。設定が必要	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	⚠️ ページレベルでサポートされていますが、子サーバーコンポーネントのコンポーネントツリーにt関数を渡す必要あり	✅ Nuxt/Vue SSR経由のSSR（RSCなし）
ツリーシェイキング (使用されているコンテンツのみを読み込む)	✅ はい、Babel/SWCプラグインを介してビルド時にコンポーネントごとに実施	⚠️ 通常はすべてを読み込みます（ネームスペース/コード分割で改善可能）	⚠️ 通常はすべてを読み込みます	❌ デフォルトではない	⚠️ 部分的	⚠️ 部分的	⚠️ 部分的（コード分割/手動設定により）
遅延読み込み	✅ はい、ロケールごと / 辞書ごと	✅ はい（例：オンデマンドのバックエンド/ネームスペース）	✅ はい（ロケールバンドルの分割）	✅ はい（動的なカタログインポート）	✅ はい（ルートごと/ロケールごと）。ネームスペースの管理が必要	✅ はい（ルートごと/ロケールごと）。ネームスペースの管理が必要	✅ はい（非同期ロケールメッセージ）
未使用のコンテンツの削除	✅ はい、ビルド時に辞書ごとに実施	❌ いいえ。手動のネームスペース分割経由のみ	❌ いいえ。宣言されたすべてのメッセージがバンドルされます	✅ はい。ビルド時に未使用のキーが検出され、ドロップされます	❌ いいえ。ネームスペース管理により手動で管理可能	❌ いいえ。ネームスペース管理により手動で管理可能	❌ いいえ。手動の遅延読み込み経由でのみ可能
大規模プロジェクトの管理	✅ モジュール化を促進し、デザインシステムに適しています	⚠️ 良好なファイル規律が必要	⚠️ 中央カタログが大きくなる可能性あり	⚠️ 複雑になる可能性あり	✅ 設定によるモジュール化	✅ 設定によるモジュール化	✅ Vue Router/Nuxt i18nの設定によるモジュール化

GitHubのスター

相互運用性

intlayerは、react-intl、react-i18next、next-intl、next-i18next、およびvue-i18nのネームスペースの管理も支援できます。

始める