---
createdAt: 2025-09-22
updatedAt: 2026-01-26
title: "नया Intlayer v8 - क्या नया है?"
description: "जानें Intlayer v8 में क्या नया है। डेवलपर अनुभव, सामग्री सत्यापन, और शब्दकोश प्रबंधन में प्रमुख सुधार।"
keywords:
  - Intlayer
  - CMS
  - Developer Experience
  - Features
  - React
  - Next.js
  - JavaScript
  - TypeScript
youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
slugs:
  - doc
  - releases
  - v8
---

# नया Intlayer v8 - क्या नया है?

Intlayer v8 में आपका स्वागत है! यह रिलीज़ डेवलपर अनुभव को बेहतर बनाने (स्वचालित सामग्री पहचान के साथ), डेटा अखंडता सुनिश्चित करने (स्कीमा सत्यापन के साथ), और डिक्शनरी प्रबंधन पर अधिक नियंत्रण प्रदान करने पर केंद्रित है।

<iframe
  src="https://www.youtube.com/embed/ia6JmVf-kkU"
  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
  title="Demo Video - New Intlayer v8 - What's new?"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
  loading="lazy"
/>

## सामग्री तालिका

<TOC levels={[2]} maxDepth={1} />

---

## रिच सामग्री विकास: Markdown और HTML

Intlayer v8 रिच सामग्री को संभालने के तरीके में बड़े सुधार लाता है, **HTML नोड्स** (जो v7 में नहीं थे) पेश करता है और **Markdown नोड्स** (जो v7 में थे लेकिन अब उन्नत किए गए हैं) के साथ API को एकीकृत करता है।

### एकीकृत `.use()` API

हमने Markdown और HTML नोड्स दोनों के लिए `.use()` विधि पेश की है। यह विधि आपको रेंडरिंग के दौरान उपयोग किए जाने वाले HTML टैग या घटकों को कस्टमाइज़ करने की अनुमति देती है।

- **घटक प्रतिस्थापन**: आप आसानी से HTML टैग या कस्टम घटकों को अपने स्वयं के फ्रेमवर्क घटकों से बदल सकते हैं (उदा., `<a>` को `NextLink` से या `<CustomCmp>` को React घटक से बदलें)।
- **टाइप सुरक्षा**: घटक प्रदान करने के लिए सभी फ़ंक्शन पूरी तरह से टाइप किए गए हैं, यह सुनिश्चित करते हुए कि आप सही प्रॉप्स प्राप्त करते हैं।

### डिफ़ॉल्ट रेंडरिंग व्यवहार

v7 में, यदि कोई प्रदाता परिभाषित नहीं था, तो Markdown नोड्स को कच्ची स्ट्रिंग्स के रूप में रेंडर किया जाता था, जिन्हें अक्सर पार्स करने के लिए बाहरी लाइब्रेरी की आवश्यकता होती थी।

**v8 में, Intlayer अपना स्वयं का आंतरिक Markdown पार्सर शामिल करता है।** डिफ़ॉल्ट रूप से, Markdown नोड्स अब बिना किसी बाहरी लाइब्रेरी की आवश्यकता के सीधे HTML के रूप में रेंडर किए जाते हैं।

### नए रेंडरर और प्रदाता यूटिलिटीज

हमने आपको मानक `useIntlayer` प्रवाह के बाहर अधिक नियंत्रण देने के लिए नए स्टैंडअलोन रेंडरर फ़ंक्शन और घटक पेश किए हैं।

- **Markdown**: `MarkdownRenderer`, `useMarkdownRenderer`, `renderMarkdown` (नोट: `MarkdownProvider` v7 में मौजूद था लेकिन अब इन नए टूल्स के साथ एकीकृत होता है)।
- **HTML**: `HTMLRenderer`, `useHTMLRenderer`, `renderHTML`, `HTMLProvider`

#### उदाहरण: Markdown रेंडरिंग टूल्स

<Tabs group='framework'>
  <Tab label="React / Next.js" value="react">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { MarkdownRenderer } from "react-intlayer";

    <MarkdownRenderer
      forceBlock={true}
      components={{
        h1: ({ children }) => <h1 className="text-2xl">{children}</h1>
      }}
    >
      {"# मेरा शीर्षक"}
    </MarkdownRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useMarkdownRenderer } from "react-intlayer";

    const renderMarkdown = useMarkdownRenderer({
      components: {
        h1: ({ children }) => <h1 className="text-red-500">{children}</h1>
      }
    });

    return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderMarkdown } from "react-intlayer";

    const html = renderMarkdown("# मेरा शीर्षक", {
      forceBlock: true
    });
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    **1. घटक का उपयोग करना:**

    ```vue
    <script setup>
    import { MarkdownRenderer } from "vue-intlayer";
    </script>

    <template>
      <MarkdownRenderer :forceBlock="true" content="# मेरा शीर्षक" />
    </template>
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    **1. घटक का उपयोग करना:**

    ```svelte
    <script>
      import { MarkdownRenderer } from "svelte-intlayer";
    </script>

    <MarkdownRenderer forceBlock={true} value="# मेरा शीर्षक" />
    ```

    **2. हुक का उपयोग करना:**

    ```svelte
    <script>
      import { useMarkdownRenderer } from "svelte-intlayer";
      const render = useMarkdownRenderer();
    </script>

    {@html render("# मेरा शीर्षक")}
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```svelte
    <script>
      import { renderMarkdown } from "svelte-intlayer";
    </script>

    {@html renderMarkdown("# मेरा शीर्षक")}
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    **1. सेवा (Service) का उपयोग करना:**

    ```typescript
    import { Component } from "@angular/core";
    import { IntlayerMarkdownService } from "angular-intlayer";

    @Component({ ... })
    export class MyComponent {
      constructor(private markdownService: IntlayerMarkdownService) {}

      render(markdown: string) {
        return this.markdownService.renderMarkdown(markdown);
      }
    }
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { MarkdownRenderer } from "solid-intlayer";

    <MarkdownRenderer forceBlock={true}>
      {"# मेरा शीर्षक"}
    </MarkdownRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useMarkdownRenderer } from "solid-intlayer";

    const render = useMarkdownRenderer();

    return <div>{render("# मेरा शीर्षक")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderMarkdown } from "solid-intlayer";

    return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { MarkdownRenderer } from "preact-intlayer";

    <MarkdownRenderer forceBlock={true}>
      {"# मेरा शीर्षक"}
    </MarkdownRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useMarkdownRenderer } from "preact-intlayer";

    const render = useMarkdownRenderer();

    return <div>{render("# मेरा शीर्षक")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderMarkdown } from "preact-intlayer";

    return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;
    ```

  </Tab>
</Tabs>

#### उदाहरण: HTML रेंडरिंग टूल्स

<Tabs group='framework'>
  <Tab label="React / Next.js" value="react">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { HTMLRenderer } from "react-intlayer";

    <HTMLRenderer
      components={{
        p: ({ children }) => <p className="mb-4">{children}</p>
      }}
    >
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useHTMLRenderer } from "react-intlayer";

    const renderHTML = useHTMLRenderer({
      components: {
        strong: ({ children }) => <b className="font-bold">{children}</b>
      }
    });

    return <div>{renderHTML("<p>नमस्ते <strong>दुनिया</strong></p>")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderHTML } from "react-intlayer";

    const html = renderHTML("<p>Hello World</p>");
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    **1. घटक का उपयोग करना:**

    ```vue
    <script setup>
    import { HTMLRenderer } from "vue-intlayer";
    </script>

    <template>
      <HTMLRenderer content="<p>Hello World</p>" />
    </template>
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    **1. घटक का उपयोग करना:**

    ```svelte
    <script>
      import { HTMLRenderer } from "svelte-intlayer";
    </script>

    <HTMLRenderer value="<p>Hello World</p>" />
    ```

    **2. हुक का उपयोग करना:**

    ```svelte
    <script>
      import { useHTMLRenderer } from "svelte-intlayer";
      const render = useHTMLRenderer();
    </script>

    {@html render("<p>Hello World</p>")}
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```svelte
    <script>
      import { renderHTML } from "svelte-intlayer";
    </script>

    {@html renderHTML("<p>Hello World</p>")}
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    **1. प्रत्यक्ष उपयोग:**

    Angular में, आप मानक `[innerHTML]` बाइंडिंग का उपयोग कर सकते हैं।

    ```html
    <div [innerHTML]="'<p>Hello World</p>'"></div>
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { HTMLRenderer } from "solid-intlayer";

    <HTMLRenderer>
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useHTMLRenderer } from "solid-intlayer";

    const render = useHTMLRenderer();

    return <div>{render("<p>Hello World</p>")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderHTML } from "solid-intlayer";

    return <div>{renderHTML("<p>Hello World</p>")}</div>;
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    **1. घटक का उपयोग करना:**

    ```tsx
    import { HTMLRenderer } from "preact-intlayer";

    <HTMLRenderer>
      {"<p>Hello World</p>"}
    </HTMLRenderer>
    ```

    **2. हुक का उपयोग करना:**

    ```tsx
    import { useHTMLRenderer } from "preact-intlayer";

    const render = useHTMLRenderer();

    return <div>{render("<p>Hello World</p>")}</div>;
    ```

    **3. यूटिलिटी फ़ंक्शन का उपयोग करना:**

    ```tsx
    import { renderHTML } from "preact-intlayer";

    return <div>{renderHTML("<p>Hello World</p>")}</div>;
    ```

  </Tab>
</Tabs>

अधिक जानकारी के लिए, देखें [HTML सामग्री दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/html.md) और [Markdown दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/markdown.md)।

---

## कस्टम URL पुनर्लेखन

Intlayer v8 **कस्टम URL पुनर्लेखन (Custom URL Rewrites)** के लिए समर्थन पेश करता है, जिससे आप ऐसी भाषा-विशिष्ट पथ परिभाषित कर सकते हैं जो मानक `/locale/path` संरचना से भिन्न होते हैं। यह स्थानीय SEO को बेहतर बनाने और गैर-अंग्रेजी बोलने वालों के लिए अधिक प्राकृतिक उपयोगकर्ता अनुभव प्रदान करने के लिए एक शक्तिशाली विशेषता है।

**v8 में मुख्य सुधार:**

- **फ्रेमवर्क फ़ॉर्मेटर्स**: नए `nextjsRewrite`, `svelteKitRewrite`, `reactRouterRewrite`, `vueRouterRewrite`, `solidRouterRewrite`, `tanstackRouterRewrite`, `nuxtRewrite`, और `viteRewrite` प्रत्येक राउटर के लिए स्वाभाविक पैटर्न सिंटैक्स प्रदान करने के लिए।
- **`useRewriteURL` हुक**: एक नया क्लाइंट-साइड हुक जो बिना राउटर नेविगेशन ट्रिगर किए एड्रेस बार को "सुंदर" स्थानीयकृत URL में चुपचाप सुधारता है।
- **स्वचालित SEO रीडायरेक्ट्स**: अंतर्निहित प्रॉक्सी अब स्वचालित रूप से उपयोगकर्ताओं को मैन्युअल रूप से टाइप किए गए कैनोनिकल पथों (उदा., `/fr/about`) से उनके सुंदर स्थानीयकृत संस्करणों (उदा., `/fr/a-propos`) पर रीडायरेक्ट करते हैं।

**उदाहरण कॉन्फ़िगरेशन:**

<Tabs group='routers'>
  <Tab label="Next.js" value="nextjs">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { nextjsRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-no-default",
        rewrite: nextjsRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
    <Tab label="React Router" value="reactrouter">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { reactRouterRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: reactRouterRewrite({
          "/:locale/about": {
            fr: "/:locale/a-propos",
            es: "/:locale/acerca-de",
          },
          "/:locale/products/:id": {
            fr: "/:locale/produits/:id",
            es: "/:locale/productos/:id",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="Vite (Vue, Solid, Svelte)" value="vite">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { viteRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: viteRewrite({
          "/:locale/about": {
            fr: "/:locale/a-propos",
            es: "/:locale/acerca-de",
          },
          "/:locale/products/:id": {
            fr: "/:locale/produits/:id",
            es: "/:locale/productos/:id",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="Nuxt" value="nuxt">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { nuxtRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: nuxtRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
  <Tab label="SvelteKit" value="sveltekit">

    ```typescript fileName="intlayer.config.ts"
    import { Locales, type IntlayerConfig } from "intlayer";
    import { svelteKitRewrite } from "intlayer/routing";

    const config: IntlayerConfig = {
      internationalization: {
        locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
        defaultLocale: Locales.ENGLISH,
      },
      routing: {
        mode: "prefix-all",
        rewrite: svelteKitRewrite({
          "/[locale]/about": {
            fr: "/[locale]/a-propos",
            es: "/[locale]/acerca-de",
          },
          "/[locale]/products/[id]": {
            fr: "/[locale]/produits/[id]",
            es: "/[locale]/productos/[id]",
          },
        }),
      },
    };

    export default config;
    ```

  </Tab>
</Tabs>

यह विशेषता Intlayer प्रॉक्सी के माध्यम से **Next.js** और **Vite** में डिफ़ॉल्ट रूप से समर्थित है, और इसे अन्य राउटर्स जैसे **TanStack Router**, **React Router**, **Vue Router**, **SvelteKit**, और **Solid Router** में आसानी से एकीकृत किया जा सकता है।

अधिक जानकारी और एकीकरण मार्गदर्शिकाओं के लिए, देखें [कस्टम URL पुनर्लेखन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/custom_url_rewrites.md)।

---

### उन्नत इनसर्शन मान (Enhanced Insertion Values)

v8 में, इनसर्शन मान अब स्ट्रिंग और नंबर के अलावा **React तत्वों (या Vue नोड्स)** को भी स्वीकार कर सकते हैं। यह आपको अपने इनसर्शन टेम्प्लेट्स में सीधे समृद्ध, इंटरैक्टिव घटकों को इंजेक्ट करने की अनुमति देता है।

Intlayer अब इनसर्शन के भीतर नेस्टेड React और Preact नोड्स को मजबूती से संभालता है, यह सुनिश्चित करते हुए कि जटिल UI संरचनाएं संरक्षित रहें और सही ढंग से रेंडर हों।

**उदाहरण:**

```typescript fileName="src/example.content.ts"
import { insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myInsertion: insert("Hi {{name}}"),
  },
};
```

<Tabs group='framework'>
  <Tab label="Next.js" value="nextjs">

    ```tsx
    import { useIntlayer } from "next-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // number
          // or
          name: "John", // string
          // or
          name: <span>John</span>, // React तत्व
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="React" value="react">

    ```tsx
    import { useIntlayer } from "react-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // number
          // or
          name: "John", // string
          // or
          name: <span>John</span>, // React तत्व
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    ```vue
    <script setup>
    import { h } from "vue";
    import { useIntlayer } from "vue-intlayer";

    const { myInsertion } = useIntlayer("my-key");
    </script>

    <template>
      <div>
        <component
          :is="myInsertion({
            name: 2,
            // or
            name: 'John',
            // or
            name: h('span', 'John'),
          })"
        />
      </div>
    </template>
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    ```tsx
    import { useIntlayer } from "preact-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // number
          // or
          name: "John", // string
          // or
          name: <span>John</span>, // Preact तत्व
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    ```tsx
    import { useIntlayer } from "solid-intlayer";

    const { myInsertion } = useIntlayer("my-key");

    return (
      <div>
        {myInsertion({
          name: 2, // number
          // or
          name: "John", // string
          // or
          name: <span>John</span>, // Solid तत्व
        })}
      </div>
    );
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    ```svelte
    <script>
      import { useIntlayer } from "svelte-intlayer";

      const { myInsertion } = useIntlayer("my-key");
    </script>

    <div>
      {myInsertion({
        name: 2, // number
        // or
        name: "John", // string
      })}
    </div>
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    ```typescript
    import { Component } from "@angular/core";
    import { useIntlayer } from "angular-intlayer";

    @Component({
      selector: "app-insertion-example",
      template: `
        <div>
          {{ content().myInsertion({
            name: 'John'
          }) }}
        </div>
      `,
    })
    export class InsertionExampleComponent {
      content = useIntlayer("my-key");
    }
    ```

  </Tab>
</Tabs>

## सामग्री स्कीमा सत्यापन

Intlayer v8 शब्दकोशों (dictionaries) के लिए स्कीमा सत्यापन पेश करता है। अब आप Zod का उपयोग करके अपने कॉन्फ़िगरेशन में पुन: प्रयोज्य सत्यापन स्कीमा परिभाषित कर सकते हैं और उन्हें अपनी सामग्री फ़ाइलों पर लागू कर सकते हैं। यह सुनिश्चित करता है कि आपकी सामग्री हमेशा अपेक्षित संरचना का पालन करे, बिल्ड समय पर त्रुटियों को पकड़ ले।

### 1. स्कीमा परिभाषित करें

अपने स्कीमा `intlayer.config.ts` में परिभाषित करें:

```typescript fileName="intlayer.config.ts"
import { z } from "zod";

export default {
  schemas: {
    "seo-metadata": z.object({
      title: z.string().min(50).max(60),
      description: z.string().min(150).max(160),
    }),
  },
};
```

### 2. डिक्शनरी पर स्कीमा लागू करें

अपनी डिक्शनरी परिभाषा में स्कीमा कुंजी का संदर्भ लें:

```typescript fileName="src/example.content.ts"
import { type Dictionary } from "intlayer";

const aboutPageMetaContent = {
  key: "about-page-meta",
  schema: "seo-metadata", // <--
  content: {
    title: "हमारी कंपनी के बारे में - हमारे बारे में और जानें",
    description: "हमारी कंपनी के मिशन, मूल्यों और टीम की खोज करें।",
  },
} satisfies Dictionary;

export default aboutPageMetaContent;
```

यदि सामग्री स्कीमा से मेल नहीं खाती (उदा., शीर्षक बहुत छोटा है), तो बिल्ड प्रक्रिया त्रुटि उत्पन्न करेगी।

---

### उन्नत स्वचालित सामग्री पहचान

v8 में, Intlayer आपकी सामग्री स्ट्रिंग्स में मार्कडाउन सिंटैक्स, HTML टैग और वेरिएबल इनसर्शन को बुद्धिमानी से पहचानता है। इसका मतलब है कि आप अक्सर `md()`, `html()`, या `insert()` जैसे सहायक कार्यों को छोड़ सकते हैं।

यह व्यवहार डिफ़ॉल्ट रूप से सक्षम है। अब आप इस पहचान को या तो वैश्विक स्तर पर अपने `intlayer.config.ts` में या प्रति डिक्शनरी के आधार पर सूक्ष्म रूप से ट्यून कर सकते हैं।

#### सूक्ष्म नियंत्रण

आप विशिष्ट प्रकार के परिवर्तनों को सक्षम या अक्षम कर सकते हैं:

```typescript fileName="intlayer.config.ts"
export default {
  dictionary: {
    // contentAutoTransformation: false (default)
    contentAutoTransformation: {
      markdown: true,
      html: true,
      insertion: false, // स्वचालित इनसर्शन पहचान अक्षम करें
    },
  },
};
```

**v7 व्यवहार (मैनुअल रैपिंग):**

```typescript fileName="src/example.content.ts"
import { md, insert } from "intlayer";

export default {
  key: "my-key",
  content: {
    myMarkdown: md("## Hello World"),
    myInsertion: insert("Hi {{name}}"),
  },
};
```

**v8 व्यवहार (स्वचालित पहचान):**

```typescript fileName="src/example.content.ts"
export default {
  key: "my-key",
  contentAutoTransformation: true, // डिक्शनरी परिभाषा या intlayer.config.ts में वैश्विक स्तर पर भी सेट किया जा सकता है
  content: {
    myMarkdown: "## Hello World", // स्वचालित रूप से मार्कडाउन के रूप में पहचाना गया
    myHTML: "<p>Hello World</p>", // स्वचालित रूप से HTML के रूप में पहचाना गया
    myInsertion: "Hi {{name}}", // स्वचालित रूप से इनसर्शन के रूप में पहचाना गया
  },
};
```

अंतर्निहित JSON परिणाम समान रहता है, रेंडरिंग के लिए आवश्यक समृद्ध प्रकार की जानकारी को सुरक्षित रखते हुए:

```json
{
  "key": "my-key",
  "content": {
    "myMarkdown": {
      "nodeType": "markdown",
      "markdown": "## Hello World"
    },
    "myHTML": {
      "nodeType": "html",
      "html": "<p>Hello World</p>"
    },
    "myInsertion": {
      "nodeType": "insertion",
      "insertion": "Hi {{name}}"
    }
  }
}
```

---

## स्थानीयकरण: नया `useIntl` हुक

React, Next.js और Vue में अब एक नया `useIntl()` हुक उपलब्ध है। यह एक स्थानीय-बद्ध `Intl` ऑब्जेक्ट प्रदान करता है जो स्वचालित रूप से नंबर, तिथियों और बहुत कुछ को फॉर्मेट करने के लिए वर्तमान भाषा का उपयोग करता है, बिना मैन्युअल रूप से लोकेल पास करने की आवश्यकता के।

<Tabs group='framework'>
  <Tab label="Next.js" value="nextjs">

    ```tsx
    import { useIntl } from "next-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="React" value="react">

    ```tsx
    import { useIntl } from "react-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Vue" value="vue">

    ```vue
    <script setup>
    import { useIntl } from "vue-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    </script>
    ```

  </Tab>
  <Tab label="Preact" value="preact">

    ```tsx
    import { useIntl } from "preact-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Solid" value="solid">

    ```tsx
    import { useIntl } from "solid-intlayer";

    const intl = useIntl();

    const formattedPrice = new intl.NumberFormat({
      style: "currency",
      currency: "USD",
    }).format(123.45);
    ```

  </Tab>
  <Tab label="Svelte" value="svelte">

    ```svelte
    <script>
      import { useIntl } from "svelte-intlayer";

      const intl = useIntl();

      const formattedPrice = new intl.NumberFormat({
        style: "currency",
        currency: "USD",
      }).format(123.45);
    </script>
    ```

  </Tab>
  <Tab label="Angular" value="angular">

    ```typescript
    import { Component, computed } from "@angular/core";
    import { useIntl } from "angular-intlayer";

    @Component({
      selector: "app-intl-example",
      template: `<div>{{ formattedPrice() }}</div>`,
    })
    export class IntlExampleComponent {
      intl = useIntl();

      formattedPrice = computed(() =>
        new (this.intl().NumberFormat)({
          style: "currency",
          currency: "USD",
        }).format(123.45)
      );
    }
    ```

  </Tab>
</Tabs>

---

## टूलिंग: VSCode एक्सटेंशन सुधार

Intlayer VSCode एक्सटेंशन को आपके अंतर्राष्ट्रीयकरण वर्कफ़्लो को सुव्यवस्थित करने के लिए v8 में बड़े अपडेट प्राप्त हुए हैं:

- **प्रारंभिक समय**: प्रोजेक्ट खोलते समय प्रदर्शन में सुधार।
- **कैशिंग**: लगभग तात्कालिक सत्यापन और ऑटोकम्प्लीशन के लिए उन्नत कैशिंग लेयर।
- **अनुपयोगी कुंजियाँ और डुप्लिकेट कुंजियाँ पहचान**: आपके शब्दकोशों में **अनुपयोगी कुंजियों** और **डुप्लिकेट कुंजियों** को स्वचालित रूप से पहचानने की नई विशेषताएं, जो आपकी सामग्री को साफ़ और कुशल रखने में आपकी सहायता करती हैं।

---

## कंपाइलर अनुकूलन

Intlayer v8 में मार्कडाउन और HTML कंपाइलर के लिए एक नई कैशिंग लेयर शामिल है। यह सुनिश्चित करता है कि एक ही कॉन्फ़िगरेशन के साथ समान सामग्री स्ट्रिंग्स केवल एक बार पार्स की जाती हैं, जिससे री-रेंडर के दौरान या कई स्थानों पर समान सामग्री का उपयोग करते समय ओवरहेड काफी कम हो जाता है।

<Tabs group='bundler'>
  <Tab label="Next.js" value="nextjs">
  
    ```typescript fileName="babel.config.js"
      const {
      intlayerExtractBabelPlugin,
      intlayerOptimizeBabelPlugin,
      getExtractPluginOptions,
      getOptimizePluginOptions,
    } = require('@intlayer/babel');

    module.exports = {
      presets: ['next/babel'],
      plugins: [
        // घटकों से सामग्री को शब्दकोशों में निकालें
        [intlayerExtractBabelPlugin, getExtractPluginOptions()],
        // useIntlayer को सीधे शब्दकोश आयात से बदलकर आयात अनुकूलित करें
        [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
      ],
    };
    ```

  </Tab>
  <Tab label="Vite" value="vite">
   
    ```typescript fileName="vite.config.js"
    import { defineConfig } from 'vite';
    import {intlayer, intlayerCompiler} from 'vite-intlayer';

    export default defineConfig({
      plugins: [intlayer(), intlayerCompiler()],
    });
    ```

> Vue / Svelte के लिए आपको उपयुक्त कंपाइलर पैकेज स्थापित करने की आवश्यकता होगी:
>
> ```bash
> # Vue के लिए
> npm install @intlayer/vue-compiler
> ```
>
> ```bash
> # Svelte के लिए
> npm install @intlayer/svelte-compiler
> ```

  </Tab>
</Tabs>

---

## लचीलापन: एकीकृत आयात मोड (Unified Import Mode)

`live` बूलियन प्रॉपर्टी को अधिक व्यापक `importMode` प्रॉपर्टी के पक्ष में हटा दिया गया है। यह शब्दकोशों को लोड करने के तरीके की स्पष्ट परिभाषा की अनुमति देता है: स्थिर रूप से, गतिशील रूप से, या लाइव सिंक के माध्यम से।

### मोड (Modes)

- **`static`** (डिफ़ॉल्ट): डिक्शनरी को बिल्ड समय पर बंडल किया जाता है। प्रदर्शन के लिए सर्वोत्तम।
- **`dynamic`**: शब्दकोश रनटाइम पर लोड किया जाता है (उदा., JSON फेच या सस्पेंस के माध्यम से)।
- **`fetch`**: डिक्शनरी रनटाइम पर CMS/सर्वर से प्राप्त की जाती है और सिंक्रनाइज़ की जाती है।

**माइग्रेशन:**

| v7 कॉन्फ़िग   | v8 कॉन्फ़िग                           |
| :------------ | :------------------------------------ |
| `live: true`  | `importMode: 'fetch'`                 |
| `live: false` | `importMode: 'static'` (या 'dynamic') |

नोट: Intlayer v8 में, `importMode` प्रॉपर्टी को `build` कॉन्फ़िगरेशन से `intlayer.config.ts` में `dictionary` कॉन्फ़िगरेशन में ले जाया गया है। यह आपको अपने सभी शब्दकोशों के लिए एक डिफ़ॉल्ट आयात मोड परिभाषित करने की अनुमति देता है, जबकि अभी भी प्रति-शब्दकोश आधार पर इसे ओवरराइड करने में सक्षम है।

**वैश्विक कॉन्फ़िगरेशन उदाहरण:**

```typescript fileName="intlayer.config.ts"
export default {
  dictionary: {
    importMode: "dynamic", // वैश्विक डिफ़ॉल्ट
  },
  // ...
};
```

**डिक्शनरी उदाहरण:**

```typescript fileName="src/example.content.ts"
export default {
    key: 'my-key',
    importMode: "fetch", // वैश्विक कॉन्फ़िग को ओवरराइड करता है
    content: { ... }
}
```

---

## शब्दकोश स्थान नियंत्रण (Dictionary Location Control)

v8 शब्दकोशों के रहने और वे कैसे सिंक्रनाइज़ होते हैं, इसे स्पष्ट रूप से प्रबंधित करने के लिए `location` प्रॉपर्टी पेश करता है। यह स्थानीय फ़ाइलों और दूरस्थ CMS सामग्री दोनों से जुड़े हाइब्रिड वर्कफ़्लो के लिए विशेष रूप से उपयोगी है।

### विकल्प

- **`local`**: शब्दकोश केवल स्थानीय रूप से मौजूद है। इसे दूरस्थ CMS पर पुश नहीं किया जाएगा।
- **`remote`**: शब्दकोश को दूरस्थ रूप से प्रबंधित किया जाता है। एक बार CMS पर पुश करने के बाद, इसे स्थानीय से अलग कर दिया जाएगा। दूरस्थ शब्दकोश को CMS से खींचा (pull) जाएगा।
- **`local_and_remote`**: शब्दकोश दोनों स्थानों पर मौजूद है। स्थानीय परिवर्तन पुश किए जाते हैं, और दूरस्थ परिवर्तन खींचे (pull) जाते हैं (सिंक्रनाइज़ किए जाते हैं)।

**उदाहरण:**

```typescript fileName="src/example.content.ts"
export default {
    key: 'my-key',
    location: "local", // इस शब्दकोश को केवल स्थानीय रखें
    content: { ... }
}
```

---

## सिस्टम कॉन्फ़िगरेशन पृथक्करण

Intlayer v8 सामग्री स्रोतों के कॉन्फ़िगरेशन को आंतरिक सिस्टम और आउटपुट पथों से अलग करता है। यह `content` प्रॉपर्टी को व्यवस्थित करता है और यह स्पष्ट करता है कि कौन सी सेटिंग्स उपयोगकर्ता प्रबंधन के लिए हैं बनाम जो Intlayer सिस्टम द्वारा प्रबंधित की जाती हैं।

निम्नलिखित प्रॉपर्टीज को `content` से `intlayer.config.ts` में एक नई `system` प्रॉपर्टी में स्थानांतरित कर दिया गया है:

- `dictionariesDir`
- `moduleAugmentationDir`
- `unmergedDictionariesDir`
- `typesDir`
- `mainDir`
- `configDir`
- `cacheDir`
- `outputFilesPatternWithPath`

**v7 व्यवहार:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src"],
    dictionariesDir: ".intlayer/dictionary", // स्रोत कॉन्फ़िग के साथ मिश्रित
  },
};
```

**v8 व्यवहार:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src"],
  },
  system: {
    dictionariesDir: ".intlayer/dictionary", // स्पष्ट रूप से अलग
  },
};
```

---

## सामग्री और कोड निर्देशिका पृथक्करण

Intlayer v8 सामग्री परिभाषा फ़ाइलों के कॉन्फ़िगरेशन को कोड परिवर्तन के कॉन्फ़िगरेशन से अलग करता है। यह अधिक सटीक निगरानी और स्कैनिंग की अनुमति देता है, जिससे बिल्ड प्रदर्शन में सुधार होता है।

पहले, `contentDir` का उपयोग `.content.*` फ़ाइलों को देखने और `useIntlayer` कॉल्स के लिए कोड स्कैन करने दोनों के लिए किया जाता था। अब:

- **`contentDir`**: विशेष रूप से आपकी सामग्री घोषणा फ़ाइलों के लिए।
- **`codeDir`**: विशेष रूप से आपके एप्लिकेशन कोड के लिए जिसे परिवर्तन की आवश्यकता है (उदा., प्रूनिंग, अनुकूलन)।

**माइग्रेशन:**

यदि आपने पहले `contentDir` सेट किया था, तो Intlayer v8 इसे `codeDir` के लिए डिफ़ॉल्ट के रूप में भी उपयोग करेगा, लेकिन एक चेतावनी लॉग करेगा। आपको अपने कॉन्फ़िगरेशन में `codeDir` को स्पष्ट रूप से परिभाषित करना चाहिए।

**v7 व्यवहार:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src", "@packages/design-system"], // सामग्री और कोड दोनों के लिए उपयोग किया जाता है
  },
};
```

**v8 व्यवहार:**

```typescript fileName="intlayer.config.ts"
export default {
  content: {
    contentDir: ["src/content", "@packages/design-system"], // केवल यहाँ src/content/*.content.* फ़ाइलों और @packages/design-system/dist/*.content.* फ़ाइलों की निगरानी करें
    codeDir: ["src", "@packages/design-system"], // केवल यहाँ कोड परिवर्तन के लिए स्कैन करें और @packages/design-system/src/*.content.* फ़ाइलों को स्कैन करें
  },
};
```

---

## फ्रेमवर्क: Svelte सुधार

Svelte में मार्कडाउन और HTML सामग्री अब स्ट्रिंगिफ़ाइड होने पर स्वचालित रूप से HTML में पार्स हो जाती है। यह Svelte के `{@html}` सिंटैक्स के साथ उपयोग करना बहुत आसान बनाता है, क्योंकि अब आप सीधे सामग्री नोड पास कर सकते हैं।

---

## v7 से माइग्रेशन नोट्स

### कॉन्फ़िगरेशन परिवर्तन

- **`live` प्रॉपर्टी**: शब्दकोशों में `live` प्रॉपर्टी को हटा दिया गया है। इसके बजाय `importMode: 'fetch'` का उपयोग करें।
- **importMode**: कॉन्फ़िगरेशन में `build.importMode` प्रॉपर्टी को हटा दिया गया है। इसके बजाय `dictionary.importMode` का उपयोग करें।
- **`contentDir` और `codeDir`**: `contentDir` अब विशेष रूप से सामग्री फ़ाइलों के लिए है। कोड परिवर्तन के लिए एक नई `codeDir` प्रॉपर्टी जोड़ी गई है। यदि `codeDir` सेट नहीं है, तो Intlayer `contentDir` पर वापस आ जाएगा और एक चेतावनी लॉग करेगा।
- **स्कीमा सत्यापन**: नई `schema` विशेषता का उपयोग करने के लिए, सुनिश्चित करें कि आपने अपने प्रोजेक्ट में `zod` स्थापित किया है।

---

## उपयोगी लिंक

- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
- [Content File Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md)
- [HTML Content Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/html.md)
- [Markdown Content Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/markdown.md)
- [Custom URL Rewrites Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/custom_url_rewrites.md)
