@intlayer/docs 9.5.6 → 9.5.8

package/blog/ja/next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs Intlayer: 2026 ベンチマーク＆比較"
 description: Bundle size、content leakage、locale-switch の反応性、および Next.js と TanStack Start での開発者体験を測定。2026年ではどのi18nライブラリを選ぶべきでしょうか？
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # next-intl VS Intlayer | Next.js 国際化 (i18n) ベンチマーク
 
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `next-intl`はNext.jsで最も人気のあるi18nライブラリです。Intlayerはコンパイラベース、コンポーネントスコープの代替案です。どちらもApp Routerアプリケーションをローカライズします。問題は、アプリがビルドされた後、それぞれがどの程度のコストがかかるかということです。
 
 この記事はチュートリアルではありません。[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)からの数値に基づいた比較です。Benchmark Bloomはオープンソースのベンチマークスイートで、各ライブラリで同じアプリケーションをビルドし、ブラウザが実際にダウンロードして実行するものを測定します。
@@ -96,6 +98,10 @@ Intlayerには「scoped」バリアントがありません。compilerはコン
 
 ### Next.js（App Router）の結果
 
+関心のあるメトリクスとライブラリを選択してください:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Library                        | Strategy       | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity | Hydration |
 | ------------------------------ | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | --------: |
 | **base** (i18n なし)           | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |        13.4 ms |   11.8 ms |
@@ -116,6 +122,15 @@ Intlayerには「scoped」バリアントがありません。compilerはコン
 - **コンポーネントサイズ。** `useTranslations()`を呼び出すコンポーネントは平均21.8 KBにコンパイルされ、`useIntlayer()`を使用した同じコンポーネントは6.9 KBにコンパイルされます。`scoped-static`セットアップでは、各コンポーネントがそのnamespace catalogをインラインで含めるため、`next-intl`コンポーネントは80.1 KBにジャンプします。
 - **リアクティビティとhydration**は、Next.js上の両方のライブラリで同じ範囲内です（15-18 ms）。ここではどちらもボトルネックではありません。
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> すべてのライブラリと戦略を含む完全な表は、[Next.js ベンチマークレポート](https://intlayer.org/ja/doc/benchmark/nextjs)にあります。
+
 ### TanStack Startでの結果（`use-intl`）
 
 `use-intl`は`next-intl`のframework-agnosticなコアです。同じAPI、同じメッセージフォーマット。TanStack Startで`intlayer`と比較することで、方程式からNext.js固有の部分を削除します。
@@ -139,8 +154,19 @@ Intlayerには「scoped」バリアントがありません。compilerはコン
 - **コンポーネントサイズはアーキテクチャが表れる場所です**：`use-intl`ではコンポーネントあたり76～87 KB対Intlayerの6～8 KB。`useTranslations()`は各コンポーネントをグローバルメッセージツリーにバインドします。`useIntlayer()`はそれを独自の辞書にバインドします。
 - **ロケール切り替え**は Intlayer で 2 倍～4 倍高速化されています（3 ms 対 7-21 ms）。
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> 完全な表は [TanStack Start ベンチマークレポート](https://intlayer.org/ja/doc/benchmark/tanstack) にあります。
+
 ## なぜギャップがあるのか？集中型カタログ vs コンパイル済み辞書
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `next-intl` は従来のモデルに従います：ロケールごとに 1 つの JSON、`getRequestConfig` で読み込み、`NextIntlClientProvider` にプッシュされ、`t("namespace.key")` で読まれます。
 
 ```bash
@@ -162,6 +188,10 @@ Intlayerには「scoped」バリアントがありません。compilerはコン
 
 ランタイムはページがどのキーを使用するかを知ることができないため、安全なデフォルトはカタログ全体を送信することです。最適化するには、**あなた**がカタログを namespace に分割し、**あなた**が各ページに必要な namespace を決定し、**あなた**がコンポーネントが移動するにつれてそのマッピングを同期させ続ける必要があります。ベンチマークの `scoped-dynamic` 行はその作業の報酬であり、ほとんどのチームはそこに到達しません。
 
+その最適化を行わない場合のコストは、ページ数とロケール数の2つの軸で同時に増大します:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer は責任を逆転させます。コンテンツはコンポーネントの隣に宣言されます：
 
 ```bash
@@ -189,7 +219,8 @@ Intlayer は責任を逆転させます。コンテンツはコンポーネン
 
 ### Client component
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```json fileName="messages/en.json"
 {
@@ -226,7 +257,8 @@ export const Counter = () => {
 
 > このコンポーネントをレンダリングするすべてのページで、`NextIntlClientProvider`に渡されるメッセージに`counter`名前空間を含めることを忘れないでください。
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -269,11 +301,14 @@ export const Counter = () => {
 
 ページに登録する必要はありません。コンポーネントが独自のコンテンツを提供します。
 
+</Tab>
+</Tabs>
 ### 同期サーバーコンポーネント
 
 Design-system pieces (navbar, footer, cards) はしばしば client components の子として render される server components であるため、`async` にすることはできません。
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -291,7 +326,8 @@ export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
 
 ページは `await getTranslations("counter")` と `await getFormatter()` を実行し、その結果を props として下に渡す必要があります。コンポーネントはもはや self-contained ではありません。
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -311,9 +347,12 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
 ### メタデータ
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import type { Metadata } from "next";
@@ -348,7 +387,8 @@ export const generateMetadata = async ({
 };
 ```
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import { getIntlayer, getMultilingualUrls } from "intlayer";
@@ -372,6 +412,9 @@ export const generateMetadata = async ({
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## next-intl API を維持しながら Intlayer の出力を取得する
 
 ベンチマーク結果を得るためにコンポーネントを書き換える必要はありません。`@intlayer/next-intl` はドロップイン アダプターです。`useTranslations`、`getTranslations`、`useFormatter`、`t.rich()`、ICU複数形、および `next-intl/navigation` ヘルパーを保持し、Intlayer コンパイラでコンパイルされた Intlayer辞書から提供します。
@@ -393,17 +436,84 @@ export default withIntlayer(nextConfig);
 
 ## どちらを選ぶべきか？
 
-- **next-intl を選ぶべきケース**: Next.js のエコシステム標準を重視する場合、ICU MessageFormat に依存している場合、アプリが小〜中規模の場合、または中央集権型の JSON を想定する翻訳プラットフォーム（Crowdin、Phrase、Lokalise など）と統合する場合。パフォーマンスが重要な場合は、名前空間カタログの分割やページごとのメッセージ抽出に時間を割く必要があります。
-- **Intlayer を選ぶべきケース**: **コンポーネント単位のコンテンツ**、**厳格な TypeScript**、**ビルド時のキー不足エラー検出**、**設定不要のツリーシェイキングと遅延読み込み**、同期サーバーコンポーネント、組み込みの編集ツール（ビジュアルエディター、CMS、AI 翻訳、MCP サーバー）を求める場合。特に大規模でモジュール化されたコードベースやデザインシステムに適しています。
-- **`@intlayer/next-intl` を選ぶべきケース**: すでに `next-intl` を使用しており、コードを書き換えることなくバンドルサイズの削減効果を得たい場合。
+<AccordionGroup>
+<Accordion header="next-intl を選ぶ理由">
+
+Next.js のエコシステム標準を求め、ICU MessageFormat に依存しており、アプリが中小規模であるか、集中型 JSON を前提とする翻訳プラットフォーム（Crowdin、Phrase、Lokalise...）と連携する場合。パフォーマンスを重視するなら、カタログをネームスペースに分割し、ページごとに `pick()` でメッセージを選別する工数を確保してください。
+
+</Accordion>
+<Accordion header="Intlayer を選ぶ理由">
+
+**コンポーネントスコープのコンテンツ**、**厳格な TypeScript**、**ビルド時のキー不足エラー検出**、**手間のかからないツリーシェイキングと遅延読み込み**、同期サーバーコンポーネント、組み込みの編集ツール（[ビジュアルエディタ](https://intlayer.org/ja/doc/concept/editor), [CMS](https://intlayer.org/ja/doc/concept/cms), [AI翻訳](https://intlayer.org/ja/doc/concept/auto-fill), [MCPサーバー](https://intlayer.org/ja/doc/mcp-server)）が必要な場合。特に大規模でモジュール化されたコードベースやデザインシステムに適しています。
+
+</Accordion>
+<Accordion header="@intlayer/next-intl を選ぶ理由">
+
+すでに `next-intl` を導入しており、コードを書き直すことなくバンドルサイズの削減効果を得たい場合。[互換アダプター](https://intlayer.org/ja/doc/compatibility/next-intl)により、既存のインポートと `messages/{locale}.json` ファイルを信頼できる唯一の情報源として維持できます。[next-intl vs @intlayer/next-intl](https://intlayer.org/ja/blog/next-intl-vs-intlayer-next-intl) で直接比較されています。
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="next-intl は Intlayer より遅いですか？">
+
+レンダリング時は変わりません。違いはブラウザに配信されるサイズにあります。`next-intl` は各ページで **+12.6 KB gzip** のランタイムを要し、一般的な構成では他のページのテキストの約90%を一緒に配信してしまいます。Next.js でのロケール切り替えとハイドレーション時間はほぼ同等です（15-18ミリ秒）。TanStack Start では `use-intl` が7-21ミリ秒かかるのに対し、Intlayer は3-4ミリ秒です。
+
+</Question>
+
+<Question title="next-intl で漏洩率0%を達成できますか？">
+
+はい、`scoped-dynamic` 構成を採用すれば可能です。`messages/{locale}.json` をルートごとのネームスペースに分割し、各ページで `pick(messages, [...])` を適用し、コンポーネント移動時にもそのマッピングを正確に維持します。ベンチマークの `scoped-*` 行はその作業の成果を示しています。Intlayer はコンパイラがコンポーネントごとにコンテンツをスコープ化するため、何もしなくてもデフォルトで0%を達成します。[バンドル最適化](https://intlayer.org/ja/doc/concept/bundle-optimization)を参照してください。
+
+</Question>
+
+<Question title="移行のためにコンポーネントを書き直す必要がありますか？">
+
+いいえ。`@intlayer/next-intl` は `useTranslations`、`getTranslations`、`useFormatter`、`t.rich()`、ICU複数形、ナビゲーションヘルパーを維持し、コンパイル済み辞書から提供します。`next.config.ts` にプラグインを1行追加するだけです。詳細は [next-intl 移行ガイド](https://intlayer.org/ja/doc/migration/next-intl) をご覧ください。
+
+</Question>
+
+<Question title="Intlayer は ICU MessageFormat をサポートしていますか？">
+
+ネイティブAPIでのICUサポートは順次拡張中です。互換アダプター（`@intlayer/next-intl`、`@intlayer/use-intl`）はすでにICUを実行可能です。複数形、`select`、`selectordinal`、`#`、`{ts, date, long}` は Intlayer のICUリゾルバーを介して処理されます。詳しくは [ICU メッセージ形式の解説](https://intlayer.org/ja/blog/icu-message-format) をお読みください。
+
+</Question>
+
+<Question title="messages/{locale}.json ファイルを維持できますか？">
+
+はい。[JSON同期プラグイン](https://intlayer.org/ja/doc/compatibility/next-intl)がそれらを読み込み、トップレベルのキーを辞書に分割し、CLIやCMSの更新時に同じファイルへ翻訳を書き戻します。翻訳チームのワークフローを変える必要はありません。
+
+</Question>
+
+</FAQ>
 
 ## 関連する比較
 
-- [i18next vs Intlayer](https://intlayer.org/ja/blog/i18next-vs-intlayer) (同一ベンチマーク)
-- [Lingui vs Intlayer](https://intlayer.org/ja/blog/lingui-vs-intlayer) (同一ベンチマーク)
-- [vue-i18n vs Intlayer ベンチマーク](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark) (同一ベンチマーク)
+同じベンチマーク、他のライブラリ:
+
+- [i18next vs Intlayer](https://intlayer.org/ja/blog/i18next-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/ja/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark)
 - [next-i18next vs next-intl vs Intlayer](https://intlayer.org/ja/blog/next-i18next-vs-next-intl-vs-intlayer)
-- [next-intl は時代遅れか？](https://intlayer.org/ja/blog/is-next-intl-outdated)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/ja/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+next-intl についてさらに詳しく:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/ja/blog/next-intl-vs-intlayer-next-intl), 同一アプリで測定されたアダプター
+- [Is next-intl outdated?](https://intlayer.org/ja/blog/is-next-intl-outdated)
+- [Using Intlayer with next-intl](https://intlayer.org/ja/blog/intlayer-with-next-intl)
+- [How to internationalize a Next.js app with next-intl](https://intlayer.org/ja/blog/nextjs-internationalization-using-next-intl)
+
+リファレンスドキュメント:
+
+- [Next.js ベンチマークレポート](https://intlayer.org/ja/doc/benchmark/nextjs) および [TanStack Start ベンチマークレポート](https://intlayer.org/ja/doc/benchmark/tanstack)
+- [互換アダプター: next-intl](https://intlayer.org/ja/doc/compatibility/next-intl) および [移行ガイド](https://intlayer.org/ja/doc/migration/next-intl)
+- [バンドル最適化](https://intlayer.org/ja/doc/concept/bundle-optimization) および [Intlayer コンパイラ](https://intlayer.org/ja/doc/compiler)
+- [コンポーネント単位 vs 集中型 i18n](https://intlayer.org/ja/blog/per-component-vs-centralized-i18n)
+- [コンパイラ駆動 vs 宣言型 i18n](https://intlayer.org/ja/blog/compiler-vs-declarative-i18n)
 
 ## GitHub STARS
 

package/blog/ja/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: 同じAPI、異なるBundle"
 description: Vue 3アプリが vue-i18n の呼び出しを保持しながら、@intlayer/vue-i18n compat adapterを通じてそれらをサーブする場合の変更点。同じ Vite + Vue コード上での、ページごとのJavaScript、ランタイムサイズ、コンポーネントサイズとリークの測定、およびアダプターが保持、無視、および置き換えることができないものの説明。
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | 同じAPI、異なるBundle
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` は互換性アダプター：vue-i18n API (`createI18n`、`useI18n`、`t()`、`d()`、`n()`、`$t`、`v-t`、`i18n.global.locale`...) を公開し、Intlayer によってコンパイルされたディクショナリから提供します。`.vue` ファイルは変わりません。`t("footer.github")` がバインドされるものが変わるだけです。
 
 この記事では、同じVite + Vue 3アプリケーションでこのスワップを測定します。このアプリケーションは`vue-i18n`で1回、アダプターで1回ビルドされました。数値は[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)から取得されています。ライブラリとして比較される`vue-i18n`とIntlayerについては、[vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer)と[vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark)を参照してください。この記事は、コンポーネントをそのまま保つ場合にアダプターが何を変更するかについてです。
@@ -105,6 +107,10 @@ const { t } = useI18n(_dicHash_footer);
 
 ### Vite + Vue 3 での結果
 
+関心のある指標とライブラリを選択してください：
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ const { t } = useI18n(_dicHash_footer);
 - **リアクティビティとページ読み込み.** ロケール切り替えは両者にとって安価です（1.5～2.8 ms）；Vueのリアクティビティシステムは、メッセージがメモリ内にあれば可能にします。ページ読み込みは13.6 msから**9.3 ms**に短縮され、88 KBのJavaScriptのパースが減少することと一致しています。
 - **ネイティブ行について。** このrun で、`vue-intlayer` は `static` モードですべてのロケールをバンドルし、57.1 KB に到達し、3.9 KB のランタイムを実装しました。アダプタの同期辞書は外国語ロケール文字列が少なかったため、ページごとの数値が低くなりました。ネイティブランタイムは 3 つの中で最も軽量のままであり、その `.content.ts` モデルは SFC `<i18n>` ブロックが同等のものを見つける場所です。
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> すべてのライブラリと各戦略の完全な表は、[Vueベンチマークレポート](https://intlayer.org/ja/doc/benchmark/vue)をご覧ください。
+
 ## 数値が移動する理由
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 `src/components/` の何も変わっていないため、ゲインは `useI18n` がバインドされているものから来ています。
 
-**`vue-i18n`を使用する場合**、バインディングはグローバルインスタンスです。`createI18n({ messages: { en, fr, ... } })`は everything を保持する1つのインポートであり、`useI18n()`を呼び出すすべてのコンポーネントはそのすべてにアクセスできるため、bundler はインスタンス以下で分割できません。最適化とは、_あなたが_`en.json`をルートごとに分割し、router guard で`setLocaleMessage()`を呼び出し、コンポーネントが移動するときにルートからファイルへのマップを正確に保つことを意味します。
+**`vue-i18n`を使用する場合**、バインディングはグローバルインスタンスです。`createI18n({ messages: { en, fr, ... } })`は everything を保持する1つのインポートであり、`useI18n()`を呼び出すすべてのコンポーネントはそのすべてにアクセスできるため、bundler はインスタンス以下で分割できません。最適化とは、_あなたが_`en.json`をルートごとに分割し、router guard で`setLocaleMessage()`を呼び出し、コンポーネントが移動するときにルートからファイルへのマップを正確に保つことを意味します。 無駄はページとロケールの2つの軸で同時に増加します：
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## 始める前に知っておくべき制限事項
 
-- **SFC `<i18n>` ブロックは読み込まれません。** メッセージがコンポーネント内に存在する場合、それらをロケールファイル（または `.content.ts`、これは型付きの同じ概念）に移動する必要があります。
-- **ランタイムメッセージロードは廃止されました。** `setLocaleMessage()` と `mergeLocaleMessage()` は警告を出して返されます。実行時に CMS から取得した翻訳には、Intlayer の CMS、または `intlayer pull` / `push` コマンドが必要です。
-- **`messages` はフォールバックであり、無料ではありません。** `createI18n()` で JSON import を保持すると、bundle に 75 KB が保持されます。`intlayer test` がパスしたら削除してください。
-- **アダプターはネイティブランタイムではありません。** `vue-intlayer` の 3.9 KB に対して 7.9 KB です。すべてのコンポーネントが `useIntlayer` に移行したら、削除してください。
+<AccordionGroup>
+<Accordion header="SFC <i18n> ブロックは読み取られません">
+
+メッセージがコンポーネント内にある場合は、ロケールファイルまたは生成された型を持つ同じ概念の `.content.ts` に移動する必要があります。
+
+</Accordion>
+<Accordion header="ランタイムでのメッセージ読み込みは削除されました">
+
+`setLocaleMessage()` および `mergeLocaleMessage()` は警告を出力して返ります。実行時にCMSから取得される翻訳には、[Intlayer CMS](https://intlayer.org/ja/doc/concept/cms) または `intlayer pull` / `push` コマンドが必要です。
+
+</Accordion>
+<Accordion header="messages はフォールバックであり、無料ではありません">
+
+`createI18n()` 内のJSONインポートを保持すると、バンドル内に75 KBが残ります。`intlayer test` が成功したら削除してください。
+
+</Accordion>
+<Accordion header="アダプターはネイティブランタイムではありません">
+
+`vue-intlayer` の3.9 KBに対してアダプターは7.9 KBです。すべてのコンポーネントが `useIntlayer` に移行したら削除してください。
+
+</Accordion>
+</AccordionGroup>
 
 ## どのような場合にどちらを使うか？
 
-- **`vue-i18n` に留まる** アプリが SFC `<i18n>` ブロック、ランタイム `setLocaleMessage()` フロー、または 90 KB/ページがオーディエンスにとって問題でない場合。
-- **`@intlayer/vue-i18n` を使用する** `vue-i18n` を使用しており、88 KB の削減、コンポーネント 23 倍小型化、0% ページリーク、型付きキー、`.vue` ファイル編集なしの CI チェックが必要な場合。これは既存の `vue-i18n` コードベースのエントリーポイントです。
-- **ネイティブ (`vue-intlayer`) に移行する** 新規プロジェクト、またはアダプターが役目を果たした後。最軽量のランタイム (3.9 KB) と、`<i18n>` ブロックを型付きコンテンツで置き換える、コンポーネント単位の `.content.ts` モデルを備えています。
+<AccordionGroup>
+<Accordion header="vue-i18n を継続利用する">
+
+アプリがSFC `<i18n>` ブロックやランタイムの `setLocaleMessage()` フローに依存している場合、またはページあたり90 KBがユーザー層にとって懸念事項でない場合。
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n を使用する">
+
+`vue-i18n` を使用中で、`.vue` ファイルを編集せずに88 KBの削減、23倍小さいコンポーネント、0%のページリーク、型付けされたキー、CIチェックを実現したい場合。既存の `vue-i18n` コードベースのエントリポイントとなります。
+
+</Accordion>
+<Accordion header="ネイティブに移行する (vue-intlayer)">
+
+新規プロジェクト、またはアダプターが役割を果たした後向けです。最も軽量なランタイム（3.9 KB）と、`<i18n>` ブロックを型付きコンテンツに置き換えるコンポーネント単位の `.content.ts` モデルを備えています。[VueとIntlayer](https://intlayer.org/ja/doc/environment/vite-and-vue) または [Nuxtとの組み合わせ](https://intlayer.org/ja/doc/environment/nuxt-and-vue) から始めてください。
+
+</Accordion>
+</AccordionGroup>
+
+## よくある質問
+
+<FAQ>
+
+<Question title=".vue ファイルを編集する必要がありますか？">
+
+いいえ。ベンチマークのビルドでは、`vite.config.ts`、`intlayer.config.ts`、そして `src/i18n.ts` 内の `messages` インポートの1行のみを変更しました。すべての `useI18n()`、`$t`、`v-t`、Options APIの呼び出し箇所はそのまま保持されました。
+
+</Question>
+
+<Question title="なぜコンポーネントサイズが23倍も小さいのですか？">
+
+`useI18n()` がグローバルインスタンスの参照を停止するためです。`createI18n({ messages })` はすべてのロケールの全メッセージを保持するため、単独でコンパイルされたコンポーネントでも196 KBを引き込みます。アダプターを使用すると、自身の辞書のみにアクセスします：8.4 KB。
+
+</Question>
+
+<Question title="d() や n() のフォーマットはどうなりますか？">
+
+維持されます。`createI18n()` に渡された `datetimeFormats` と `numberFormats` は尊重され、ネイティブの `Intl` APIによって処理されます。[日付、時間、数値のフォーマット](https://intlayer.org/ja/blog/date-time-number-formatting-locales)をご覧ください。
+
+</Question>
+
+<Question title="Nuxt でも動作しますか？">
+
+`@intlayer/vue-i18n` は Vite + Vue を対象としています。`@nuxtjs/i18n` については、[Nuxt i18n 互換アダプター](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n) を使用し、ネイティブ構成については [NuxtとIntlayer](https://intlayer.org/ja/doc/environment/nuxt-and-vue) をご覧ください。
+
+</Question>
+
+<Question title="コンポーネントごとに段階的に移行できますか？">
+
+はい。任意のコンポーネントで、同一ディレクトリのコンテンツファイルを使用して `useI18n()` から `useIntlayer("footer")` に切り替えることができます。JSON と `.content.ts` の辞書は共存してマージされます。
+
+</Question>
+
+</FAQ>
 
 ## 関連する比較
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (機能とDX)
-- [vue-i18n vs Intlayer ベンチマーク](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (ライブラリ、同じベンチマーク)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (同じアダプターシリーズ)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (同じアダプターシリーズ)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (同じアダプターシリーズ)
-- [マイグレーションガイド: vue-i18n to Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [互換性アダプターリファレンス: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+同じアダプターシリーズ：
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/ja/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/ja/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/ja/blog/lingui-vs-intlayer-lingui)
+
+直接比較されたライブラリ：
+
+- [vue-i18n vs Intlayer](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/ja/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/ja/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/ja/blog/how-to-pick-vue-i18n-library)
+
+リファレンスドキュメント：
+
+- [Compat adapter: vue-i18n](https://intlayer.org/ja/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/ja/doc/compatibility/nuxtjs-i18n)
+- [移行ガイド：vue-i18n から Intlayer へ](https://intlayer.org/ja/doc/migration/vue-i18n)
+- [Vueベンチマークレポート](https://intlayer.org/ja/doc/benchmark/vue)
+- [バンドル最適化](https://intlayer.org/ja/doc/concept/bundle-optimization) と [Intlayerコンパイラ](https://intlayer.org/ja/doc/compiler)
+- [ビジュアルエディター](https://intlayer.org/ja/doc/concept/editor)、[CMS](https://intlayer.org/ja/doc/concept/cms) および [AI翻訳](https://intlayer.org/ja/doc/concept/auto-fill)
 
 ## 結論
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 すべてのrawデータ、テストアプリ、スクリプトは[Benchmark Bloomリポジトリ](https://github.com/intlayer-org/benchmark-bloom)にあります。自分で実行してみてください。
 
-詳細については、['Intlayerについて'ドキュメント](https://intlayer.org/doc/why)を参照してください。
+詳細については、['Intlayerについて'ドキュメント](https://intlayer.org/ja/doc/why)を参照してください。