@intlayer/docs 9.0.0-canary.6 → 9.0.0-canary.8

package/docs/ja/dynamic_dictionaries/index.md

@@ -1,13 +1,12 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
-title: 動的ディクショナリ
-description: 柔軟でランタイム駆動のi18nコンテンツを構築するための、Intlayerの3つの動的ディクショナリ機能 — コレクション、バリアント、動的レコード — の概要。
+updatedAt: 2026-06-26
+title: 動的辞書
+description: Intlayer の動的辞書機能（コレクションとバリアント）の概要。柔軟でランタイム駆動の i18n コンテンツを構築するために。
 keywords:
-  - 動的ディクショナリ
+  - 動的辞書
   - コレクション
   - バリアント
-  - 動的レコード
   - Intlayer
   - 国際化
 slugs:
@@ -17,32 +16,39 @@ slugs:
 history:
   - version: 9.0.0
     date: 2026-06-12
-    changes: "動的ディクショナリ機能のリリース"
+    changes: "動的辞書機能のリリース"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "動的レコードをバリアントに統合 — `variant` が文字列またはオブジェクトを受け取るようになりました"
 author: aymericzip
 ---
 
-# 動的ディクショナリ
+# 動的辞書
 
-Intlayerは、キーごとに単一の静的ディクショナリを定義するだけでなく、それを超えたコンテンツを表現するための3つのメカニズムをサポートしています。それぞれ、コンテンツファイル内の**最上位メタデータフィールド**を介して宣言され、ラッパー関数は不要です。
+Intlayer は、キーごとの単一の静的辞書を超えるコンテンツを表現するための 2 つのメカニズムをサポートします。それぞれはコンテンツファイル内の**トップレベルのメタデータフィールド**で宣言され、ラッパー関数は不要です。
 
-| 機能                                                                                                                  | メタデータフィールド | `useIntlayer` でのセレクター |
-| --------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| [コレクション](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/collections.md)     | `item: N`            | `{ item: N }`                |
-| [バリアント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/variants.md)          | `variant: "name"`    | `{ variant: "name" }`        |
-| [動的レコード](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/dynamic_content.md) | `meta: { id, … }`    | `{ id, … }`                  |
+| 機能                                                                                                              | メタデータフィールド                        | `useIntlayer` のセレクター                          |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------- |
+| [コレクション](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/collections.md) | `item: N`                                   | `{ item: N }`                                       |
+| [バリアント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/variants.md)      | `variant: "name"` _または_ `variant: { … }` | `{ variant: "name" }` _または_ `{ variant: { … } }` |
 
-3つのメカニズムすべてがロケール引数と連携し、`importMode` を介した選択的 / 遅延読み込みをサポートしています。
+いずれも locale 引数と組み合わせられ、`importMode` による選択的 / 遅延読み込みをサポートします。
 
-## 使い分け
+## どちらをいつ使うか
 
-- **コレクション** — 別ファイルで管理されるアイテムの順序付きリスト（FAQ項目、ブログ記事、商品など）。
-- **バリアント** — A/Bテスト、季節限定のバナー、または機能フラグ（feature flags）用の、名前付きコンテンツ代替案。
-- **動的レコード** — 不透明なIDを使用してランタイムに取得されるコンテンツ（CMSレコード、ユーザー固有のコピーなど）。
+- **コレクション** — 別々のファイルで管理される順序付きの項目リスト（FAQ 項目、ブログ記事、商品）。
+- **バリアント** — 名前付きまたは構造化されたコンテンツの代替:
+  - A/B テスト、季節バナー、フィーチャーフラグ向けの**文字列**バリアント。
+  - CMS レコード、ユーザー固有のコピー、またはフィールドの集合でアドレス指定される任意のコンテンツ向けの**オブジェクト**バリアント（旧「動的レコード」）。
 
-## セレクターの競合解決
+> 以前のバージョンでは、レコードキー付きコンテンツ用に別個の `meta` フィールドを公開していました。これは `variant` に統合されました。`meta` を使う代わりに `variant` に**オブジェクト**を渡してください。
 
-1つのディクショナリに複数のセレクターが存在する場合、解決の優先順位は次のようになります：
+## セレクターの曖昧性解消
+
+キーは両方の次元を同時に宣言できます（例: 各項目にバリアントを持つコレクション）。これらは次の順序で解決されます:
 
 ```
-variant → meta → item
+variant → item
 ```
+
+したがって、variant × item キーでの `{ variant: "promo" }` はすべての promo 項目を配列として返し、`{ item: 2 }` を追加すると単一のエントリに絞り込まれます。

package/docs/ja/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
+updatedAt: 2026-06-26
 title: バリアント
-description: コードを変更することなくランタイムに切り替えることができる、名前付きコンテンツ代替案（A/Bテスト、季節限定のバナー、機能フラグ付きのコピー）を宣言するために、Intlayerコンテンツファイルでvariantメタデータフィールドを使用します。
+description: Intlayer のコンテンツファイルで variant メタデータフィールドを使用し、名前付きまたは構造化されたコンテンツの代替（A/B テスト、季節バナー、フィーチャーフラグ付きコピー、CMS レコード、ユーザー固有コンテンツ）を宣言し、コード変更なしにランタイムで切り替えます。
 keywords:
   - バリアント
-  - A/Bテスト
-  - 機能フラグ
+  - A/B テスト
+  - フィーチャーフラグ
   - 動的コンテンツ
+  - 動的レコード
+  - CMS
   - Intlayer
   - 国際化
 slugs:
@@ -17,17 +19,27 @@ slugs:
 history:
   - version: 9.0.0
     date: 2026-06-12
-    changes: "バリアントディクショナリ機能のリリース"
+    changes: "バリアント機能のリリース"
+  - version: 9.1.0
+    date: 2026-06-26
+    changes: "`variant` が文字列またはオブジェクトを受け取るようになりました — 旧 `meta` / 動的レコードはオブジェクトバリアントとして宣言します"
 author: aymericzip
 ---
 
 # バリアント
 
-**バリアント**（Variant）は、同じディクショナリキー（`key`）を共有するものの、それぞれ異なる `variant` 名を持つコンテンツファイルの集合です。Intlayerは、`useIntlayer` に渡されたセレクターに基づいて、適切なファイルを提供します。
+**バリアント**は、同じ辞書 `key` を共有しつつ、それぞれ異なる `variant` 値を持つコンテンツファイルの集合です。Intlayer は `useIntlayer` に渡されたセレクターに基づいて適切なファイルを提供します。
 
-## バリアントの宣言
+`variant` の値は**2 つの形式**を取れます:
 
-各ファイルは、名前付きの代替案を1つ表します。`variant` フィールドを省略する（または `"default"` に設定する）と、そのファイルがデフォルト（フォールバック）としてマークされます。
+- **文字列** — 単一の名前付き代替（A/B テスト、季節バナー、フィーチャーフラグ）。
+- **オブジェクト** — フィールドの集合でアドレス指定される構造化された識別子（CMS レコード、ユーザー固有コピー、不透明な ID をキーとする任意のコンテンツ）。オブジェクト全体が同一性です。エントリを解決するには、セレクターが**等しい**オブジェクトを提供する必要があります。
+
+> オブジェクト形式は旧 `meta` フィールドを置き換えます。以前 `meta: { id, … }` と書いていた箇所はすべて `variant: { id, … }` と書き、`{ variant: { id, … } }` で選択してください。
+
+## 名前付き（文字列）バリアント
+
+各ファイルは 1 つの名前付き代替を表します。`variant` を省略する（または `"default"` に設定する）と、フォールバックとして扱われます。
 
 ```ts fileName="hero-banner.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
@@ -65,9 +77,9 @@ const dictionary = {
 export default dictionary;
 ```
 
-## バリアントの利用
+### 名前付きバリアントの利用
 
-### デフォルトバリアント
+#### デフォルトバリアント
 
 <Tabs group="framework">
   <Tab label="React" value="react">
@@ -209,7 +221,7 @@ export default dictionary;
   </Tab>
 </Tabs>
 
-### 名前付きバリアント
+#### 名前付きバリアント
 
 ```tsx
 const { headline, cta } = useIntlayer("hero-banner", {
@@ -217,18 +229,264 @@ const { headline, cta } = useIntlayer("hero-banner", {
 });
 ```
 
-### ロケールを明示した名前付きバリアント
+#### ロケールを明示した名前付きバリアント
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "ja",
+  locale: "fr",
 });
 ```
 
-## 一般的なユースケース
+## オブジェクト（構造化）バリアント
+
+オブジェクトバリアントは、`variant` フィールドで宣言された任意のキー・値ペアの集合でコンテンツをアドレス指定します。これにより、CMS レコード、ユーザー固有コピー、または不透明な ID をキーとする任意のコンテンツをモデル化できます。**オブジェクト全体**が同一性です。エントリが解決されるには、セレクターが等しいオブジェクトを提供する必要があります。
+
+```ts fileName="product.abc.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
+    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+```ts fileName="product.abcd.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const dictionary = {
+  key: "product",
+  variant: { id: "prod_abcd", userId: "user_123" },
+  content: {
+    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
+    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
+  },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+### オブジェクトバリアントの利用
+
+一致するオブジェクトを `variant` に渡します。辞書で宣言された各フィールドはすべて提供され、等しくなければなりません。そうでない場合、結果は `null` です。フィールドの順序は問いません。
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "react-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "next-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+    ```vue fileName="Product.vue" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script setup>
+    import { useIntlayer } from "vue-intlayer";
+
+    const props = defineProps({
+      productId: String,
+      userId: String,
+    });
+
+    const content = useIntlayer("product", {
+      variant: { id: props.productId, userId: props.userId },
+    });
+    </script>
+
+    <template>
+      <p v-if="content">{{ content.description }}</p>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+    ```svelte fileName="Product.svelte" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    <script lang="ts">
+    import { useIntlayer } from "svelte-intlayer";
+
+    export let productId: string;
+    export let userId: string;
+
+    const content = useIntlayer("product", {
+      variant: { id: productId, userId },
+    });
+    </script>
+
+    {#if $content}
+      <p>{$content.description}</p>
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "preact-intlayer";
+
+    export const Product = ({
+      productId,
+      userId,
+    }: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: productId, userId },
+      });
+
+      if (!content) return null;
+
+      return <p>{content.description}</p>;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+    ```tsx fileName="Product.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { useIntlayer } from "solid-intlayer";
+
+    export const Product = (props: {
+      productId: string;
+      userId: string;
+    }) => {
+      const content = useIntlayer("product", {
+        variant: { id: props.productId, userId: props.userId },
+      });
+
+      return (
+        <>
+          {content() && <p>{content().description}</p>}
+        </>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+    ```typescript fileName="product.component.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+    import { Component, Input, OnInit } from "@angular/core";
+    import { useIntlayer } from "angular-intlayer";
+
+    @Component({
+      selector: "app-product",
+      template: `
+        @if (content()) {
+          <p>{{ content().description }}</p>
+        }
+      `,
+    })
+    export class ProductComponent implements OnInit {
+      @Input() productId!: string;
+      @Input() userId!: string;
+
+      content: any;
+
+      ngOnInit() {
+        this.content = useIntlayer("product", {
+          variant: { id: this.productId, userId: this.userId },
+        });
+      }
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+    ```javascript fileName="product.js"
+    import { useIntlayer } from "vanilla-intlayer";
+
+    const content = useIntlayer("product", {
+      variant: { id: "prod_abcd", userId: "user_123" },
+    });
+
+    if (content) {
+      document.body.innerHTML = `<p>${content.description}</p>`;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+#### ロケールを明示する場合
+
+```tsx
+const content = useIntlayer("product", {
+  variant: { id: "prod_abc", userId: "user_123" },
+  locale: "fr",
+});
+```
+
+#### フィールド欠落 — 一致なし
+
+```ts
+// null を返します: `userId` が欠落しているため、オブジェクトは宣言されたバリアントに一致しません
+const content = useIntlayer("product", { variant: { id: "prod_abc" } });
+```
+
+## 読み込みモード
+
+オブジェクトバリアントはしばしば遅延読み込みされます。これを制御するには辞書に `importMode` を設定します:
+
+```ts contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+const dictionary = {
+  key: "product",
+  importMode: "fetch", // or "dynamic"
+  variant: { id: "prod_abc", userId: "user_123" },
+  content: { … },
+} satisfies Dictionary;
+
+export default dictionary;
+```
+
+`static`、`dynamic`、`fetch` モードの詳細については[バンドル最適化](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)を参照してください。
+
+## 典型的なユースケース
 
-- 実験キーに基づいた見出しコピーのA/Bテスト
-- 季節限定のプロモーションやキャンペーンのバナー
-- 機能フラグ（feature flags）によって制御されるメッセージ文言
-- 特定の地域に特化したマーケティングキャンペーン
+- 実験キーで駆動される A/B コピーテスト
+- 季節またはプロモーションのバナー
+- フィーチャーフラグ付きメッセージ
+- ロケール固有のマーケティングキャンペーン
+- CMS で管理される製品ごとのマーケティングコピー
+- ユーザー固有またはアカウント固有のコンテンツ
+- 実行時に不透明な ID をキーとする任意のコンテンツ

package/docs/ja/intlayer_with_analog.md

@@ -190,7 +190,11 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Intlayerプラグインを追加
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```

package/docs/ja/intlayer_with_astro.md

@@ -505,6 +505,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_lit.md

@@ -590,6 +590,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_preact.md

@@ -544,6 +544,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_react.md

@@ -541,6 +541,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_solid.md

@@ -541,6 +541,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_svelte.md

@@ -545,6 +545,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_vanilla.md

@@ -519,6 +519,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_astro_vue.md

@@ -555,6 +555,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
 ```ts fileName="vite.config.ts"

package/docs/ja/intlayer_with_lynx+react.md

@@ -206,6 +206,8 @@ if (import.meta.webpackHot) {
 プロジェクト内の任意の場所（通常は`src/`内）に**コンテンツ宣言**ファイルを作成します。Intlayerがサポートする任意の拡張形式を使用できます：
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -213,7 +215,10 @@ if (import.meta.webpackHot) {
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - など
 
 例：

package/docs/ja/intlayer_with_nextjs_16.md

@@ -976,6 +976,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```

package/docs/ja/intlayer_with_nextjs_compiler.md

@@ -559,6 +559,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```

package/docs/ja/intlayer_with_react_native+expo.md

@@ -258,6 +258,8 @@ export default RootLayout;
 プロジェクト内の任意の場所（一般的には `src/` 内）に**コンテンツ宣言**ファイルを作成します。Intlayer がサポートする任意の拡張子形式を使用できます：
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -265,7 +267,10 @@ export default RootLayout;
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - その他
 
 > **Expo Router (Web): `.content.*` ファイルは `app/` ディレクトリの外に配置してください。** Expo Router は `app/` 内のすべての JavaScript/TypeScript ファイルをルートとして扱います。Web では、ルート検出がファイルシステムを直接スキャンし、Metro の `resolver.blockList` を**考慮しない**ため、同じ場所に配置された `*.content.ts` がルートとして登録されてしまいます。`app/(tabs)/_layout.content.ts` のようなファイルはレイアウトとして解析され（`.content` 部分がプラットフォームの接尾辞として読み込まれます）、実際の `_layout.tsx` と競合して次のエラーがスローされます:

package/docs/ja/intlayer_with_react_router_v7.md

@@ -169,14 +169,17 @@ This comprehensive guide provides everything you need to integrate Intlayer with
 ```typescript {3,7} fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayerProxy(), // should be placed first
     reactRouter(),
 
-    intlayer(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```
@@ -246,6 +249,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```

package/docs/ja/intlayer_with_react_router_v7_fs_routes.md

@@ -667,6 +667,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 `vite.config.ts` を更新して `intlayerCompiler` プラグインを含めます。
 
 ```ts fileName="vite.config.ts"
@@ -676,7 +678,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // コンパイラプラグインを追加します
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```

package/docs/ja/intlayer_with_storybook.md

@@ -173,7 +173,13 @@ const config: StorybookConfig = {
     } as const;
 
     const viteConfig = defineConfig(() => ({
-      plugins: [intlayer()],
+      plugins: [
+        intlayer({
+          proxy: {
+            ignore: (req) => req.url?.startsWith("/api"),
+          },
+        }),
+      ],
     }));
 
     return mergeConfig(baseConfig, viteConfig(env));

package/docs/ja/intlayer_with_svelte_kit.md

@@ -203,6 +203,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babelコンパイラ'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```