---
createdAt: 2024-08-12
updatedAt: 2025-06-29
title: Intlayer कैसे काम करता है
description: जानें कि Intlayer आंतरिक रूप से कैसे काम करता है। समझें कि Intlayer को शक्तिशाली बनाने वाली संरचना और घटक क्या हैं।
keywords:
  - Intlayer
  - यह कैसे काम करता है
  - आर्किटेक्चर
  - घटक
  - आंतरिक कार्यप्रणाली
slugs:
  - doc
  - concept
  - how-works-intlayer
history:
  - version: 5.5.10
    date: 2025-06-29
    changes: "प्रारंभिक इतिहास"
---

# Intlayer कैसे काम करता है

## अवलोकन

Intlayer के पीछे मुख्य विचार यह है कि प्रति-कंपोनेंट सामग्री प्रबंधन को अपनाया जाए। तो Intlayer का विचार यह है कि आपको अपनी सामग्री को अपनी कोडबेस में कहीं भी घोषित करने की अनुमति दी जाए, जैसे कि आपके कंपोनेंट के समान डायरेक्टरी में।

```bash
.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx
```

ऐसा करने के लिए, Intlayer की भूमिका आपके प्रोजेक्ट में मौजूद सभी विभिन्न प्रारूपों में आपकी `सामग्री घोषणा फ़ाइलों` को ढूंढना है, और फिर उनसे `डिक्शनरीज़` उत्पन्न करना है।

तो इसमें दो मुख्य चरण होते हैं:

- निर्माण चरण
- व्याख्या चरण

### डिक्शनरीज़ निर्माण चरण

निर्माण चरण तीन तरीकों से किया जा सकता है:

- CLI का उपयोग करके `npx intlayer build` के साथ
- [vscode एक्सटेंशन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/vs_code_extension.md) का उपयोग करके
- ऐप प्लगइन्स का उपयोग करके जैसे [`vite-intlayer` पैकेज](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/vite-intlayer/index.md), या उनके [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/next-intlayer/index.md) के लिए समकक्ष। जब आप इन प्लगइन्स में से किसी एक का उपयोग करते हैं, तो Intlayer स्वचालित रूप से आपके डिक्शनरीज़ का निर्माण करेगा जब आप अपना एप्लिकेशन शुरू (डेव) या निर्माण (प्रोड) करेंगे।

1. सामग्री फ़ाइलों की घोषणा
   - सामग्री फ़ाइलें विभिन्न प्रारूपों में परिभाषित की जा सकती हैं, जैसे TypeScript, ECMAScript, CommonJS, या JSON।
   - सामग्री फ़ाइलें प्रोजेक्ट में कहीं भी परिभाषित की जा सकती हैं, जो बेहतर रखरखाव और स्केलेबिलिटी की अनुमति देती हैं। सामग्री फ़ाइलों के लिए फ़ाइल एक्सटेंशन सम्मेलनों का पालन करना महत्वपूर्ण है। यह एक्सटेंशन डिफ़ॉल्ट रूप से `*.content.{js|cjs|mjs|ts|tsx|json}` है, लेकिन इसे [कॉन्फ़िगरेशन फ़ाइल](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) में संशोधित किया जा सकता है।

2. `डिक्शनरीज़` का निर्माण
   - डिक्शनरीज़ सामग्री फ़ाइलों से उत्पन्न होती हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरीज़ प्रोजेक्ट की `.intlayer/dictionaries` डायरेक्टरी में उत्पन्न होती हैं।
   - ये डिक्शनरीज़ विभिन्न प्रारूपों में उत्पन्न होती हैं ताकि सभी आवश्यकताओं को पूरा किया जा सके और एप्लिकेशन के प्रदर्शन को अनुकूलित किया जा सके।

3. डिक्शनरी प्रकारों का निर्माण
   आपके `डिक्शनरीज़` के आधार पर, Intlayer प्रकार उत्पन्न करेगा ताकि उन्हें आपके एप्लिकेशन में उपयोग किया जा सके।

- डिक्शनरी प्रकार Intlayer `content declaration files` से उत्पन्न होते हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरी प्रकार प्रोजेक्ट की `.intlayer/types` डायरेक्टरी में उत्पन्न होते हैं।

- Intlayer [मॉड्यूल वृद्धि](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) एक TypeScript सुविधा है जो आपको Intlayer के लिए अतिरिक्त प्रकार परिभाषित करने की अनुमति देती है। यह विकास अनुभव को आसान बनाता है उपलब्ध तर्कों या आवश्यक तर्कों का सुझाव देकर।
  उत्पन्न प्रकारों में, Intlayer डिक्शनरी प्रकार या यहां तक कि भाषा कॉन्फ़िगरेशन प्रकार `types/intlayer.d.ts` फ़ाइल में जोड़े जाते हैं, और अन्य पैकेजों द्वारा उपयोग किए जाते हैं। ऐसा करने के लिए, यह आवश्यक है कि `tsconfig.json` फ़ाइल को प्रोजेक्ट की `types` डायरेक्टरी को शामिल करने के लिए कॉन्फ़िगर किया गया हो।

### डिक्शनरीज़ की व्याख्या चरण

Intlayer का उपयोग करके, आप अपने एप्लिकेशन में `useIntlayer` हुक का उपयोग करके अपनी सामग्री तक पहुंच सकते हैं।

```tsx
const MyComponent = () => {
  const content = useIntlayer("my-component");
  return <div>{content.title}</div>;
};
```

यह हुक आपके लिए लोकेल का पता लगाने का प्रबंधन करेगा और वर्तमान लोकेल के लिए सामग्री लौटाएगा। इस हुक का उपयोग करके, आप मार्कडाउन की व्याख्या कर सकते हैं, बहुवचन प्रबंधन कर सकते हैं, और भी बहुत कुछ।

> Intlayer की सभी विशेषताओं को देखने के लिए, आप [डिक्शनरी दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) पढ़ सकते हैं।

## दूरस्थ सामग्री

Intlayer आपको सामग्री को स्थानीय रूप से घोषित करने और फिर उन्हें CMS में निर्यात करने की अनुमति देता है ताकि आपकी गैर-तकनीकी टीम द्वारा इसे संपादित किया जा सके।

इसलिए आप CMS से सामग्री को अपनी एप्लिकेशन में पुश और पुल कर सकेंगे, जैसे कि आप अपने कोड के लिए Git के साथ करते हैं।

CMS का उपयोग करके बाहरी डिक्शनरीज़ के लिए, Intlayer एक बुनियादी फ़ेच ऑपरेशन करता है ताकि दूरस्थ डिक्शनरीज़ को पुनः प्राप्त किया जा सके और उन्हें आपकी स्थानीय डिक्शनरीज़ के साथ मर्ज किया जा सके। यदि आपके प्रोजेक्ट पर कॉन्फ़िगर किया गया है, तो Intlayer स्वचालित रूप से एप्लिकेशन शुरू होने (डेव) / निर्माण (प्रोड) के समय CMS से सामग्री प्राप्त करने का प्रबंधन करेगा।

## दृश्य संपादक

Intlayer एक दृश्य संपादक भी प्रदान करता है जो आपको अपनी सामग्री को दृश्य तरीके से संपादित करने की अनुमति देता है। यह [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) बाहरी `intlayer-editor` पैकेज में उपलब्ध है।

![विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)

- सर्वर एक सरल Express एप्लिकेशन है जो क्लाइंट से अनुरोध सुनता है और आपकी एप्लिकेशन की सामग्री, जैसे कि `dictionaries` और कॉन्फ़िगरेशन, को पुनः प्राप्त करता है ताकि इसे क्लाइंट साइड पर सुलभ बनाया जा सके।
- दूसरी ओर, क्लाइंट एक React एप्लिकेशन है जिसका उपयोग दृश्य इंटरफ़ेस के माध्यम से आपकी सामग्री के साथ इंटरैक्ट करने के लिए किया जाता है।
  जब आप `useIntlayer` का उपयोग करके अपनी सामग्री को कॉल करते हैं और संपादक सक्षम होता है, तो यह स्वचालित रूप से आपकी स्ट्रिंग्स को `IntlayerNode` नामक एक Proxy ऑब्जेक्ट के साथ लपेट देता है। यह नोड `window.postMessage` का उपयोग करता है ताकि एक रैप्ड iframe के साथ संवाद किया जा सके जिसमें विज़ुअल एडिटर इंटरफ़ेस होता है।  
  संपादक की ओर, संपादक इन संदेशों को सुनता है और आपकी सामग्री के साथ वास्तविक इंटरैक्शन का अनुकरण करता है, जिससे आप सीधे अपने एप्लिकेशन के संदर्भ में टेक्स्ट संपादित कर सकते हैं।

## ऐप निर्माण अनुकूलन

आपके एप्लिकेशन के बंडल आकार को अनुकूलित करने के लिए, Intlayer दो प्लगइन्स प्रदान करता है: `@intlayer/babel` और `@intlayer/swc` प्लगइन्स।  
Babel और SWC प्लगइन्स आपके एप्लिकेशन के Abstract Syntax Tree (AST) का विश्लेषण करके Intlayer फ़ंक्शंस के कॉल्स को अनुकूलित कोड से बदलते हैं। यह प्रक्रिया उत्पादन में आपके अंतिम बंडल को हल्का बनाती है क्योंकि यह सुनिश्चित करती है कि केवल वे डिक्शनरीज़ आयात हों जो वास्तव में उपयोग की जा रही हैं, चंकिंग को अनुकूलित करती है और बंडल का आकार कम करती है।

डेवलपमेंट मोड में, Intlayer डिक्शनरीज़ के लिए केंद्रीकृत स्थिर आयात का उपयोग करता है ताकि विकास अनुभव को सरल बनाया जा सके।

[कॉन्फ़िगरेशन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) में `importMode = "dynamic"` विकल्प को सक्रिय करके, Intlayer डिक्शनरीज़ को लोड करने के लिए डायनेमिक आयात का उपयोग करेगा। यह विकल्प डिफ़ॉल्ट रूप से अक्षम है ताकि एप्लिकेशन को रेंडर करते समय असिंक्रोनस प्रोसेसिंग से बचा जा सके।

> `@intlayer/babel` डिफ़ॉल्ट रूप से `vite-intlayer` पैकेज पर उपलब्ध है,

> `@intlayer/swc` डिफ़ॉल्ट रूप से `next-intlayer` पैकेज पर स्थापित नहीं है क्योंकि SWC प्लगइन्स अभी भी Next.js पर प्रयोगात्मक हैं।

अपने एप्लिकेशन के निर्माण को कॉन्फ़िगर करने का तरीका देखने के लिए, आप [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) पढ़ सकते हैं।

## पैकेज

Intlayer कई पैकेजों से बना है, जिनमें से प्रत्येक का अनुवाद प्रक्रिया में एक विशिष्ट भूमिका है। यहां इस पैकेज की संरचना का एक ग्राफिकल प्रतिनिधित्व है:

![intlayer के पैकेज](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)

### intlayer

`intlayer` पैकेज का उपयोग एप्लिकेशन में सामग्री फ़ाइलों में सामग्री घोषित करने के लिए किया जाता है।

### react-intlayer

`react-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें React एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### next-intlayer

`next-intlayer` पैकेज का उपयोग `react-intlayer` के ऊपर एक लेयर के रूप में किया जाता है ताकि Intlayer डिक्शनरीज़ को Next.js एप्लिकेशन में उपयोगी बनाया जा सके। इसमें Next.js वातावरण में Intlayer को काम करने के लिए आवश्यक सुविधाएँ शामिल हैं, जैसे अनुवाद मिडलवेयर, रूटिंग, या `next.config.js` फ़ाइल कॉन्फ़िगरेशन।

### vue-intlayer

`vue-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Vue एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### nuxt-intlayer

`nuxt-intlayer` पैकेज Nuxt मॉड्यूल के रूप में है ताकि Intlayer डिक्शनरीज़ को Nuxt एप्लिकेशन में उपयोगी बनाया जा सके। यह Intlayer को Nuxt वातावरण में काम करने के लिए आवश्यक सुविधाओं को एकीकृत करता है, जैसे अनुवाद मिडलवेयर, रूटिंग, या `nuxt.config.js` फ़ाइल कॉन्फ़िगरेशन।

### svelte-intlayer (कार्य प्रगति पर)

`svelte-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Svelte एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### solid-intlayer (कार्य प्रगति पर)

`solid-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Solid.js एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### preact-intlayer

`preact-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Preact एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### angular-intlayer (कार्य प्रगति पर)

`angular-intlayer` पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Angular एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

### express-intlayer

`express-intlayer` पैकेज का उपयोग Express.js बैकएंड पर Intlayer का उपयोग करने के लिए किया जाता है।

### react-native-intlayer

`react-native-intlayer` पैकेज Intlayer को Metro बंडलर के साथ काम करने के लिए प्लगइन्स को एकीकृत करने वाले उपकरण प्रदान करता है।

### lynx-intlayer

`lynx-intlayer` पैकेज Intlayer को Lynx बंडलर के साथ काम करने के लिए प्लगइन्स को एकीकृत करने वाले उपकरण प्रदान करता है।

### vite-intlayer

Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करने के लिए Vite प्लगइन के साथ-साथ उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधन, और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर शामिल करता है।

### react-scripts-intlayer

`react-scripts-intlayer` कमांड और प्लगइन्स शामिल करता है जो Create React App आधारित एप्लिकेशन के साथ Intlayer को एकीकृत करने के लिए हैं। ये प्लगइन्स [craco](https://craco.js.org/) पर आधारित हैं और [Webpack](https://webpack.js.org/) बंडलर के लिए अतिरिक्त कॉन्फ़िगरेशन शामिल करते हैं।

### intlayer-editor

`intlayer-editor` पैकेज का उपयोग विज़ुअल एडिटर का उपयोग करने की अनुमति देने के लिए किया जाता है। यह पैकेज, वैकल्पिक, एप्लिकेशनों में इंस्टॉल किया जा सकता है और इसे `react-intlayer` पैकेज द्वारा उपयोग किया जाएगा।  
यह दो भागों में विभाजित है: सर्वर और क्लाइंट।

क्लाइंट में UI तत्व शामिल हैं जो `react-intlayer` द्वारा उपयोग किए जाएंगे।

सर्वर, जो Express पर आधारित है, विज़ुअल एडिटर अनुरोधों को प्राप्त करने और सामग्री फ़ाइलों को प्रबंधित या संशोधित करने के लिए उपयोग किया जाता है।

### intlayer-cli

`intlayer-cli` पैकेज का उपयोग `npx intlayer dictionaries build` कमांड का उपयोग करके शब्दकोश उत्पन्न करने के लिए किया जा सकता है। यदि `intlayer` पहले से इंस्टॉल है, तो CLI स्वचालित रूप से इंस्टॉल हो जाता है और यह पैकेज आवश्यक नहीं है।

### @intlayer/core

`@intlayer/core` पैकेज मुख्य Intlayer पैकेज है। इसमें अनुवाद और शब्दकोश प्रबंधन कार्य शामिल हैं। `@intlayer/core` मल्टीप्लेटफॉर्म है और अन्य पैकेजों द्वारा शब्दकोशों की व्याख्या करने के लिए उपयोग किया जाता है।

### @intlayer/config

`@intlayer/config` पैकेज का उपयोग Intlayer सेटिंग्स को कॉन्फ़िगर करने के लिए किया जाता है, जैसे उपलब्ध भाषाएं, Next.js मिडलवेयर पैरामीटर, या एकीकृत संपादक सेटिंग्स।

### @intlayer/webpack

`@intlayer/webpack` पैकेज का उपयोग Webpack आधारित एप्लिकेशन को Intlayer के साथ काम करने के लिए Webpack कॉन्फ़िगरेशन प्रदान करने के लिए किया जाता है। यह पैकेज एक मौजूदा Webpack एप्लिकेशन में जोड़ने के लिए एक प्लगइन भी प्रदान करता है।

### @intlayer/cli

`@intlayer/cli` पैकेज एक NPM पैकेज है जिसका उपयोग Intlayer कमांड लाइन इंटरफेस से संबंधित स्क्रिप्ट्स को घोषित करने के लिए किया जाता है। यह सभी Intlayer CLI कमांड्स की एकरूपता सुनिश्चित करता है। यह पैकेज विशेष रूप से [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/hi/packages/intlayer-cli/index.md) और [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/hi/packages/intlayer/index.md) पैकेजों द्वारा उपयोग किया जाता है।

### @intlayer/mcp

`@intlayer/mcp` पैकेज एक MCP (मॉडल संदर्भ प्रोटोकॉल) सर्वर प्रदान करता है जो Intlayer इकोसिस्टम के लिए अनुकूलित AI-संचालित IDE सहायता प्रदान करता है। यह स्वचालित रूप से दस्तावेज़ीकरण लोड करता है और Intlayer CLI के साथ एकीकृत होता है।

### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

`@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` और `@intlayer/dynamic-dictionaries-entry` पैकेज Intlayer शब्दकोशों का एंट्री पथ लौटाते हैं। चूंकि ब्राउज़र से फ़ाइल सिस्टम की खोज असंभव है, इसलिए Webpack या Rollup जैसे बंडलर्स का उपयोग करके शब्दकोशों का एंट्री पथ प्राप्त करना संभव नहीं है। ये पैकेज alias किए जाने के लिए डिज़ाइन किए गए हैं, जिससे Vite, Webpack, और Turbopack जैसे विभिन्न बंडलर्स में बंडलिंग अनुकूलन की अनुमति मिलती है।

### @intlayer/chokidar

`@intlayer/chokidar` पैकेज सामग्री फ़ाइलों की निगरानी के लिए उपयोग किया जाता है और प्रत्येक संशोधन पर संशोधित शब्दकोश को पुनः उत्पन्न करता है।

### @intlayer/editor

`@intlayer/editor` पैकेज शब्दकोश संपादक से संबंधित उपयोगिताएँ प्रदान करता है। इसमें विशेष रूप से Intlayer संपादक के साथ एक एप्लिकेशन को इंटरफेस करने के लिए API और शब्दकोशों को संचालित करने के लिए उपयोगिताएँ शामिल हैं। यह पैकेज क्रॉस-प्लेटफ़ॉर्म है।

### @intlayer/editor-react

`@intlayer/editor-react` पैकेज React एप्लिकेशन को Intlayer संपादक के साथ इंटरफेस करने के लिए स्टेट्स, कॉन्टेक्स्ट, हुक्स और कॉम्पोनेंट्स प्रदान करता है।

### @intlayer/babel

`@intlayer/babel` पैकेज Vite और Webpack आधारित एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

### @intlayer/swc

`@intlayer/swc` पैकेज Next.js एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

### @intlayer/api

`@intlayer/api` पैकेज बैकएंड के साथ इंटरैक्ट करने के लिए एक API SDK है।

### @intlayer/design-system

`@intlayer/design-system` पैकेज CMS और विज़ुअल एडिटर के बीच डिज़ाइन तत्वों को साझा करने के लिए उपयोग किया जाता है।

### @intlayer/backend

`@intlayer/backend` पैकेज बैकएंड प्रकारों को निर्यात करता है और भविष्य में बैकएंड को एक स्टैंडअलोन पैकेज के रूप में पेश करेगा।

## हमारी स्मार्ट डाक्यूमेंटेशन के साथ चैट करें

- [हमारी स्मार्ट डाक्यूमेंटेशन से अपने सवाल पूछें](https://intlayer.org/doc/chat)
