@intlayer/docs 8.3.0 → 8.3.2

package/docs/ja/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-03-11
+updatedAt: 2026-03-12
 title: 設定
 description: Intlayerをアプリケーション向けに設定する方法を学びます。Intlayerをニーズに合わせてカスタマイズするためのさまざまな設定やオプションについて理解しましょう。
 keywords:
@@ -15,8 +15,8 @@ slugs:
   - configuration
 history:
   - version: 8.3.0
-    data: 2026-03-11
-    changes: 'baseDir' を 'content' 設定から 'system' 設定に移動
+    date: 2026-03-11
+    changes: "'baseDir' を 'content' 設定から 'system' 設定に移動"
   - version: 8.2.0
     date: 2026-03-10
     changes: コンパイラーオプションの更新、'output' および 'noMetadata' のサポートを追加
@@ -43,25 +43,25 @@ history:
     changes: JSON5 および JSONC ファイル形式のサポートを追加
   - version: 7.5.0
     date: 2025-12-17
-    changes: `buildMode` オプションを追加
+    changes: "`buildMode` オプションを追加"
   - version: 6.0.0
     date: 2025-09-16
-    changes: `live` インポートモードを追加
+    changes: "`live` インポートモードを追加"
   - version: 6.0.0
     date: 2025-09-16
-    changes: `live` インポートモードを追加
+    changes: "`live` インポートモードを追加"
   - version: 6.0.0
     date: 2025-09-04
-    changes: `hotReload` フィールドを `liveSync` に置き換え、`liveSyncPort` と `liveSyncURL` フィールドを追加
+    changes: "`hotReload` フィールドを `liveSync` に置き換え、`liveSyncPort` と `liveSyncURL` フィールドを追加"
   - version: 5.6.1
     date: 2025-07-25
-    changes: `activateDynamicImport` を `importMode` オプションに置き換え
+    changes: "`activateDynamicImport` を `importMode` オプションに置き換え"
   - version: 5.6.0
     date: 2025-07-13
     changes: デフォルトの contentDir を `['src']` から `['.']` に変更
   - version: 5.5.11
     date: 2025-06-29
-    changes: `docs` コマンドを追加
+    changes: "`docs` コマンドを追加"
 ---
 
 # Intlayer 設定ドキュメント
@@ -95,7 +95,7 @@ IntlayerはJSON、JS、MJS、TSの設定ファイル形式をサポートして
 
 ## 設定ファイルの例
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
 import { z } from "zod";
@@ -193,7 +193,7 @@ const config: IntlayerConfig = {
      * Options: 'cookie', 'localStorage', 'sessionStorage', 'header', or an array of these.
      * Default: ['cookie', 'header']
      */
-    storage: "cookie",
+    storage: ["cookie", "header"],
 
     /**
      * Base path for the application URLs.
@@ -259,13 +259,13 @@ const config: IntlayerConfig = {
   editor: {
     /**
      * Whether the visual editor is enabled.
-     * Default: true
+     * Default: false
      */
     enabled: true,
 
     /**
      * URL of your application for origin validation.
-     * Default: "*"
+     * Default: ""
      */
     applicationURL: "http://localhost:3000",
 
@@ -330,6 +330,17 @@ const config: IntlayerConfig = {
      * Base URL for the AI API.
      */
     baseURL: "http://localhost:3000",
+
+    /**
+     * データシリアライゼーション
+     *
+     * オプション:
+     * - "json": 標準、信頼性あり。より多くのトークンを使用します。
+     * - "toon": より少ないトークンを使用しますが、JSON ほど一貫性がありません。
+     *
+     * デフォルト: "json"
+     */
+    dataSerialization: "json",
   },
 
   /**
@@ -429,42 +440,70 @@ const config: IntlayerConfig = {
   compiler: {
     /**
      * コンパイラを有効にするかどうかを示します。
+     *
+     * - false : コンパイラを無効にします。
+     * - true : コンパイラを有効にします。
+     * - "build-only" : 開発中のコンパイラをスキップして起動時間を短縮します。
+     *
+     * デフォルト : false
      */
     enabled: true,
 
     /**
-     * Pattern to traverse the code to optimize.
+     * 出力ファイルのパスを定義します。 `outputDir` を置き換えます。
+     *
+     * - `./` で始まるパスは、コンポーネントディレクトリを基準に解決されます。
+     * - `/` で始まるパスは、プロジェクトのルート (`baseDir`) を基準に解決されます。
+     *
+     * - パスに `{{locale}}` 変数を含めると、言語ごとに分離された辞書の生成が有効になります。
+     *
+     * 例:
+     * ```ts
+     * {
+     *   // コンポーネントの隣に多言語対応の .content.ts ファイルを作成
+     *   output: ({ fileName, extension }) => `./${fileName}${extension}`,
+     *
+     *   // output: './{{fileName}}{{extension}}', // 文字列テンプレートを使用した同等の記述
+     * }
+     * ```
+     *
+     * ```ts
+     * {
+     *   // プロジェクトのルートに言語ごとに集約された JSON ファイルを作成
+     *   output: ({ key, locale }) => `/locales/${locale}/${key}.content.json`,
+     *
+     *   // output: '/locales/{{locale}}/{{key}}.content.json', // 文字列テンプレートを使用した同等の記述
+     * }
+     * ```
+     *
+     * 変数リスト:
+     *   - `fileName`: ファイル名。
+     *   - `key`: コンテンツのキー。
+     *   - `locale`: コンテンツのロケール。
+     *   - `extension`: ファイル拡張子。
+     *   - `componentFileName`: コンポーネントファイル名。
+     *   - `componentExtension`: コンポーネント拡張子。
+     *   - `format`: 辞書の形式。
+     *   - `componentFormat`: コンポーネント辞書の形式。
+     *   - `componentDirPath`: コンポーネントのディレクトリパス。
      */
-    transformPattern: [
-      "**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}",
-      "!**/node_modules/**",
-    ],
-
-    /**
-     * Pattern to exclude from the optimization.
-     */
-    excludePattern: ["**/node_modules/**"],
+    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
 
     /**
-     * 最適化された辞書の出力ディレクトリ。
+     * 変換後にコンポーネントを保存するかどうかを示します。
+     * これにより、コンパイラを1回だけ実行してアプリを変換し、その後削除することができます。
      */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
+    saveComponents: false,
 
     /**
-     * キーなしで、生成されたファイルにコンテンツのみを挿入します。
+     * 生成されたファイルにコンテンツのみを挿入します。
      */
     noMetadata: false,
 
     /**
      * 辞書キーのプレフィックス
      */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * 変換後にコンポーネントを保存するかどうかを示します。
-     * これにより、コンパイラを1回だけ実行してアプリを変換し、その後削除することができます。
-     */
-    saveComponents: false,
+    dictionaryKeyPrefix: "", // すべての辞書キーにプレフィックスを設定
   },
 
   /**
@@ -483,7 +522,7 @@ const config: IntlayerConfig = {
 };
 
 export default config;
-```
+````
 
 ## 設定リファレンス
 
@@ -987,25 +1026,6 @@ Intlayerがアプリケーションの国際化をどのように最適化しビ
   - _注意_: このオプションは`@intlayer/babel`および`@intlayer/swc`プラグインに依存しています。
   - _注意_: `useIntlayer`の呼び出し内で、すべてのキーが静的に宣言されていることを確認してください。例: `useIntlayer('navbar')`。
 
-- **importMode**:
-  - _注_: **Deprecated**: Use `dictionary.importMode` instead.
-  - _タイプ_: `'static' | 'dynamic' | 'fetch'`
-  - _デフォルト_: `'static'`
-  - _説明_: 辞書のインポート方法を制御します。
-  - _例_: `'dynamic'`
-  - _注意_: 利用可能なモード:
-    - "static": 辞書は静的にインポートされます。`useIntlayer`を`useDictionary`に置き換えます。
-    - "dynamic": 辞書はSuspenseを使用して動的にインポートされます。`useIntlayer`を`useDictionaryDynamic`に置き換えます。
-  - "fetch": 辞書はライブ同期APIを使用して動的に取得されます。`useIntlayer`は`useDictionaryFetch`に置き換えられます。
-  - _注意_: 動的インポートはSuspenseに依存しており、レンダリングパフォーマンスにわずかな影響を与える可能性があります。
-  - _注意_: 無効にすると、使用されていなくてもすべてのロケールが一度に読み込まれます。
-  - _注意_: このオプションは`@intlayer/babel`および`@intlayer/swc`プラグインに依存しています。
-  - _注意_: `useIntlayer`呼び出し内のすべてのキーが静的に宣言されていることを確認してください。例：`useIntlayer('navbar')`。
-  - _注意_: `optimize`が無効の場合、このオプションは無視されます。
-  - _注意_: "live" に設定されている場合、リモートコンテンツを含み、かつ "live" フラグが設定された辞書のみがライブモードとして変換されます。他の辞書はフェッチクエリの数と読み込みパフォーマンスを最適化するために、動的モードとして動的にインポートされます。
-  - _注意_: ライブモードはライブ同期APIを使用して辞書を取得します。APIコールが失敗した場合、辞書は動的モードとして動的にインポートされます。
-  - _注意_: このオプションは `getIntlayer`、`getDictionary`、`useDictionary`、`useDictionaryAsync`、および `useDictionaryDynamic` 関数には影響しません。
-
 - **outputFormat**:
   - _型_: `'esm' | 'cjs'`
   - _デフォルト_: `'esm'`
@@ -1039,7 +1059,7 @@ Intlayerがアプリケーションの国際化をどのように最適化しビ
 
 - **dictionaryKeyPrefix**:
   - _型_: `string`
-  - _デフォルト_: `'comp-'`
+  - _デフォルト_: `''`
   - _説明_: 抽出された辞書キーのプレフィックス。
   - _例_: `'my-key-'`
   - _注意_: 辞書が抽出される際、キーはファイル名に基づいて生成されます。このプレフィックスは、競合を防ぐために生成されたキーに追加されます。
@@ -1063,24 +1083,28 @@ Intlayerがアプリケーションの国際化をどのように最適化しビ
   - _説明_: 最適化中に除外されるファイルを定義するパターン。
   - _例_: `['**/node_modules/**', '!**/node_modules/react/**']`
 
-- **outputDir**:
-  - _型_: `string`
-  - _デフォルト_: `'compiler'`
-  - _説明_: 抽出された辞書が保存されるディレクトリ（プロジェクトのベースパスからの相対パス）。
-
 - **output**:
   - _型_: `FilePathPattern`
-  - _デフォルト_: `({ key }) => 'compiler/${key}.content.json'`
-  - _説明_: 出力ファイルのパスを定義します。 `outputDir` を置き換えます。 `{{locale}}`、 `{{key}}`、 `{{fileName}}`、 `{{extension}}`、 `{{format}}`、 `{{dirPath}}`、 `{{componentFileName}}`、 `{{componentExtension}}`、 `{{componentFormat}}` などの動的変数を処理します。 `'my/{{var}}/path'` 形式の文字列または関数として設定できます。
-  - _注_: `./**/*` パスはコンポーネントを基準に解決されます。 `/**/*` パスは Intlayer の `baseDir` を基準に解決されます。
-  - _例_: `output: ({ locale, key }) => 'compiler/${locale}/${key}.json'`
+  - _デフォルト_: `undefined`
+  - _説明_: 出力ファイルのパスを定義します。 `outputDir` を置き換えます。 文字列テンプレートまたは関数を通じて動的変数をサポートします。 サポートされている変数: `{{fileName}}`, `{{key}}`, `{{locale}}`, `{{extension}}`, `{{componentFileName}}`, `{{componentExtension}}`, `{{format}}`, `{{componentFormat}}`, および `{{componentDirPath}}`。
+  - _注_: `./` で始まるパスは、コンポーネントディレクトリを基準に解決されます。 `/` で始まるパスは、プロジェクトのルート (`baseDir`) を基準に解決されます。
+  - _注_: パスに `{{locale}}` 変数を含めると、ロケールごとに分離された辞書の生成が有効になります。
+  - _例_:
+    - **コンポーネントの隣に多言語ファイルを作成**:
+    - 文字列: `'./{{fileName}}{{extension}}'`
+    - 関数: `({ fileName, extension }) => \`./${fileName}${extension}\``
+
+    - **ロケールごとに集約された JSON を出力**:
+    - 文字列: `'/locales/{{locale}}/{{key}}.content.json'`
+    - 関数: `({ key, locale }) => \`/locales/${locale}/${key}.content.json\``
 
 - **noMetadata**:
   - _タイプ_: `boolean`
   - _デフォルト_: `false`
-  - _説明_: メタデータをファイルに保存するかどうかを示します。trueの場合、コンパイラは辞書のメタデータ（キー、コンテンツラッパー）を保存しません。
-  - _注_: `loadJSON`プラグインを使用する場合に便利です。
-  - _例_: `true`の場合:
+  - _説明_: メタデータをファイルに保存するかどうかを示します。trueの場合、コンパイラーは辞書のメタデータ（キー、コンテンツラッパー）を保存しません。
+  - _注_: `loadJSON`プラグインを使用する場合に便利です。ロケールごとの i18next または ICU MessageFormat JSON 出力に有用です。
+  - _例_:
+    `true`の場合:
     ```json
     {
       "key": "value"

package/docs/ja/intlayer_with_analog.md

@@ -344,8 +344,8 @@ Intlayerによって生成されたファイルは無視することをお勧め
 
 これを行うには、`.gitignore`ファイルに以下の指示を追加してください：
 
-```plaintext
-# Intlayerによって生成されたファイルを無視
+```bash
+#  Intlayerによって生成されたファイルを無視
 .intlayer
 ```
 

package/docs/ja/intlayer_with_angular.md

@@ -395,8 +395,8 @@ Intlayerによって生成されたファイルは無視することをお勧め
 
 これを行うには、`.gitignore` ファイルに以下の指示を追加します：
 
-```plaintext
-# Intlayerによって生成されたファイルを無視
+```bash
+#  Intlayerによって生成されたファイルを無視
 .intlayer
 ```
 

package/docs/ja/intlayer_with_astro.md

@@ -218,8 +218,8 @@ Intlayerによって生成されたファイルは無視することを推奨し
 
 これを行うには、以下の指示を `.gitignore` ファイルに追加できます。
 
-```plaintext
-# Intlayer によって生成されたファイルを無視する
+```bash
+#  Intlayer によって生成されたファイルを無視する
 .intlayer
 ```
 

package/docs/ja/intlayer_with_lynx+react.md

@@ -501,8 +501,8 @@ Intlayerは、自動補完を改善し翻訳エラーを検出するために、
 
 Intlayerによって自動生成されたファイルをコミットしないようにするには、以下を`.gitignore`に追加します。
 
-```plaintext
-# Intlayerによって生成されたファイルを無視
+```bash
+#  Intlayerによって生成されたファイルを無視
 .intlayer
 ```
 

package/docs/ja/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2025-12-30
+updatedAt: 2026-03-12
 title: Next.js i18n - Next.js 16アプリの翻訳方法 2026
 description: Next.js 16のウェブサイトを多言語対応にする方法を紹介します。国際化（i18n）と翻訳のためのドキュメントに従ってください。
 keywords:
@@ -1440,6 +1440,179 @@ return (
 > - [`dir` 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` 属性](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
+### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+
+既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
+
+このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための [コンパイラ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) / [エクストラクタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) を提案しています。
+
+セットアップするには、`intlayer.config.ts` ファイルに `compiler` セクションを追加します。
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 他の構成
+  compiler: {
+    /**
+     * コンパイラを有効にするかどうかを指定します。
+     */
+    enabled: true,
+
+    /**
+     * 出力ファイルのパスを定義します。
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
+     */
+    saveComponents: false,
+
+    /**
+     * 辞書キーの接頭辞
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... 他の構成
+  compiler: {
+    /**
+     * コンパイラを有効にするかどうかを指定します。
+     */
+    enabled: true,
+
+    /**
+     * 出力ファイルのパスを定義します。
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
+     */
+    saveComponents: false,
+
+    /**
+     * 辞書キーの接頭辞
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... 他の構成
+  compiler: {
+    /**
+     * コンパイラを有効にするかどうかを指定します。
+     */
+    enabled: true,
+
+    /**
+     * 出力ファイルのパスを定義します。
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
+     */
+    saveComponents: false,
+
+    /**
+     * 辞書キーの接頭辞
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+module.exports = config;
+```
+
+<Tabs>
+ <Tab value='抽出コマンド'>
+
+コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babelコンパイラ'>
+
+```bash packageManager="npm"
+npm install @intlayer/babel --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/babel --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/babel --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/babel --dev
+```
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  getExtractPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // コンポーネントから辞書へコンテンツを抽出する
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+  ],
+};
+```
+
+```bash packageManager="npm"
+npm run build # または npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # または pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # または yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+
 ### （オプション）ステップ11：ローカライズされたリンクコンポーネントの作成
 
 アプリケーションのナビゲーションが現在のロケールを尊重するようにするために、カスタムの `Link` コンポーネントを作成できます。このコンポーネントは内部のURLに自動的に現在の言語をプレフィックスとして付加します。例えば、フランス語ユーザーが「About」ページへのリンクをクリックすると、 `/about` ではなく `/fr/about` にリダイレクトされます。