@intlayer/docs 5.8.0-canary.0 → 5.8.1-canary.0

package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1,14 +1,14 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: next-i18next vs next-intl vs Intlayer
-description: Next.jsアプリのためにnext-i18nextとnext-intlとIntlayerを比較する
+description: Next.jsアプリの国際化（i18n）におけるnext-i18next、next-intl、Intlayerの比較
 keywords:
   - next-intl
   - next-i18next
   - Intlayer
   - 国際化
-  - ドキュメンテーション
+  - ブログ
   - Next.js
   - JavaScript
   - React
@@ -17,269 +17,146 @@ slugs:
   - next-i18next-vs-next-intl-vs-intlayer
 ---
 
-# next-i18next VS next-intl VS Intlayer | Next.js 国際化 (i18n)
+# next-i18next VS next-intl VS intlayer | Next.jsの国際化（i18n）
 
-以下に、Next.js アプリケーションの国際化 (i18n) に関する **3 つの人気ライブラリ**: **next-intl**, **next-i18next**, および **Intlayer** の簡潔な比較を示します。
+本ガイドでは、**Next.js**で広く使われている3つのi18nオプション、**next-intl**、**next-i18next**、および**Intlayer**を比較します。  
+対象は**Next.js 13+のApp Router**（**React Server Components**対応）で、以下の点を評価します：
 
-このドキュメントでは、主要な基準を強調しています：
+1. **アーキテクチャとコンテンツの構成**
+2. **TypeScriptと安全性**
+3. **翻訳欠落の取り扱い**
+4. **ルーティングとミドルウェア**
+5. **パフォーマンスと読み込み挙動**
+6. **開発者体験（DX）、ツールとメンテナンス**
+7. **SEOと大規模プロジェクトのスケーラビリティ**
 
-1. **アーキテクチャ** (翻訳をコンポーネントに近づける)
-2. **TypeScript サポート**
-3. **欠損翻訳の管理**
-4. **サーバーコンポーネントのサポート**
-5. **Next.js のための強化されたルーティングとミドルウェア**
-6. **セットアップの簡易性**
-
-このガイドは、特に **Next.js 13+**、**App Router** および **Server Components** に対する強力な選択肢である理由を示す **Intlayer** の **詳細な解説** も提供します。
+> **要約**: いずれのツールもNext.jsアプリのローカライズが可能です。もし**コンポーネント単位のコンテンツ管理**、**厳格なTypeScript型**、**ビルド時の欠落キー検出**、**ツリーシェイク可能な辞書**、そして**一流のApp RouterとSEOヘルパー**を求めるなら、**Intlayer**が最も包括的でモダンな選択肢です。
 
 ---
 
-## 各ライブラリの概要
-
-### 1. next-intl
+## 高レベルのポジショニング
 
-**主な焦点**: ローカリゼーションへの軽量アプローチで素早く簡単なセットアップ。
+- **next-intl** - 軽量でシンプルなメッセージフォーマットを提供し、Next.jsとの親和性が高いです。カタログは中央集権的に管理されることが多く、開発者体験はシンプルですが、安全性や大規模なメンテナンスは主にユーザーの責任となります。
+- **next-i18next** - Next.js向けにラップされたi18next。成熟したエコシステムとプラグイン（例：ICU）による機能を備えていますが、設定が冗長になりがちで、プロジェクトが大きくなるにつれてカタログは中央集権化しやすいです。
+- **Intlayer** - Next.js向けのコンポーネント中心のコンテンツモデル、**厳格なTS型付け**、**ビルド時チェック**、**ツリーシェイク**、**組み込みのミドルウェアとSEOヘルパー**、オプションの**ビジュアルエディター/CMS**、および**AI支援翻訳**を提供します。
 
-- **アーキテクチャ**: 翻訳を単一のフォルダ (例: `locales/`) に共に配置することを推奨しますが、複数の戦略も許容します。「コンポーネントごとの翻訳」アーキテクチャを厳格に強制するわけではありません。
-- **TypeScript サポート**: 基本的な TypeScript 統合。一部の型定義は存在しますが、翻訳ファイルから TypeScript 定義を自動生成することに重きを置いてはいません。
-- **欠損翻訳**: 基本的なフォールバックメカニズム。デフォルトでは、キーまたはデフォルトのロケール文字列にフォールバックします。高度な欠損翻訳チェックのための堅牢なツールはありません。
-- **サーバーコンポーネントのサポート**: 一般的には Next.js 13+ で機能しますが、パターンは深いサーバーサイドの使用にはあまり特化していません (例: 複雑な動的ルーティングを伴うサーバーコンポーネント)。
-- **ルーティングとミドルウェア**: ミドルウェアのサポートは可能ですが限られています。通常はロケール検出のために Next.js `Middleware` に依存するか、ロケールパスを再書き込みするための手動設定が必要です。
-- **セットアップの簡易性**: 非常に直感的です。最小限のボイラープレートが必要です。
+---
 
-**使用する場合**: よりシンプルなアプローチが求められる、またはローカリゼーションをより伝統的な方法 (ロケール JSON ファイルがある一つのフォルダのように) で管理することに慣れている場合。
+## 機能の比較（Next.jsに特化）
+
+| 機能                                                       | `next-intlayer` (Intlayer)                                                                                                       | `next-intl`                                                                                                                | `next-i18next`                                                                                                             |
+| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| **コンポーネント近くの翻訳**                               | ✅ はい、各コンポーネントにコンテンツが配置されています                                                                          | ❌ いいえ                                                                                                                  | ❌ いいえ                                                                                                                  |
+| **TypeScript統合**                                         | ✅ 高度、厳密な型が自動生成されます                                                                                              | ✅ 良好                                                                                                                    | ⚠️ 基本的                                                                                                                  |
+| **翻訳漏れ検出**                                           | ✅ TypeScriptのエラー強調表示およびビルド時のエラー/警告                                                                         | ⚠️ 実行時フォールバック                                                                                                    | ⚠️ 実行時フォールバック                                                                                                    |
+| **リッチコンテンツ（JSX/Markdown/コンポーネント）**        | ✅ 直接サポート                                                                                                                  | ❌ リッチノード向けに設計されていません                                                                                    | ⚠️ 制限あり                                                                                                                |
+| **AI搭載翻訳**                                             | ✅ はい、複数のAIプロバイダーをサポート。独自のAPIキーを使用可能。アプリケーションとコンテンツの範囲のコンテキストを考慮します。 | ❌ いいえ                                                                                                                  | ❌ いいえ                                                                                                                  |
+| **ビジュアルエディター**                                   | ✅ はい、ローカルのビジュアルエディター＋オプションのCMS；コードベースのコンテンツを外部化可能；埋め込み可能                     | ❌ いいえ / 外部のローカリゼーションプラットフォーム経由で利用可能                                                         | ❌ いいえ / 外部のローカリゼーションプラットフォーム経由で利用可能                                                         |
+| **ローカライズされたルーティング**                         | ✅ はい、ローカライズされたパスを標準でサポート（Next.js & Viteで動作）                                                          | ✅ 組み込み、App Routerは`[locale]`セグメントをサポート                                                                    | ✅ 組み込み                                                                                                                |
+| **動的ルート生成**                                         | ✅ はい                                                                                                                          | ✅ はい                                                                                                                    | ✅ はい                                                                                                                    |
+| **複数形処理**                                             | ✅ 列挙ベースのパターン                                                                                                          | ✅ 良好                                                                                                                    | ✅ 良好                                                                                                                    |
+| **フォーマット（日時、数値、通貨）**                       | ✅ 最適化されたフォーマッター（内部でIntlを使用）                                                                                | ✅ 良好（Intlヘルパー）                                                                                                    | ✅ 良好（Intlヘルパー）                                                                                                    |
+| **コンテンツフォーマット**                                 | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml 作業中)                                                                              | ✅ .json, .js, .ts                                                                                                         | ⚠️ .json                                                                                                                   |
+| **ICUサポート**                                            | ⚠️ 作業中                                                                                                                        | ✅ あり                                                                                                                    | ⚠️ プラグイン経由（`i18next-icu`）                                                                                         |
+| **SEOヘルパー（hreflang、サイトマップ）**                  | ✅ 組み込みツール：サイトマップ、robots.txt、メタデータのヘルパー                                                                | ✅ 良好                                                                                                                    | ✅ 良好                                                                                                                    |
+| **エコシステム / コミュニティ**                            | ⚠️ 小規模だが急速に成長し、反応が良い                                                                                            | ✅ 中規模、Next.jsに特化                                                                                                   | ✅ 中規模、Next.jsに特化                                                                                                   |
+| **サーバーサイドレンダリング＆サーバーコンポーネント**     | ✅ はい、SSR / Reactサーバーコンポーネント向けに最適化されています                                                               | ⚠️ ページレベルでサポートされていますが、子のサーバーコンポーネントに対してt関数をコンポーネントツリーに渡す必要があります | ⚠️ ページレベルでサポートされていますが、子のサーバーコンポーネントに対してt関数をコンポーネントツリーに渡す必要があります |
+| **ツリーシェイキング（使用されるコンテンツのみ読み込み）** | ✅ はい、Babel/SWCプラグインを使用してビルド時にコンポーネント単位で実施されます                                                 | ⚠️ 部分的に対応                                                                                                            | ⚠️ 部分的に対応                                                                                                            |
+| **遅延読み込み**                                           | ✅ はい、ロケールごと / 辞書ごと                                                                                                 | ✅ はい（ルートごと / ロケールごと）、名前空間管理が必要                                                                   | ✅ はい（ルートごと / ロケールごと）、名前空間管理が必要                                                                   |
+| **未使用コンテンツの削除**                                 | ✅ はい、ビルド時に辞書ごと                                                                                                      | ❌ いいえ、名前空間管理で手動管理可能                                                                                      | ❌ いいえ、名前空間管理で手動管理可能                                                                                      |
+| **大規模プロジェクトの管理**                               | ✅ モジュール化を推奨し、デザインシステムに適している                                                                            | ✅ セットアップによるモジュール化                                                                                          | ✅ セットアップによるモジュール化                                                                                          |
 
 ---
 
-### 2. next-i18next
+## 詳細比較
 
-**主な焦点**: `i18next` を内部で使用した実績のあるソリューションで、Next.js プロジェクトで広く採用されています。
+### 1) アーキテクチャとスケーラビリティ
 
-- **アーキテクチャ**: 翻訳を `public/locales` フォルダに整理することが一般的です。特定のコンポーネントの近くに翻訳を保つようには設計されていませんが、手動で異なる構造を採用することができます。
-- **TypeScript サポート**: かなりの TypeScript カバレッジがあるが、型付き翻訳と型付きフックのためのカスタム設定が必要です。
-- **欠損翻訳**: i18next は補間/フォールバックを提供します。ただし、欠損翻訳の検出には通常追加の設定やサードパーティプラグインが必要です。
-- **サーバーコンポーネントのサポート**: Next.js 13 に関する基本的な使用法は文書化されていますが、高度な使用法 (例: サーバーコンポーネントとの深い統合、動的ルート生成) は手間がかかる場合があります。
-- **ルーティングとミドルウェア**: Next.js `Middleware` とロケールのサブパスの再書き換えに大きく依存しています。より複雑なセットアップでは、i18next の高度な構成を掘り下げる必要があるかもしれません。
-- **セットアップの簡易性**: i18next に慣れた人には馴染みのあるアプローチです。ただし、高度な i18n 機能が必要な場合 (ネームスペース、複数のフォールバックロケールなど)、ボイラープレートが増加する可能性があります。
+- **next-intl / next-i18next**: ロケールごとの**集中型カタログ**（i18nextでは**ネームスペース**も）をデフォルトとする。初期段階では問題なく機能するが、結合度が高まりキーの変更が頻繁になるにつれて、大きな共有領域となることが多い。
+- **Intlayer**: コードと共に配置された **コンポーネント単位**（または機能単位）の辞書を推奨します。これにより認知負荷が軽減され、UIパーツの複製や移行が容易になり、チーム間の競合も減少します。未使用のコンテンツも自然に見つけやすく、削除しやすくなります。
 
-**使用する場合**: あなたがすでに `i18next` エコシステムにコミットしているか、既存の i18next ベースの翻訳を持っている場合。
+**重要な理由:** 大規模なコードベースやデザインシステムのセットアップでは、**モジュール化されたコンテンツ**の方がモノリシックなカタログよりもスケールしやすいです。
 
 ---
 
-### 3. Intlayer
-
-**主な焦点**: Next.js **App Router** (12, 13, 14, 15) のために特別に設計された、サーバーコンポーネントと **Turbopack** に内蔵サポートを提供する最新のオープンソース i18n ライブラリ。
+### 2) TypeScript と安全性
 
-#### 主な利点
+- **next-intl**: 安定した TypeScript サポートがありますが、**キーはデフォルトで厳密に型付けされていません**。安全性のパターンは手動で維持する必要があります。
+- **next-i18next**: フックの基本的な型定義がありますが、**厳密なキーの型付けには追加のツールや設定が必要です**。
+- **Intlayer**: コンテンツから**厳密な型を生成**します。**IDEの自動補完**や**コンパイル時のエラー**により、デプロイ前にタイプミスやキーの欠落を検出します。
 
-1. **アーキテクチャ**
+**なぜ重要か:** 強い型付けにより、失敗を**右（ランタイム）**ではなく**左（CI/ビルド時）**にシフトさせます。
 
-   - **翻訳をコンポーネントのすぐ隣に配置することを推奨**します。それぞれのページまたはコンポーネントは独自の `.content.ts` (または JSON) ファイルを持つことができ、大きな翻訳フォルダを探し回る必要はありません。
-   - これにより、大規模なコードベースでコードがより **モジュール化され、保守性が向上**します。
-
-2. **TypeScript サポート**
-
-   - **自動生成型定義**: コンテンツを定義する瞬間に、Intlayer はオートコンプリートを支え、翻訳エラーをキャッチする型を生成します。
-   - 欠 missing Keys やランタイムエラーを最小限に抑え、IDE での **オートコンプリート** を提供します。
-
-3. **欠損翻訳の管理**
+---
 
-   - ビルド中、Intlayer は **欠損翻訳キーを検出**し、警告やエラーをスローすることができます。
-   - これにより、言語全体で欠損テキストを誤って出荷することがないようにします。
+### 3) 翻訳欠落の取り扱い
 
-4. **サーバーコンポーネントに最適化**
+- **next-intl / next-i18next**: **ランタイムのフォールバック**に依存（例：キーやデフォルトロケールを表示）。ビルドは失敗しません。
+- **Intlayer**: **ビルド時検出**により、ロケールやキーの欠落に対して**警告/エラー**を出します。
 
-   - Next.js **App Router** と新しい **Server Components** のパラダイムと完全に互換性があります。
-   - サーバーコンテキストを **孤立させるための特殊なプロバイダー** (`IntlayerServerProvider`, `IntlayerClientProvider`) を提供します (Next.js 13+ を扱う際に重要)。
+**なぜ重要か:** ビルド時にギャップを検出することで、本番環境での「謎の文字列」発生を防ぎ、厳格なリリースゲートに適合します。
 
-5. **強化されたルーティングとミドルウェア**
+---
 
-   - 自動ロケール検出 (クッキーやブラウザヘッダーを介して) と高度なルート生成のための専用 [**`intlayerMiddleware`**](#) を含みます。
-   - 最小限の設定でローカライズされたパス (例: `/en-US/about` と `/fr/about`) を動的に処理します。
-   - 代替言語リンクを生成するためのヘルパー メソッド `getMultilingualUrls` を提供します (SEO に最適)。
+### 4) ルーティング、ミドルウェア、URL戦略
 
-6. **簡素化されたセットアップ**
-   - ロケール、デフォルトロケール、および統合の好みを定義するための単一の構成ファイル (`intlayer.config.ts`)。
-   - すべての環境変数とコンテンツの監視を **注入** するラッパープラグイン `withIntlayer(nextConfig)`。
-   - **大規模なフォールバック構成は不要**, システムは最小限の摩擦で「自動的に機能する」ように構築されています。
+- 3つとも、App Router上の**Next.jsのローカライズルーティング**に対応しています。
+- **Intlayer** はさらに進んで、**i18n ミドルウェア**（ヘッダーやクッキーによるロケール検出）や、ローカライズされた URL や `<link rel="alternate" hreflang="…">` タグを生成するための **ヘルパー** を提供します。
 
-> **結論**: Intlayer は、**React コンポーネントに近くに翻訳を保つことから**、**堅牢な TS サポート**、**容易なサーバーサイド** 使用まで、最良のプラクティスを推進したい現代的な解決策です。そして **ボイラープレートを大幅に削減**します。
+**重要な理由:** カスタムの接着層が減り、**一貫した UX** と **クリーンな SEO** をロケール間で実現します。
 
 ---
 
-## 機能比較
-
-| **機能**                             | **next-intl**                         | **next-i18next**                                 | **Intlayer**                                |
-| ------------------------------------ | ------------------------------------- | ------------------------------------------------ | ------------------------------------------- |
-| **コンポーネント近くに翻訳を保つ**   | 部分的 – 通常は一つのロケールフォルダ | デフォルトではない – 多くの場合 `public/locales` | **はい – 推奨され、簡単**                   |
-| **TypeScript 自動生成**              | 基本的な TS 定義                      | 基本的な TS サポート                             | **はい – 高度なアウトオブボックス**         |
-| **欠損翻訳の検出**                   | 主にフォールバック文字列              | 主にフォールバック文字列                         | **はい – ビルド時チェック**                 |
-| **サーバーコンポーネントのサポート** | 機能するが専門的ではない              | サポートされているが冗長になりがち               | **特殊なプロバイダーと完全なサポート**      |
-| **ルーティングとミドルウェア**       | 手動で Next ミドルウェアと統合        | 再書き換え構成を介して提供                       | **専用の i18n ミドルウェア + 高度なフック** |
-| **セットアップの複雑性**             | シンプル、最小限の構成                | 従来型で、進んだ使用には冗長な場合がある         | **一つの構成ファイル & プラグイン**         |
-
----
+### 5) サーバーコンポーネント（RSC）との整合性
 
-## Intlayer の利点
+- **すべて**が Next.js 13+ をサポートしています。
+- **Intlayer** は一貫した API と RSC 向けに設計されたプロバイダーで、**サーバー/クライアントの境界** をスムーズにし、フォーマッターや t 関数をコンポーネントツリー間で渡す必要をなくします。
 
-**Server Components** を持つ **Next.js App Router** (バージョン 13、14、15) に移行中または上に構築しているチームに対し、Intlayer は以下を提供します：
+**重要な理由:** より明確なメンタルモデルと、ハイブリッドツリーにおけるエッジケースの減少を実現します。
 
-1. **合理化されたアーキテクチャ**
+---
 
-   - 各ルートまたはコンポーネントが自分の翻訳を保持します。これにより明確性と保守性が促進されます。
+### 6) パフォーマンスと読み込み挙動
 
-2. **強力な TypeScript 統合**
+- **next-intl / next-i18next**: **namespaces**や**ルートレベルの分割**による部分的な制御が可能ですが、管理が甘いと未使用の文字列がバンドルされるリスクがあります。
+- **Intlayer**: ビルド時に**ツリーシェイク**を行い、辞書やロケールごとに**遅延ロード**します。未使用のコンテンツは配信されません。
 
-   - コンパイラーレベルの安全性を得て、「タイプミス」や欠損翻訳キーを回避できます。
+**なぜ重要か:** 特に多言語サイトで、バンドルサイズが小さくなり、起動が速くなります。
 
-3. **リアルな欠損翻訳アラート**
+---
 
-   - キーや言語翻訳を忘れた場合、ビルド時に警告を受け取ります（未完成の UI を出荷するのではなく）。
+### 7) DX（開発者体験）、ツール、メンテナンス
 
-4. **内蔵の高度なルーティング**
+- **next-intl / next-i18next**: 通常、翻訳や編集ワークフローのために外部プラットフォームと連携します。
+- **Intlayer**: **無料のビジュアルエディター**と**オプションのCMS**（Git対応または外部化）を提供します。さらに、コンテンツ作成用の**VSCode拡張機能**や、独自のプロバイダーキーを使った**AI支援翻訳**も備えています。
 
-   - 自動ロケール検出、動的ルート生成、および簡単なローカライズされた URL 管理が含まれています。
-   - 標準の `intlayerMiddleware` は深いカスタム再書き込みを必要としません。
+**なぜ重要か:** 運用コストを削減し、開発者とコンテンツ作成者間のフィードバックループを短縮します。
 
-5. **ワンストップセットアップ**
+---
 
-   - 最小限のボイラープレート: 単に `intlayer.config.ts` を定義し、`next.config` を `withIntlayer` でラップし、公式ミドルウェアを追加します。
-   - **Server** および **Client** コンポーネントへの明確かつ直感的な使用が可能です。
+## どのツールを選ぶべきか？
 
-6. **SEO フレンドリー**
-   - 組み込まれたヘルパー (`getMultilingualUrls`, `hrefLang` 属性など) により、SEO 対応のページやサイトマップを簡単に生成できます。
+- **next-intl** を選ぶのは、**最小限の**ソリューションを求めていて、集中管理されたカタログに慣れており、アプリが**小規模から中規模**の場合です。
+- **next-i18next** を選ぶのは、**i18nextのプラグインエコシステム**（例：プラグインによる高度なICUルール）が必要で、チームがすでにi18nextを知っており、柔軟性のために**より多くの設定**を受け入れられる場合です。
+- **Intlayer** を選ぶのは、**コンポーネント単位のコンテンツ管理**、**厳格なTypeScript**、**ビルド時の保証**、**ツリーシェイキング**、および**ルーティング/SEO/エディタツールが標準搭載**されていることを重視し、特に**Next.js App Router**や**大規模でモジュール化されたコードベース**に適している場合です。
 
 ---
 
-## 例: Intlayer を使った実装
-
-以下は、Next.js 15 プロジェクトで Intlayer を活用する方法を示す _非常に_ 短縮されたスニペットです。詳細な内容とコードの例については、[Intlayer の完全なガイドを確認してください](#)。
-
-<details>
-<summary>ステップバイステップの例</summary>
-
-1. **インストールと構成**
-
-   ```bash
-   npm install intlayer next-intlayer
-   ```
-
-   ```ts
-   // intlayer.config.ts
-   import { Locales, type IntlayerConfig } from "intlayer";
-
-   const config: IntlayerConfig = {
-     internationalization: {
-       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-       defaultLocale: Locales.ENGLISH,
-     },
-   };
-   export default config;
-   ```
-
-2. **プラグインの使用**
-
-   ```ts
-   // next.config.mjs
-   import { withIntlayer } from "next-intlayer/server";
-
-   /** @type {import('next').NextConfig} */
-   const nextConfig = {};
-
-   export default withIntlayer(nextConfig);
-   ```
-
-3. **ミドルウェアの追加**
-
-   ```ts
-   // src/middleware.ts
-   export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
-
-   export const config = {
-     matcher:
-       "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
-   };
-   ```
-
-4. **ローカライズされたレイアウトの作成**
-
-   ```tsx
-   // src/app/[locale]/layout.tsx
-   import { getHTMLTextDir } from "intlayer";
-   import { NextLayoutIntlayer } from "next-intlayer";
-
-   const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
-     const { locale } = params;
-     return (
-       <html lang={locale} dir={getHTMLTextDir(locale)}>
-         <body>{children}</body>
-       </html>
-     );
-   };
-
-   export { generateStaticParams } from "next-intlayer";
-   export default LocaleLayout;
-   ```
-
-5. **コンテンツの宣言と使用**
-
-   ```tsx
-   // src/app/[locale]/page.content.ts
-   import { t } from "intlayer";
-
-   export default {
-     key: "page",
-     content: {
-       getStarted: {
-         main: t({
-           en: "Get started by editing",
-           fr: "Commencez par éditer",
-           es: "Comience por editar",
-         }),
-         pageLink: "src/app/page.tsx",
-       },
-     },
-   };
-   ```
-
-   ```tsx
-   // src/app/[locale]/page.tsx
-   import { IntlayerServerProvider } from "next-intlayer/server";
-   import { IntlayerClientProvider, useIntlayer } from "next-intlayer";
-
-   const PageContent = () => {
-     const { content } = useIntlayer("page");
-     return (
-       <>
-         <p>{content.getStarted.main}</p>
-         <code>{content.getStarted.pageLink}</code>
-       </>
-     );
-   };
-
-   export default function Page({ params }) {
-     return (
-       <IntlayerServerProvider locale={params.locale}>
-         <IntlayerClientProvider locale={params.locale}>
-           <PageContent />
-         </IntlayerClientProvider>
-       </IntlayerServerProvider>
-     );
-   }
-   ```
-
-   </details>
+## 実践的な移行ノート（next-intl / next-i18next → Intlayer）
+
+- **機能ごとに開始**：ルートやコンポーネントを一度に一つずつ**ローカル辞書**に移行します。
+- **旧カタログを並行して維持**：移行中の橋渡しとして使用し、一斉移行は避けます。
+- **厳密なチェックを有効化**：ビルド時の検出で早期にギャップを明らかにします。
+- **ミドルウェアとヘルパーを採用**：サイト全体でロケール検出とSEOタグを標準化します。
+- **バンドルサイズを測定**：未使用のコンテンツが削除されるため、**バンドルサイズの削減**が期待できます。
 
 ---
 
 ## 結論
 
-**next-intl**, **next-i18next**, **Intlayer** の各ソリューションは、マルチリンガルな Next.js プロジェクトに対して効果的であることが証明されています。しかし、**Intlayer** はさらに前に進み：
+3つのライブラリはすべてコアなローカリゼーションに成功しています。違いは、**モダンな Next.js で堅牢でスケーラブルなセットアップを実現するためにどれだけの作業が必要か**です：
 
-- **コンポーネントレベルの翻訳アーキテクチャを強力に推奨**
-- **Next.js 13+ と Server Components にシームレスに統合**
-- **強力な TypeScript** 自動生成による安全なコード
-- **欠損翻訳をビルド時に処理**
-- **高度なルーティングとミドルウェアによる**単純化された、単一の構成アプローチを提供
+- **Intlayer**では、**モジュラーコンテンツ**、**厳格なTS**、**ビルド時の安全性**、**ツリーシェイクされたバンドル**、そして**一流のApp Router + SEOツール**が**デフォルト**であり、手間ではありません。
+- チームが多言語対応のコンポーネント駆動型アプリにおいて**保守性と速度**を重視するなら、Intlayerは今日最も**完全な**体験を提供します。
 
-**Next.js App Router** に特化した現代的な i18n 機能を求めていて、手動でのフォールバックロジックやルートの書き換え、複雑なビルドステップなしに **完全に型指定された** 経験を探しているなら、**Intlayer** は魅力的な選択肢です。セットアップ時間を短縮するだけでなく、チームのために翻訳のより維持可能でスケーラブルなアプローチを保証します。
+詳細は[『なぜIntlayerか？』ドキュメント](https://intlayer.org/doc/why)を参照してください。