@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ja/intlayer_with_nextjs_compiler.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-06
-title: Next.js i18n - 既存の Next.js アプリを多言語アプリに変換する 2026
-description: Intlayerコンパイラを使用して、既存のNext.jsアプリケーションを多言語化する方法を学びます。ドキュメントに従って国際化（i18n）し、AIを利用して翻訳を行います。
+updatedAt: 2026-05-31
+title: "Next.js i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Next.jsアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -81,7 +81,9 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 
 ## Next.jsアプリケーションでのIntlayer設定ステップバイステップガイド
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 好みのパッケージマネージャーを使用して必要なパッケージをインストールします：
 
@@ -117,7 +119,9 @@ bun x intlayer init
 
   IntlayerをNext.jsと統合するパッケージ。Next.jsの国際化のためのコンテキストプロバイダーとフックを提供します。さらに、Intlayerを[Webpack](https://webpack.js.org/)または[Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)と統合するためのNext.jsプラグイン、ユーザーの優先ロケールを検出、Cookie管理、URLリダイレクトを処理するためのミドルウェアが含まれています。
 
-### ステップ2: プロジェクトの構成
+</Step>
+
+<Step number={2} title="プロジェクトの構成">
 
 アプリケーションの言語を定義するための設定ファイルを作成します：
 
@@ -174,7 +178,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、プロキシリダイレクト、Cookieマッピング、コンテンツ宣言の場所と拡張子の設定、コンソールでのIntlayerログの無効化などを行えます。使用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Next.jsの設定にIntlayerを統合する
+</Step>
+
+<Step number={3} title="Next.jsの設定にIntlayerを統合する">
 
 Next.jsのセットアップをIntlayerを使用するように構成します：
 
@@ -190,29 +196,9 @@ export default withIntlayer(nextConfig);
 ```
 
 > `withIntlayer()` Next.jsプラグインは、IntlayerとNext.jsを統合するために使用されます。これにより辞書ファイルがビルドされ、devモードで監視されます。[Webpack](https://webpack.js.org/)または[Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)環境内でIntlayer環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供し、Server Componentsと完全に連携します。
+> </Step>
 
-### Babel の構成
-
-Intlayerコンパイラは、コンテンツを抽出し最適化するためにBabelを必要とします。 `babel.config.js`（または `babel.config.json`）を更新してIntlayerプラグインを含めます：
-
-```typescript fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  intlayerOptimizeBabelPlugin,
-  getExtractPluginOptions,
-  getOptimizePluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
-  ],
-};
-```
-
-### ステップ4: ページでのロケール検出
+<Step number={4} title="ページでのロケール検出">
 
 `RootLayout` の内容をクリアし、以下の例に置き換えます：
 
@@ -255,7 +241,9 @@ const RootLayout = async ({
 export default RootLayout;
 ```
 
-### ステップ5: コンテンツを宣言する（自動）
+</Step>
+
+<Step number={5} title="コンテンツを宣言する（自動）">
 
 コンパイラを有効にすると、コンテンツ辞書（`.content.ts`ファイルなど）を**手動で宣言する必要がなくなります**。
 
@@ -351,7 +339,9 @@ export default async function Page() {
 
   > Layout and page cannot share a common server context because the server context system is based on a per-request data store (via [React's cache](https://react.dev/reference/react/cache) mechanism), causing each "context" to be re-created for different segments of the application. Placing the provider in a shared layout would break this isolation, preventing the correct propagation of the server context values to your server components.
 
-### (オプション) ステップ 7: 不足している翻訳を埋める
+</Step>
+
+<Step number={7} title="不足している翻訳を埋める" isOptional={true}>
 
 Intlayerは、不足している翻訳を埋めるためのCLIツールを提供しています。 `intlayer` コマンドを使用して、コード内の不足している翻訳をテストして埋めることができます。
 
@@ -389,7 +379,9 @@ bun x intlayer fill         # 不足している翻訳を埋める
 
 > 詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/ci.md)を参照してください。
 
-### (オプション) ステップ 8: ローカライズされたルーティングプロキシミドルウェア
+</Step>
+
+<Step number={8} title="ローカライズされたルーティングプロキシミドルウェア" isOptional={true}>
 
 ユーザーを優先ロケールに自動的にリダイレクトしたい場合は、プロキシミドルウェアを設定します：
 
@@ -404,7 +396,9 @@ export const config = {
 
 > `intlayerProxy` は、ユーザーの優先ロケールを検出し、[設定ファイルのセッティング](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)に従って適切なURLにリダイレクトするために使用されます。また、ユーザーの優先ロケールをCookieに保存することも可能です。
 
-### (オプション) ステップ 9: コンテンツの言語を変更する
+</Step>
+
+<Step number={9} title="コンテンツの言語を変更する" isOptional={true}>
 
 Next.js内でコンテンツの言語を変更する最も推奨される方法は、 `Link` コンポーネントを使用してユーザーを適切な言語ルートに誘導することです。これにより、Next.jsのプリフェッチ機能を活用し、ページ全体がハードリフレッシュされるのを防ぐことができます。
 
@@ -454,7 +448,9 @@ export const LocaleSwitcher: FC = () => {
 
 > 別の方法として、 `useLocale` フックの `setLocale` 関数を使用することもできますが、こちらはページプリフェッチを許可しません。詳細については、 [`useLocale` フックのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useLocale.md) を参照してください。
 
-### (オプション) ステップ 10: バンドルサイズの最適化
+</Step>
+
+<Step number={10} title="バンドルサイズの最適化" isOptional={true}>
 
 `next-intlayer` を使用する場合、デフォルトで各ページのバンドルに辞書が含まれます。バンドルサイズを最適化するために、Intlayerはマクロを使用して `useIntlayer` コールを賢く置き換えるオプションのSWCプラグインを提供しています。これにより、辞書は実際に使用されるページのバンドルにのみ含まれるようになります。
 
@@ -481,54 +477,9 @@ bun add @intlayer/swc --dev
 > 注: Next.js の SWC プラグインはまだ試験段階であるため、このパッケージはデフォルトではインストールされていません。これは将来的に変更される可能性があります。
 
 > 注: （辞書設定で） `importMode: 'dynamic'` または `importMode: 'fetch'` を設定した場合、Suspense に依存するため、 `useIntlayer` コールを `Suspense` 境界で囲む必要があります。そのため、ページ / レイアウトコンポーネントのトップレベルで直接 `useIntlayer` を使用することはできなくなります。
+> </Step>
 
-### TypeScript 設定
-
-Intlayerは、TypeScriptの利点を活用し、コードベースをより堅牢にするためにモジュール拡張（module augmentation）を使用しています。
-
-![自動補完](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-TypeScriptの設定に自動生成された型が含まれていることを確認してください。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 既存の TypeScript 設定
-  "include": [
-    // ... 既存の TypeScript 設定
-    ".intlayer/**/*.ts", // 自動生成された型を含める
-  ],
-}
-```
-
-### Git 設定
-
-Intlayerによって生成されたファイルを無視することを推奨します。これにより、Gitリポジトリにコミットされるのを防ぎます。
-
-これを行うには、 `.gitignore` ファイルに以下の指示を追加します：
-
-```plaintext fileName=".gitignore"
-# Intlayerによって生成されたファイルを無視
-.intlayer
-```
-
-### VS Code 拡張機能
-
-Intlayerでの開発体験を向上させるために、**公式の Intlayer VS Code 拡張機能** をインストールできます。
-
-[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-この拡張機能は以下を提供します：
-
-- 翻訳キーの **自動補完**。
-- 不足している翻訳の **リアルタイムエラー検出**。
-- 翻訳されたコンテンツの **インラインプレビュー**。
-- 翻訳を簡単に作成・更新できる **クイックアクション**。
-
-拡張機能の使用方法の詳細については、 [Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension) を参照してください。
-
-### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+<Step number={1} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
 
@@ -640,6 +591,76 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Babel の構成
+
+Intlayerコンパイラは、コンテンツを抽出し最適化するためにBabelを必要とします。 `babel.config.js`（または `babel.config.json`）を更新してIntlayerプラグインを含めます：
+
+```typescript fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+### TypeScript 設定
+
+Intlayerは、TypeScriptの利点を活用し、コードベースをより堅牢にするためにモジュール拡張（module augmentation）を使用しています。
+
+![自動補完](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![翻訳エラー](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+TypeScriptの設定に自動生成された型が含まれていることを確認してください。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 既存の TypeScript 設定
+  "include": [
+    // ... 既存の TypeScript 設定
+    ".intlayer/**/*.ts", // 自動生成された型を含める
+  ],
+}
+```
+
+### Git 設定
+
+Intlayerによって生成されたファイルを無視することを推奨します。これにより、Gitリポジトリにコミットされるのを防ぎます。
+
+これを行うには、 `.gitignore` ファイルに以下の指示を追加します：
+
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視
+.intlayer
+```
+
+### VS Code 拡張機能
+
+Intlayerでの開発体験を向上させるために、**公式の Intlayer VS Code 拡張機能** をインストールできます。
+
+[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+この拡張機能は以下を提供します：
+
+- 翻訳キーの **自動補完**。
+- 不足している翻訳の **リアルタイムエラー検出**。
+- 翻訳されたコンテンツの **インラインプレビュー**。
+- 翻訳を簡単に作成・更新できる **クイックアクション**。
+
+拡張機能の使用方法の詳細については、 [Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension) を参照してください。
 
 ### さらに進む
 

package/docs/ja/intlayer_with_nextjs_no_locale_path.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-06
-title: Next.js i18n - Next.js 16アプリの翻訳方法（ページパスに [locale] を含めない） 2026
-description: ページパスに [locale] を含めずに Next.js 16 ウェブサイトを多言語対応にする方法を紹介します。ドキュメントに従って国際化（i18n）と翻訳を行ってください。
+updatedAt: 2026-05-31
+title: "Next.js 16 i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Next.js 16アプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -53,25 +53,49 @@ GitHub の [アプリケーションテンプレート](https://github.com/aymer
 
 <TOC/>
 
-## Intlayer とは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer** は、現代のウェブアプリケーションにおける多言語対応を簡素化するために設計された、革新的なオープンソースの国際化（i18n）ライブラリです。Intlayer は、強力な **App Router** を含む最新の **Next.js 16** フレームワークとシームレスに統合されます。効率的なレンダリングのために **Server Components** を活用するよう最適化されており、[**Turbopack**](https://nextjs.org/docs/architecture/turbopack) と完全に互換性があります。
+「next-intl」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayer を使うと、以下が可能になります：
+**Next.js を完全にカバー**
 
-- **コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **クライアント側およびサーバー側のコンポーネントの両方で翻訳にアクセス**できます。
-- **自動生成された型による TypeScript サポートを確保し、オートコンプリートとエラー検出を向上**させます。
-- **高度な機能を活用できます**（動的なロケール検出や切り替えなど）。
+Intlayer は、効率的なレンダリングのために **サーバー コンポーネント** と連携するように最適化されており、[**Turbopack**](https://nextjs.org/docs/architecture/turbopack) と完全に互換性があります。静的レンダリングをブロックせず、ミドルウェアとスケーリング国際化 (i18n) に必要なすべての機能を提供します。
 
-> Intlayer は Next.js 12、13、14、16 と互換性があります。Next.js の Page Router を使用している場合はこの [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_page_router.md) を参照してください。App Router を使用している Next.js 12、13、14 に関しては、この [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_14.md) を参照してください。
+> Intlayer は Next.js 12、13、14、15、および 16 と互換性があります。 Next.js Pages Router を使用している場合は、この [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_page_router.md) を参照してください。
+> ロケール ルーティングは、SEO、バンドル サイズ、パフォーマンスに役立ちます。必要ない場合は、この[ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md)を参照してください。
+> App Router を使用した Next.js 12、13、14、および 15 については、この [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md) を参照してください。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
 ## Next.js アプリケーションで Intlayer をセットアップする手順
 
-### ステップ 1: 依存関係をインストール
+<Steps>
+
+<Step number={1} title="依存関係をインストール">
 
 npm を使用して必要なパッケージをインストールします：
 
@@ -103,7 +127,9 @@ bun x intlayer init
 
 IntlayerをNext.jsと統合するパッケージです。Next.js向けの国際化のためのコンテキストプロバイダーとフックを提供します。さらに、[Webpack](https://webpack.js.org/)や[Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)とIntlayerを統合するためのNext.jsプラグイン、およびユーザーの優先ロケールの検出、クッキー管理、URLリダイレクト処理のためのプロキシも含まれます。
 
-### ステップ 2: プロジェクトを設定する
+</Step>
+
+<Step number={2} title="プロジェクトを設定する">
 
 以下が作成する最終的な構成です:
 
@@ -158,7 +184,9 @@ export default config;
 
 > この設定ファイルを使って、ローカライズされた URL、プロキシリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソール上の Intlayer ログの無効化などを設定できます。利用可能なパラメータの完全な一覧は、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) を参照してください。
 
-### ステップ 3: Next.js の設定に Intlayer を統合する
+</Step>
+
+<Step number={3} title="Next.js の設定に Intlayer を統合する">
 
 Intlayer を使用するよう Next.js の設定を構成します:
 
@@ -201,7 +229,9 @@ export default withIntlayer(nextConfig);
 > withRspack(withIntlayer(nextConfig, { enableTurbopack: false }));
 > ```
 
-### ステップ 4: 動的ロケールルートを定義する
+</Step>
+
+<Step number={4} title="動的ロケールルートを定義する">
 
 `RootLayout` の中身をすべて削除し、次のコードに置き換えてください:
 
@@ -357,7 +387,9 @@ export default pageContent;
 
 > 詳細は、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md) を参照してください。
 
-### ステップ6: コード内でコンテンツを利用する
+</Step>
+
+<Step number={6} title="コード内でコンテンツを利用する">
 
 アプリケーション全体からコンテンツ辞書にアクセスします:
 
@@ -453,7 +485,9 @@ export const ServerComponentExample: FC = () => {
 
 > `useIntlayer` フックの詳細は[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useIntlayer.md)を参照してください。
 
-### （オプション）ステップ7: ロケール検出のためにプロキシを設定
+</Step>
+
+<Step number={7} title="ロケール検出のためにプロキシを設定">
 
 ユーザーの優先ロケールを検出するようにプロキシを設定します:
 
@@ -477,7 +511,9 @@ import { customProxy } from "@utils/customProxy";
 export const proxy = multipleProxies([intlayerProxy, customProxy]);
 ```
 
-### （オプション）ステップ 8: コンテンツの言語を変更する
+</Step>
+
+<Step number={8} title="コンテンツの言語を変更する">
 
 Next.jsでコンテンツの言語を切り替えるには、推奨される方法は`Link`コンポーネントを使用してユーザーを適切なローカライズされたページにリダイレクトすることです。`Link`コンポーネントはページのプリフェッチを可能にし、フルページのリロードを回避するのに役立ちます。
 
@@ -558,7 +594,9 @@ export const LocaleSwitcher: FC = () => {
 - [`dir` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 - [`aria-current` 属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### （任意）ステップ 9: Server Actions で現在のロケールを取得する
+</Step>
+
+<Step number={9} title="Server Actions で現在のロケールを取得する">
 
 Server Action の内部でアクティブなロケールが必要な場合（例: メールのローカライズやロケール対応のロジックを実行する場合）、`next-intlayer/server` から `getLocale` を呼び出してください:
 
@@ -583,7 +621,9 @@ export const myServerAction = async () => {
 >
 > これにより、利用可能なコンテキストに基づいて最も適切なロケールが選択されます。
 
-### （任意）ステップ10：バンドルサイズを最適化する
+</Step>
+
+<Step number={10} title="バンドルサイズを最適化する">
 
 `next-intlayer` を使用すると、辞書はデフォルトで各ページのバンドルに含まれます。バンドルサイズを最適化するために、Intlayer はマクロを使用して `useIntlayer` の呼び出しをインテリジェントに置き換えるオプションの SWC プラグインを提供しています。これにより、辞書は実際にそれらを使用するページのバンドルにのみ含まれるようになります。
 
@@ -610,6 +650,9 @@ bun add @intlayer/swc --dev
 > 注意: SWCプラグインは Next.js 上でまだ実験的なため、このパッケージはデフォルトでインストールされません。将来的に変更される可能性があります。
 
 > 注意: オプションを `importMode: 'dynamic'` または `importMode: 'fetch'` に設定すると、Suspense に依存するため、`useIntlayer` の呼び出しを `Suspense` 境界でラップする必要があります。つまり、Page / Layout コンポーネントのトップレベルで `useIntlayer` を直接使用することはできません。
+> </Step>
+
+</Steps>
 
 ### Turbopackで辞書の変更を監視する
 

package/docs/ja/intlayer_with_nextjs_page_router.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-06
-title: Next.js Page Router i18n - Next.jsアプリの翻訳方法 2026
-description: Next.js の Page Router を使ったウェブサイトを多言語対応にする方法をご紹介します。国際化（i18n）と翻訳のためのドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: "Next.js Page Router i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Next.js Page Routerアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -57,24 +57,49 @@ history:
   </Tab>
 </Tabs>
 
-## Intlayer とは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer** は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。Intlayer は、従来の **Page Router** を含む最新の **Next.js** フレームワークとシームレスに統合されます。
+「next-intl」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayer を使うことで、以下が可能になります：
+**Next.js を完全にカバー**
 
-- **コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **自動生成された型により TypeScript サポートを保証し、オートコンプリートやエラー検出を向上**させます。
-- **動的なロケール検出や切り替えなどの高度な機能**を活用できます。
+Intlayer は、効率的なレンダリングのために **サーバー コンポーネント** と連携するように最適化されており、[**Turbopack**](https://nextjs.org/docs/architecture/turbopack) と完全に互換性があります。静的レンダリングをブロックせず、ミドルウェアとスケーリング国際化 (i18n) に必要なすべての機能を提供します。
 
-> Intlayer は Next.js 12、13、14、15 と互換性があります。Next.js の App Router を使用している場合は、[App Router ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_14.md)を参照してください。Next.js 15 の場合は、この[ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_15.md)に従ってください。
+> Intlayer は Next.js 12、13、14、15、および 16 と互換性があります。 Next.js Pages Router を使用している場合は、この [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_page_router.md) を参照してください。
+> ロケール ルーティングは、SEO、バンドル サイズ、パフォーマンスに役立ちます。必要ない場合は、この[ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md)を参照してください。
+> App Router を使用した Next.js 12、13、14、および 15 については、この [ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md) を参照してください。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
 ## Page Router を使用した Next.js アプリケーションでの Intlayer セットアップ手順
 
-### ステップ 1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使って必要なパッケージをインストールします：
 
@@ -106,7 +131,9 @@ bun x intlayer init
 
   IntlayerをNext.jsと統合するパッケージです。Next.jsの国際化のためのコンテキストプロバイダーやフックを提供します。さらに、Intlayerを[Webpack](https://webpack.js.org/)や[Turbopack](https://nextjs.org/docs/app/api-reference/turbopack)と統合するためのNext.jsプラグインや、ユーザーの優先ロケールの検出、クッキー管理、URLリダイレクト処理のためのミドルウェアも含まれています。
 
-### ステップ 2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションでサポートする言語を定義する設定ファイルを作成します：
 
@@ -130,7 +157,9 @@ export default config;
 
 > この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、Intlayerのコンソールログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: IntlayerをNext.jsの設定に統合する
+</Step>
+
+<Step number={3} title="IntlayerをNext.jsの設定に統合する">
 
 Next.jsの設定を修正してIntlayerを組み込みます：
 
@@ -147,7 +176,9 @@ export default withIntlayer(nextConfig);
 
 > `withIntlayer()` は Next.js と Intlayer を統合するためのプラグインです。コンテンツ宣言ファイルのビルドを保証し、開発モードでそれらを監視します。また、[Webpack](https://webpack.js.org/) や [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 環境内で Intlayer の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスを提供し、サーバーコンポーネントとの互換性を確保します。
 
-### ステップ4: ロケール検出のためのミドルウェア設定
+</Step>
+
+<Step number={4} title="ロケール検出のためのミドルウェア設定">
 
 ユーザーの優先ロケールを自動的に検出し処理するミドルウェアを設定します：
 
@@ -162,7 +193,9 @@ export const config = {
 
 > `matcher` パラメータをアプリケーションのルートに合わせて調整してください。詳細については、[Next.js の matcher 設定に関するドキュメント](https://nextjs.org/docs/app/building-your-application/routing/middleware)を参照してください。
 
-### ステップ 5: 動的ロケールルートの定義
+</Step>
+
+<Step number={5} title="動的ロケールルートの定義">
 
 ユーザーのロケールに基づいてローカライズされたコンテンツを提供するために動的ルーティングを実装します。
 
@@ -257,7 +290,9 @@ export default HomePage;
 
 > `getStaticPaths` と `getStaticProps` は、Next.js のページルーターにおいて、すべてのロケールに対して必要なページを事前にビルドすることを保証します。このアプローチにより、実行時の計算が削減され、ユーザー体験が向上します。詳細については、Next.js のドキュメントの [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) および [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props) を参照してください。
 
-### ステップ6: コンテンツを宣言する
+</Step>
+
+<Step number={6} title="コンテンツを宣言する">
 
 翻訳を格納するためのコンテンツ宣言を作成および管理します。
 
@@ -313,7 +348,9 @@ export default homeContent;
 
 詳細なコンテンツ宣言については、[コンテンツ宣言ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ7: コード内でコンテンツを利用する
+</Step>
+
+<Step number={7} title="コード内でコンテンツを利用する">
 
 アプリケーション全体でコンテンツ辞書にアクセスし、翻訳されたコンテンツを表示します。
 
@@ -366,7 +403,9 @@ export const ComponentExample: FC = () => {
 
 > `useIntlayer` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useIntlayer.md)を参照してください。
 
-### （オプション）ステップ 8: メタデータの国際化
+</Step>
+
+<Step number={8} title="メタデータの国際化">
 
 ページのタイトルなどのメタデータを国際化したい場合は、Next.js の Page Router が提供する `getStaticProps` 関数を使用できます。その中で、`getIntlayer` 関数からコンテンツを取得し、メタデータを翻訳できます。
 
@@ -587,7 +626,9 @@ export default HomePage;
 
 > メタデータの最適化について詳しくは、[公式の Next.js ドキュメント](https://nextjs.org/docs/pages/building-your-application/optimizing/metadata)をご覧ください。
 
-### （オプション）ステップ9：コンテンツの言語を変更する
+</Step>
+
+<Step number={9} title="コンテンツの言語を変更する">
 
 Next.js でコンテンツの言語を変更するには、推奨される方法として `Link` コンポーネントを使用して、ユーザーを適切なローカライズされたページにリダイレクトする方法があります。`Link` コンポーネントはページのプリフェッチを可能にし、完全なページリロードを回避するのに役立ちます。
 
@@ -678,7 +719,9 @@ return (
 > - [`dir` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` 属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### （オプション）ステップ10：ローカライズされたリンクコンポーネントの作成
+</Step>
+
+<Step number={10} title="ローカライズされたリンクコンポーネントの作成">
 
 アプリケーションのナビゲーションが現在のロケールを尊重するようにするために、カスタムの `Link` コンポーネントを作成できます。このコンポーネントは内部URLに自動的に現在の言語のプレフィックスを付けます。例えば、フランス語を話すユーザーが「About」ページへのリンクをクリックすると、`/about` ではなく `/fr/about` にリダイレクトされます。
 
@@ -747,7 +790,9 @@ Link.displayName = "Link";
 
 この `Link` コンポーネントをアプリケーション全体に統合することで、一貫性のある言語対応のユーザー体験を維持しつつ、SEOや使いやすさの向上も期待できます。
 
-### （オプション）ステップ11: バンドルサイズの最適化
+</Step>
+
+<Step number={11} title="バンドルサイズの最適化">
 
 `next-intlayer`を使用すると、辞書はデフォルトですべてのページのバンドルに含まれます。バンドルサイズを最適化するために、Intlayerはマクロを使用して`useIntlayer`の呼び出しをインテリジェントに置き換えるオプションのSWCプラグインを提供しています。これにより、辞書は実際に使用されているページのバンドルにのみ含まれるようになります。
 
@@ -772,6 +817,9 @@ bun add @intlayer/swc --dev
 > 注意: この最適化はNext.js 13以降でのみ利用可能です。
 
 > 注意: このパッケージは、Next.jsでのSWCプラグインがまだ実験的なため、デフォルトではインストールされていません。将来的に変更される可能性があります。
+> </Step>
+
+</Steps>
 
 ### TypeScriptの設定