@intlayer/docs 7.0.3 → 7.0.4

package/blog/ja/intlayer_with_next-i18next.md

@@ -1,363 +1,165 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: Intlayerとnext-i18next
-description: Next.jsアプリのためにnext-i18nextとIntlayerを連携する
+updatedAt: 2025-10-29
+title: Intlayer と next-i18next
+description: 包括的な Next.js 国際化ソリューションのために Intlayer を next-i18next と統合する
 keywords:
   - i18next
   - next-i18next
   - Intlayer
   - 国際化
-  - ドキュメンテーション
+  - ブログ
   - Next.js
   - JavaScript
   - React
 slugs:
   - blog
   - intlayer-with-next-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSON プラグインへの変更と包括的な書き直し
 ---
 
-# Next.js Internationalization (i18n) with next-i18next and Intlayer
+# next-i18next と Intlayer を使った Next.js の国際化 (i18n)
 
-Both next-i18next and Intlayer are open-source internationalization (i18n) frameworks designed for Next.js applications. They are widely used for managing translations, localization, and language switching in software projects.
+## 目次
 
-Both solutions include three principal notions:
+<TOC/>
 
-1. **コンテンツ宣言**: アプリケーションの翻訳可能なコンテンツを定義するための方法。
-   - `i18next`の場合は`resource`として名付けられ、コンテンツ宣言は、1つまたは複数の言語の翻訳のためのキー-バリューのペアを含む構造化されたJSONオブジェクトです。詳細については、[i18nextのドキュメント](https://www.i18next.com/translation-function/essentials)を参照してください。
-   - `Intlayer`の場合は`content declaration file`として名付けられ、コンテンツ宣言は構造化データをエクスポートするJSON、JS、またはTSファイルになることができます。詳細については、[Intlayerのドキュメント](https://intlayer.org/fr/doc/concept/content)を参照してください。
+## next-i18next とは？
 
-2. **ユーティリティ**: アプリケーション内でコンテンツ宣言を構築および解釈するためのツールであり、`getI18n()`、`useCurrentLocale()`、または`useChangeLocale()`はnext-i18next用で、`useIntlayer()`または`useLocale()`はIntlayer用です。
+**next-i18next** は、Next.js アプリケーション向けの最も人気のある国際化（i18n）フレームワークの一つです。強力な **i18next** エコシステムの上に構築されており、Next.js プロジェクトにおける翻訳、ローカリゼーション、言語切り替えの管理に包括的なソリューションを提供します。
 
-3. **プラグインおよびミドルウェア**: URLリダイレクション、バンドルの最適化などを管理するための機能であり、`next-i18next/middleware`はnext-i18next用、`intlayerMiddleware`はIntlayer用です。
+しかし、next-i18next にはいくつかの課題があります：
 
-## Intlayer vs. i18next: 主な違い
+- **複雑な設定**：next-i18next のセットアップには複数の設定ファイルが必要であり、サーバーサイドとクライアントサイドの i18n インスタンスの慎重な設定が求められます。
+- **翻訳ファイルの分散**：翻訳ファイルは通常、コンポーネントとは別のディレクトリに保存されているため、一貫性の維持が難しくなります。
+- **名前空間の手動管理**：開発者は名前空間を手動で管理し、翻訳リソースが適切に読み込まれることを保証する必要があります。
+- **限定的な型安全性**：TypeScript のサポートには追加の設定が必要であり、翻訳の自動型生成は提供されません。
 
-i18nextとIntlayerの違いを探るには、私たちの[次-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/i18next_vs_next-intl_vs_intlayer.md)ブログ投稿をチェックしてください。
+## Intlayerとは？
 
-## Intlayerでnext-i18next辞書を生成する方法
+**Intlayer** は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Next.jsアプリケーションにおけるコンテンツ管理に対してモダンなアプローチを提供します。
 
-### next-i18nextを使用する理由は？
+[next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md) のブログ記事で next-intl との具体的な比較をご覧ください。
 
-Intlayerのコンテンツ宣言ファイルは、通常、より良い開発者体験を提供します。これらは、2つの主な利点により、より柔軟でメンテナブルです。
+## なぜ Intlayer を next-i18next と組み合わせるのか？
 
-1. **柔軟な配置**: Intlayerのコンテンツ宣言ファイルは、アプリケーションのファイルツリー内のどこにでも配置でき、未使用のコンテンツ宣言を残すことなく、コピーされたり削除されたりしたコンポーネントの管理を簡素化します。
+Intlayerは優れた単独のi18nソリューションを提供します（[Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照）が、次のような理由でnext-i18nextと組み合わせたい場合があります。
 
-   例ファイル構造:
+1. **既存のコードベース**: 既にnext-i18nextの実装があり、Intlayerの改善された開発者体験へ段階的に移行したい場合。
+2. **レガシー要件**: プロジェクトが既存のi18nextプラグインやワークフローとの互換性を必要とする場合。
+3. **チームの慣れ親しみ**: チームがnext-i18nextに慣れているが、より良いコンテンツ管理を望んでいる場合。
 
-   ```bash codeFormat="typescript"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts # コンテンツ宣言ファイル
-               └── index.tsx
-   ```
+**そのために、Intlayerはnext-i18nextのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
-   ```bash codeFormat="esm"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.mjs # コンテンツ宣言ファイル
-               └── index.mjx
-   ```
+このガイドでは、next-i18nextとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
 
-   ```bash codeFormat="cjs"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.cjs # コンテンツ宣言ファイル
-               └── index.cjx
-   ```
+---
 
-   ```bash codeFormat="json"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.json # コンテンツ宣言ファイル
-               └── index.jsx
-   ```
+## next-i18nextとIntlayerをセットアップするステップバイステップガイド
 
-2. **中央集中的な翻訳**: Intlayerは、すべての翻訳を単一のファイルに保存し、翻訳が欠けることがないようにします。TypeScriptを使用する場合は、欠けている翻訳が自動的に検出され、エラーとして報告されます。
+### ステップ1: 依存関係のインストール
 
-### インストール
+お好みのパッケージマネージャーを使って必要なパッケージをインストールしてください：
 
 ```bash packageManager="npm"
-npm install intlayer i18next next-i18next i18next-resources-to-backend
-```
-
-```bash packageManager="yarn"
-yarn add intlayer i18next next-i18next i18next-resources-to-backend
+npm install intlayer @intlayer/sync-json-plugin
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer i18next next-i18next i18next-resources-to-backend
+pnpm add intlayer @intlayer/sync-json-plugin
 ```
 
-### Intlayerを構成してi18next辞書をエクスポートする
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> i18nextリソースのエクスポートは、他のフレームワークとの1:1の互換性を保証するものではありません。問題を最小限に抑えるために、Intlayerベースの構成を維持することをお勧めします。
+**パッケージの説明：**
 
-i18nextリソースをエクスポートするには、`intlayer.config.ts`ファイルでIntlayerを構成します。例の構成:
+- **intlayer**: コンテンツ宣言と管理のためのコアライブラリ
+- **next-intlayer**: ビルドプラグインを備えたNext.js統合レイヤー
+- **i18next**: コアi18nフレームワーク
+- **next-i18next**: i18nextのNext.jsラッパー
+- **i18next-resources-to-backend**: i18nextのための動的リソース読み込み
+- **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をi18nextのJSON形式に同期するプラグイン
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+### ステップ2: JSONをラップするためのIntlayerプラグインの実装
 
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
+サポートするロケールを定義するためにIntlayerの設定ファイルを作成します。
 
-export default config;
-```
+**i18next用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください:**
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
+const config: IntlayerConfig = {
   internationalization: {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+`syncJSON`プラグインはJSONを自動的にラップします。コンテンツの構造を変更することなく、JSONファイルの読み書きを行います。
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
-
-module.exports = config;
-```
-
-### i18next構成への辞書のインポート
-
-生成されたリソースをi18next構成にインポートするには、`i18next-resources-to-backend`を使用します。以下は例です:
-
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language: string, namespace: string) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
+JSONとintlayerのコンテンツ宣言ファイル（`.content`ファイル）を共存させたい場合、Intlayerは以下の手順で処理します：
 
-### コンテンツ宣言
+    1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
 
-さまざまな形式のコンテンツ宣言ファイルの例:
+2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。これはプラグインの優先順位やコンテンツ宣言ファイルの優先順位に依存します（すべて設定可能です）。
 
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
+CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-module.exports = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my-content",
-  "content": {
-    "myTranslatedContent": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Hello World",
-        "fr": "Bonjour le monde",
-        "es": "Hola Mundo"
-      }
-    }
-  }
-}
-```
-
-### next-i18nextリソースをビルドする
-
-next-i18nextリソースをビルドするには、以下のコマンドを実行します:
-
-```bash packageManager="npm"
-npx run intlayer build
-```
+---
 
-```bash packageManager="yarn"
-yarn intlayer build
-```
+## Git設定
 
-```bash packageManager="pnpm"
-pnpm intlayer build
-```
+生成されたファイルをバージョン管理から除外します：
 
-これにより、`./i18next/resources`ディレクトリにリソースが生成されます。期待される出力:
-
-```bash
-.
-└── i18next
-    └── resources
-       └── ja
-           └── my-content.json
-       └── fr
-           └── my-content.json
-       └── es
-           └── my-content.json
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視する
+.intlayer
+intl
 ```
 
-注意: i18nextの名前空間はIntlayerの宣言キーに対応します。
+これらのファイルはビルドプロセス中に自動的に再生成されるため、リポジトリにコミットする必要はありません。
 
-### Next.jsプラグインの実装
+### VS Code拡張機能
 
-構成が完了したら、次にIntlayerのコンテンツ宣言ファイルが更新されるたびにi18nextリソースを再ビルドするようにNext.jsプラグインを実装します。
+開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
 
-```typescript fileName="next.config.mjs"
-import { withIntlayer } from "next-intlayer/server";
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withIntlayer(nextConfig);
-```
+2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度とコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
 
-### Next.jsコンポーネントでコンテンツを使用する
+CLIを使用してJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
-Next.jsプラグインを実装した後、そのコンテンツをコンポーネント内で使用できます:
-
-```typescript fileName="src/components/myComponent/index.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
+---
 
-const IndexPage: FC = () => {
-  const { t } = useTranslation();
+## Git設定
 
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
+生成されたファイルをバージョン管理から除外します：
 
-export default IndexPage;
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視
+.intlayer
+intl
 ```
 
-```jsx fileName="src/components/myComponent/index.mjx" codeFormat="esm"
-import { useTranslation } from "react-i18next";
+これらのファイルはビルドプロセス中に自動的に再生成されるため、リポジトリにコミットする必要はありません。
 
-const IndexPage = () => {
-  const { t } = useTranslation();
+### VS Code拡張機能
 
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
+開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
 
-```jsx fileName="src/components/myComponent/index.cjx" codeFormat="commonjs"
-const { useTranslation } = require("react-i18next");
-
-const IndexPage = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)