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

package/docs/hi/dynamic_dictionaries/variants.md

@@ -1,13 +1,15 @@
 ---
 createdAt: 2026-06-12
-updatedAt: 2026-06-12
-title: वेरिएंट
-description: कोड परिवर्तनों के बिना रनटाइम पर उनके बीच स्विच करने के लिए नामित सामग्री विकल्पों (A/B परीक्षण, मौसमी बैनर, फीचर-फ़्लैग्ड प्रतिलिपि) को घोषित करने के लिए Intlayer सामग्री फ़ाइलों में variant मेटाडेटा फ़ील्ड का उपयोग करें।
+updatedAt: 2026-06-26
+title: वैरिएंट
+description: नामित या संरचित सामग्री विकल्प — A/B परीक्षण, मौसमी बैनर, फ़ीचर-फ़्लैग टेक्स्ट, CMS रिकॉर्ड, उपयोगकर्ता-विशिष्ट सामग्री — घोषित करने और कोड बदले बिना रनटाइम पर उनके बीच स्विच करने के लिए Intlayer सामग्री फ़ाइलों में variant मेटाडेटा फ़ील्ड का उपयोग करें।
 keywords:
-  - वेरिएंट
+  - वैरिएंट
   - 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
 ---
 
-# वेरिएंट (Variants)
+# वैरिएंट
 
-एक **वेरिएंट** (variant) सामग्री फ़ाइलों का एक सेट है जो एक ही डिक्शनरी कुंजी (`key`) साझा करते हैं लेकिन प्रत्येक में एक अलग `variant` नाम होता है। Intlayer `useIntlayer` को दिए गए चयनकर्ता के आधार पर उपयुक्त फ़ाइल प्रस्तुत करता है।
+एक **वैरिएंट** सामग्री फ़ाइलों का एक समूह है जो समान डिक्शनरी `key` साझा करती हैं लेकिन प्रत्येक का एक अलग `variant` मान होता है। Intlayer `useIntlayer` को पास किए गए सेलेक्टर के आधार पर उपयुक्त फ़ाइल परोसता है।
 
-## वेरिएंट घोषित करना
+`variant` मान **दो रूप** ले सकता है:
 
-प्रत्येक फ़ाइल एक नामित विकल्प का प्रतिनिधित्व करती है। `variant` फ़ील्ड को छोड़ने (या इसे `"default"` पर सेट करने) से यह डिफ़ॉल्ट (fallback) वेरिएंट के रूप में चिह्नित हो जाता है।
+- **एक स्ट्रिंग** — एकल नामित विकल्प (A/B परीक्षण, मौसमी बैनर, फ़ीचर फ़्लैग)।
+- **एक ऑब्जेक्ट** — फ़ील्ड के सेट द्वारा संबोधित एक संरचित विभेदक (CMS रिकॉर्ड, उपयोगकर्ता-विशिष्ट सामग्री, अपारदर्शी ID द्वारा कुंजीबद्ध कोई भी सामग्री)। पूरा ऑब्जेक्ट ही पहचान है: प्रविष्टि हल करने के लिए सेलेक्टर को एक **समान** ऑब्जेक्ट देना होगा।
+
+> ऑब्जेक्ट रूप पुराने `meta` फ़ील्ड की जगह लेता है। जहाँ भी आप पहले `meta: { id, … }` लिखते थे, वहाँ `variant: { id, … }` लिखें और इसे `{ variant: { id, … } }` के साथ चुनें।
+
+## नामित (स्ट्रिंग) वैरिएंट
+
+प्रत्येक फ़ाइल एक नामित विकल्प का प्रतिनिधित्व करती है। `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">
@@ -76,7 +88,7 @@ export default dictionary;
 
     export const Hero = () => {
       const { headline, cta } = useIntlayer("hero-banner");
-      // → डिफ़ॉल्ट वेरिएंट
+      // → डिफ़ॉल्ट वैरिएंट
 
       return (
         <section>
@@ -94,7 +106,7 @@ export default dictionary;
 
     export const Hero = () => {
       const { headline, cta } = useIntlayer("hero-banner");
-      // → डिफ़ॉल्ट वेरिएंट
+      // → डिफ़ॉल्ट वैरिएंट
 
       return (
         <section>
@@ -142,7 +154,7 @@ export default dictionary;
 
     export const Hero = () => {
       const { headline, cta } = useIntlayer("hero-banner");
-      // → डिफ़ॉल्ट वेरिएंट
+      // → डिफ़ॉल्ट वैरिएंट
 
       return (
         <section>
@@ -160,7 +172,7 @@ export default dictionary;
 
     export const Hero = () => {
       const content = useIntlayer("hero-banner");
-      // → डिफ़ॉल्ट वेरिएंट
+      // → डिफ़ॉल्ट वैरिएंट
 
       return (
         <section>
@@ -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", {
 });
 ```
 
-### स्पष्ट भाषा विकल्प के साथ नामित वेरिएंट
+#### स्पष्ट locale के साथ नामित वैरिएंट
 
 ```tsx
 const content = useIntlayer("hero-banner", {
   variant: "black_friday",
-  locale: "hi",
+  locale: "fr",
 });
 ```
 
-## विशिष्ट उपयोग के मामले
+## ऑब्जेक्ट (संरचित) वैरिएंट
+
+एक ऑब्जेक्ट वैरिएंट `variant` फ़ील्ड में घोषित मनमाने key-value युग्मों के सेट द्वारा सामग्री को संबोधित करता है — जिससे 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>
+
+#### स्पष्ट locale के साथ
+
+```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/hi/bundle_optimization.md) देखें।
+
+## विशिष्ट उपयोग-मामले
 
-- एक परीक्षण कुंजी द्वारा संचालित A/B प्रतिलिपि परीक्षण
-- मौसमी या प्रचार बैनर
-- फीचर-फ़्लैग्ड मैसेजिंग
-- स्थानीय बाजार के विशिष्ट अभियान
+- प्रयोग key द्वारा संचालित A/B टेक्स्ट परीक्षण
+- मौसमी या प्रचारात्मक बैनर
+- फ़ीचर-फ़्लैग संदेश
+- locale-विशिष्ट मार्केटिंग अभियान
+- CMS में प्रबंधित प्रति-उत्पाद मार्केटिंग टेक्स्ट
+- उपयोगकर्ता-विशिष्ट या खाता-विशिष्ट सामग्री
+- रनटाइम पर अपारदर्शी ID द्वारा कुंजीबद्ध कोई भी सामग्री

package/docs/hi/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/hi/intlayer_with_astro.md

@@ -505,12 +505,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_lit.md

@@ -579,12 +579,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_preact.md

@@ -534,12 +534,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_react.md

@@ -530,12 +530,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_solid.md

@@ -530,12 +530,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_svelte.md

@@ -534,12 +534,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_vanilla.md

@@ -508,12 +508,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_astro_vue.md

@@ -556,12 +556,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_lynx+react.md

@@ -207,6 +207,8 @@ if (import.meta.webpackHot) {
 अपने प्रोजेक्ट में कहीं भी **सामग्री घोषणा** फ़ाइलें बनाएं (आमतौर पर `src/` के भीतर), किसी भी एक्सटेंशन प्रारूप का उपयोग करके जिसे इंटलेयर समर्थन करता है:
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -214,7 +216,10 @@ if (import.meta.webpackHot) {
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - आदि।
 
 उदाहरण:

package/docs/hi/intlayer_with_react_native+expo.md

@@ -261,6 +261,8 @@ export default RootLayout;
 प्रोजेक्ट में कहीं भी **content declaration** फाइलें बनाएं (आमतौर पर `src/` के अंदर), Intlayer द्वारा समर्थित किसी भी एक्सटेंशन फॉर्मेट का उपयोग करते हुए:
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -268,7 +270,10 @@ export default RootLayout;
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - आदि।
 
 > **Expo Router (वेब): `.content.*` फ़ाइलों को `app/` डायरेक्टरी से बाहर रखें।** Expo Router `app/` के अंदर मौजूद हर JavaScript/TypeScript फ़ाइल को एक रूट मानता है। वेब पर, इसकी रूट खोज फ़ाइल सिस्टम को सीधे स्कैन करती है और Metro के `resolver.blockList` का **सम्मान नहीं** करती है, इसलिए एक सह-स्थित `*.content.ts` रूट के रूप में पंजीकृत हो जाता है। `app/(tabs)/_layout.content.ts` जैसी फ़ाइल को लेआउट के रूप में भी पार्स किया जाता है (`.content` भाग को प्लेटफ़ॉर्म प्रत्यय के रूप में पढ़ा जाता है), जो वास्तविक `_layout.tsx` के साथ टकराता है और यह त्रुटि देता है:

package/docs/hi/intlayer_with_react_router_v7.md

@@ -624,12 +624,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/intlayer_with_react_router_v7_fs_routes.md

@@ -589,12 +589,15 @@ intlayerCompiler प्लगइन शामिल करने के लि
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/hi/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));