आपको Intlayer क्यों अपनाना चाहिए?

Intlayer क्या है?

Intlayer एक अंतरराष्ट्रीयकरण लाइब्रेरी है जो विशेष रूप से जावास्क्रिप्ट डेवलपर्स के लिए डिज़ाइन की गई है। यह आपके कोड में कहीं भी आपकी सामग्री की घोषणा करने की अनुमति देता है। यह बहुभाषी सामग्री की घोषणाओं को संरचित शब्दकोशों में परिवर्तित करता है ताकि इसे आपके कोड में आसानी से एकीकृत किया जा सके। TypeScript का उपयोग करते हुए, Intlayer आपके विकास को मजबूत और अधिक कुशल बनाता है।

Intlayer क्यों बनाया गया था?

Intlayer को एक सामान्य समस्या को हल करने के लिए बनाया गया था जो सभी सामान्य i18n लाइब्रेरीज़ जैसे next-intl, react-i18next, react-intl, next-i18next, react-intl, और vue-i18n को प्रभावित करती है।

ये सभी समाधान आपकी सामग्री को सूचीबद्ध और प्रबंधित करने के लिए एक केंद्रीकृत दृष्टिकोण अपनाते हैं। उदाहरण के लिए:

.├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

या यहाँ namespaces का उपयोग करते हुए:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

इस प्रकार की संरचना विकास प्रक्रिया को धीमा कर देती है और कई कारणों से कोडबेस को बनाए रखना अधिक जटिल बना देती है:

1. किसी भी नए घटक के लिए, आपको करना चाहिए:

   • locales फ़ोल्डर में नया संसाधन/namespace बनाएं
   • अपने पेज में नए namespace को आयात करना याद रखें
   • अपनी सामग्री का अनुवाद करें (अक्सर AI प्रदाताओं से कॉपी/पेस्ट करके मैन्युअल रूप से किया जाता है)

2. अपने घटकों में किए गए किसी भी परिवर्तन के लिए, आपको करना चाहिए:

   • संबंधित संसाधन/namespace खोजें (घटक से दूर)
   • अपनी सामग्री का अनुवाद करें
   • सुनिश्चित करें कि आपकी सामग्री किसी भी locale के लिए अद्यतित है
   • जांचें कि आपका namespace अप्रयुक्त कुंजी/मान शामिल नहीं करता है
   • सुनिश्चित करें कि आपके JSON फ़ाइलों की संरचना सभी locales के लिए समान है

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

इस समस्या को हल करने के लिए, Intlayer एक ऐसा दृष्टिकोण अपनाता है जो आपकी सामग्री को प्रति-घटक सीमित करता है और आपकी सामग्री को आपके घटक के करीब रखता है, जैसा कि हम अक्सर CSS (styled-components), प्रकार, दस्तावेज़ीकरण (storybook), या यूनिट परीक्षण (jest) के साथ करते हैं।

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

यह तरीका आपको अनुमति देता है:

1. डेवलपमेंट की गति बढ़ाएं

   • .content.{{ts|mjs|cjs|json}} फ़ाइलें VSCode एक्सटेंशन का उपयोग करके बनाई जा सकती हैं
   • आपके IDE में ऑटो-कम्प्लीशन AI टूल्स (जैसे GitHub Copilot) आपकी सामग्री घोषित करने में मदद कर सकते हैं, जिससे कॉपी/पेस्ट कम हो जाता है

2. अपने कोडबेस को साफ़ करें

   • जटिलता को कम करें
   • रखरखाव क्षमता बढ़ाएं

3. अपने कॉम्पोनेंट्स और उनके संबंधित कंटेंट को आसानी से डुप्लिकेट करें (उदाहरण: लॉगिन/रजिस्टर कॉम्पोनेंट्स, आदि)

   • अन्य कॉम्पोनेंट्स की सामग्री को प्रभावित करने के जोखिम को सीमित करके
   • अपनी सामग्री को एक एप्लिकेशन से दूसरे में बिना बाहरी निर्भरताओं के कॉपी/पेस्ट करके

4. अपने कोडबेस को अप्रयुक्त कॉम्पोनेंट्स के लिए अप्रयुक्त कुंजियों/मूल्यों से प्रदूषित होने से बचाएं

   • यदि आप कोई कॉम्पोनेंट नहीं उपयोग करते हैं, तो Intlayer संबंधित सामग्री को आयात नहीं करेगा
   • यदि आप कोई कॉम्पोनेंट हटाते हैं, तो संबंधित सामग्री को हटाना आपको अधिक आसानी से याद रहेगा क्योंकि यह उसी फ़ोल्डर में मौजूद होगी

5. अपने बहुभाषी कंटेंट को घोषित करने के लिए AI एजेंट्स की तर्क लागत कम करें

   • AI एजेंट को यह जानने के लिए आपके पूरे कोडबेस को स्कैन करने की आवश्यकता नहीं होगी कि आपकी सामग्री कहां लागू करनी है
   • अनुवाद आसानी से आपके IDE में ऑटो-कम्प्लीशन AI टूल्स (जैसे GitHub Copilot) द्वारा किए जा सकते हैं

Intlayer की अतिरिक्त विशेषताएँ

फीचर	विवरण
-------------------------------------------------------------------------------------------------------------------------	--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	क्रॉस-फ्रेमवर्क समर्थन<br><br>Intlayer सभी प्रमुख फ्रेमवर्क और लाइब्रेरी के साथ संगत है, जिनमें Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, और अन्य शामिल हैं।
	जावास्क्रिप्ट-संचालित सामग्री प्रबंधन<br><br>अपने कंटेंट को प्रभावी ढंग से परिभाषित और प्रबंधित करने के लिए जावास्क्रिप्ट की लचीलापन का उपयोग करें। <br><br> - सामग्री घोषणा
	प्रति-स्थान सामग्री घोषणा फ़ाइल<br><br>स्वचालित जनरेशन से पहले अपनी सामग्री को एक बार घोषित करके अपने विकास को तेज़ करें।<br><br> - प्रति-स्थान सामग्री घोषणा फ़ाइल
	टाइप-सेफ वातावरण<br><br>TypeScript का उपयोग करें ताकि आपकी सामग्री परिभाषाएँ और कोड त्रुटि-मुक्त हों, साथ ही IDE ऑटोकंप्लीशन का लाभ भी प्राप्त करें।<br><br> - TypeScript कॉन्फ़िगरेशन
	सरल सेटअप<br><br>न्यूनतम कॉन्फ़िगरेशन के साथ जल्दी से शुरू करें। अंतरराष्ट्रीयकरण, रूटिंग, AI, बिल्ड, और सामग्री प्रबंधन के लिए सेटिंग्स को आसानी से समायोजित करें। <br><br> - Next.js एकीकरण का अन्वेषण करें
	सरलीकृत सामग्री पुनःप्राप्ति<br><br>प्रत्येक सामग्री के लिए अपनी t फ़ंक्शन को कॉल करने की आवश्यकता नहीं है। एक ही हुक का उपयोग करके अपनी सभी सामग्री सीधे पुनःप्राप्त करें।<br><br> - React एकीकरण
	सुसंगत सर्वर कंपोनेंट कार्यान्वयन<br><br>Next.js सर्वर कंपोनेंट्स के लिए पूरी तरह उपयुक्त, क्लाइंट और सर्वर दोनों कंपोनेंट्स के लिए एक ही कार्यान्वयन का उपयोग करें, प्रत्येक सर्वर कंपोनेंट में अपनी t फ़ंक्शन पास करने की आवश्यकता नहीं है। <br><br> - सर्वर कंपोनेंट्स
	संगठित कोडबेस<br><br>अपने कोडबेस को अधिक संगठित रखें: 1 कंपोनेंट = उसी फ़ोल्डर में 1 शब्दकोश। संबंधित कंपोनेंट के पास अनुवाद रखकर रखरखाव और स्पष्टता बढ़ती है। <br><br> - Intlayer कैसे काम करता है
	सशक्त रूटिंग<br><br>ऐप रूटिंग का पूर्ण समर्थन, जटिल एप्लिकेशन संरचनाओं के लिए सहजता से अनुकूलित, Next.js, React, Vite, Vue.js आदि के लिए।<br><br> - Next.js एकीकरण का अन्वेषण करें
	मार्कडाउन समर्थन<br><br>बहुभाषी सामग्री जैसे गोपनीयता नीतियाँ, दस्तावेज़ आदि के लिए लोकल फाइलें और रिमोट मार्कडाउन आयात करें और व्याख्या करें। मार्कडाउन मेटाडेटा को व्याख्यायित करें और इसे अपने कोड में सुलभ बनाएं।<br><br> - सामग्री फाइलें
	मुफ्त विज़ुअल एडिटर और CMS<br><br>सामग्री लेखकों के लिए एक मुफ्त विज़ुअल एडिटर और CMS उपलब्ध है, जिससे लोकलाइज़ेशन प्लेटफ़ॉर्म की आवश्यकता समाप्त हो जाती है। Git का उपयोग करके अपनी सामग्री को सिंक्रनाइज़ रखें, या CMS के साथ इसे पूरी तरह या आंशिक रूप से बाहरी करें।<br><br> - Intlayer एडिटर <br> - Intlayer CMS
	ट्री-शेकेबल कंटेंट<br><br>ट्री-शेकेबल कंटेंट, जो अंतिम बंडल के आकार को कम करता है। प्रत्येक कंपोनेंट के लिए कंटेंट लोड करता है, आपके बंडल से किसी भी अप्रयुक्त कंटेंट को बाहर रखता है। ऐप लोडिंग दक्षता बढ़ाने के लिए लेज़ी लोडिंग का समर्थन करता है। <br><br> - ऐप बिल्ड ऑप्टिमाइज़ेशन
	स्थैतिक रेंडरिंग<br><br>स्थैतिक रेंडरिंग को अवरुद्ध नहीं करता। <br><br> - Next.js एकीकरण
	एआई-संचालित अनुवाद<br><br>अपने वेबसाइट को केवल एक क्लिक में 231 भाषाओं में बदलें, Intlayer के उन्नत एआई-संचालित अनुवाद उपकरणों का उपयोग करके, अपने स्वयं के एआई प्रदाता/API कुंजी के साथ। <br><br> - CI/CD एकीकरण <br> - Intlayer CLI <br> - स्वचालित भराई
	MCP सर्वर एकीकरण<br><br>IDE स्वचालन के लिए एक MCP (मॉडल संदर्भ प्रोटोकॉल) सर्वर प्रदान करता है, जो आपके विकास पर्यावरण के भीतर सीधे सहज सामग्री प्रबंधन और i18n वर्कफ़्लोज़ सक्षम करता है। <br><br> - MCP सर्वर
	VSCode एक्सटेंशन<br><br>Intlayer एक VSCode एक्सटेंशन प्रदान करता है जो आपकी सामग्री और अनुवादों का प्रबंधन करने में मदद करता है, आपकी शब्दकोश बनाने, आपकी सामग्री का अनुवाद करने, और भी बहुत कुछ। <br><br> - VSCode एक्सटेंशन
	इंटरऑपरेबिलिटी<br><br>react-i18next, next-i18next, next-intl, और react-intl के साथ इंटरऑपरेबिलिटी की अनुमति देता है। <br><br> - Intlayer और react-intl <br> - Intlayer और next-intl <br> - Intlayer और next-i18next

Intlayer की अन्य समाधानों के साथ तुलना

दस्तावेज़ इतिहास