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

Intlayer क्या है?

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

विकल्पों पर इन्टलेयर क्यों?

नेक्स्ट-इंटल या आई18नेक्स्ट जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

बंडल का आकार

अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

रखरखाव

आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।

एआई एजेंट

सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और एजेंट कौशल, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

विशेषता

इंटलेयर अतिरिक्त सुविधाओं की एक श्रृंखला प्रदान करता है जो अन्य i18n समाधानों में नहीं है, जैसे [मार्कडाउन समर्थन] (/hi/doc/concept/content/markdown), बाहरी ला रहा है सामग्री, फ़ाइल सामग्री लोड हो रही है, लाइव सामग्री अपडेट, विज़ुअल एडिटर और बहुत कुछ।

स्वचालन

अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

प्रदर्शन

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

किसी भी देव के साथ स्केलिंग

सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

क्रॉस फ्रेमवर्क डिज़ाइन

यदि आप अपने एप्लिकेशन के विभिन्न हिस्सों के लिए अलग-अलग फ्रेमवर्क का उपयोग करते हैं (उदाहरण के लिए, रिएक्ट, रिएक्ट-नेटिव, वीयू, एंगुलर, स्वेल्ट इत्यादि), तो इंटलेयर सभी मुख्य फ्रंटएंड फ्रेमवर्क में एक सामान्य सिनाटैक्स और कार्यान्वयन का उपयोग करने का एक तरीका प्रदान करता है। आप अपनी सामग्री घोषणा को अपने डिज़ाइन-सिस्टम, ऐप्स, बैकएंड आदि पर भी साझा करने में सक्षम होंगे।

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

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

ये सभी समाधान आपकी content को list और manage करने के लिए एक centralized approach अपनाते हैं। उदाहरण के लिए:

.├── locales│   ├── en.json│   ├── es.json│   └── fr.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

इस प्रकार की architecture development process को धीमा करती है और कई कारणों से codebase को maintain करना अधिक जटिल बनाती है:

1. किसी भी नए component के लिए, आपको:

   • locales फ़ोल्डर में नया resource/namespace बनाना चाहिए
   • अपने page में नए namespace को import करना याद रखना चाहिए
   • अपनी content का अनुवाद करना चाहिए (अक्सर AI providers से manually copy/paste द्वारा किया जाता है)

2. आपके components में किए गए किसी भी change के लिए, आपको:

   • संबंधित resource/namespace को search करना चाहिए (component से दूर)
   • अपनी content का अनुवाद करना चाहिए
   • सुनिश्चित करना चाहिए कि आपकी content किसी भी locale के लिए updated है
   • verify करना चाहिए कि आपका namespace unusedkeys/values को include नहीं करता है
   • सुनिश्चित करना चाहिए कि आपकी JSON files की structure सभी locales के लिए समान है

इन समाधानों का उपयोग करने वाली professional projects पर, localization platforms का उपयोग अक्सर आपकी content के अनुवाद को manage करने में मदद के लिए किया जाता है। हालांकि, यह बड़ी projects के लिए तेजी से costly हो सकता है।

इस समस्या को हल करने के लिए, Intlayer एक approach अपनाता है जो आपकी content को per-component scope करता है और अपनी content को आपके component के करीब रखता है, जैसे हम अक्सर CSS (styled-components), types, documentation (storybook), या unit tests (jest) के साथ करते हैं।

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

import { t, type Dictionary } from "intlayer";

// component की content define करें
const componentExampleContent = {
  key: "component-example",
  content: {
    myTranslatedContent: t({
      hi: "नमस्ते दुनिया",
      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>;
};

यह approach आपको निम्नलिखित की अनुमति देता है:

1. Development की speed को बढ़ाएं

   • .content.{{ts|mjs|cjs|json}} files को VSCode extension का उपयोग करके बनाया जा सकता है
   • आपके IDE में Autocompletion AI tools (जैसे GitHub Copilot) आपकी content को declare करने में मदद कर सकते हैं, copy/paste को कम कर सकते हैं

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

   • Complexity को कम करें
   • Maintainability को बढ़ाएं

3. अपने components और उनकी संबंधित content को आसानी से duplicate करें (उदाहरण: login/register components, आदि)

   • अन्य components की content को प्रभावित करने के जोखिम को सीमित करके
   • एक application से दूसरे में अपनी content को external dependencies के बिना copy/paste करके

4. अपने codebase को unused keys/values से अप्रयुक्त components के साथ प्रदूषित करने से बचें

   • यदि आप किसी component का उपयोग नहीं करते हैं, तो Intlayer इसकी संबंधित content को import नहीं करेगा
   • यदि आप किसी component को delete करते हैं, तो आप आसानी से याद रखेंगे कि इसकी संबंधित content को हटा दें क्योंकि यह एक ही folder में present होगी

5. AI agents के लिए reasoning cost को कम करें अपनी multilingual content को declare करने के लिए

   • AI agent को यह जानने के लिए अपने पूरे codebase को scan नहीं करना पड़ेगा कि आपकी content को कहाँ implement करना है
   • अनुवाद आसानी से आपके IDE में autocompletion AI tools (जैसे GitHub Copilot) द्वारा किए जा सकते हैं

6. Loading performance को optimize करें

   • यदि कोई component lazy-loaded है, तो इसकी संबंधित content एक ही समय में load होगी

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

सभी तालिका सामग्री दिखाएं

सभी तालिका सामग्री दिखाएं

सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें

विशेषता	विवरण
	Cross-Frameworks Support Intlayer सभी प्रमुख frameworks और libraries के साथ संगत है, जिसमें Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, और बहुत कुछ शामिल है।
	JavaScript-Powered Content Management अपनी content को कुशलतापूर्वक define और manage करने के लिए JavaScript की flexibility का लाभ उठाएं। - Content declaration
	Compiler Intlayer Compiler स्वचालित रूप से components से content निकालता है और dictionary files generate करता है। - Compiler
	Per-Locale Content Declaration File Auto generation से पहले एक बार अपनी content declare करके अपने development को तेज़ करें। - Per-Locale Content Declaration File
	Type-Safe Environment अपनी content definitions और code को error-free रखने के लिए TypeScript का लाभ उठाएं, साथ ही IDE autocompletion का भी लाभ लें। - TypeScript configuration
	Simplified Setup न्यूनतम configuration के साथ तेजी से शुरुआत करें। Internationalization, routing, AI, build, और content handling के लिए settings को आसानी से adjust करें। - Explore Next.js integration
	Simplified Content Retrieval प्रत्येक content के लिए अपने t function को call करने की आवश्यकता नहीं। एक single hook का उपयोग करके सीधे अपनी सभी content retrieve करें। - React integration
	Consistent Server Component Implementation Next.js server components के लिए perfectly suited, client और server दोनों components के लिए एक ही implementation का उपयोग करें, अपने t function को प्रत्येक server component में pass करने की आवश्यकता नहीं। - Server Components
	Organized Codebase अपने codebase को अधिक organized रखें: 1 component = 1 dictionary एक ही folder में। उनके respective components के करीब translations maintainability और clarity को बढ़ाते हैं। - How Intlayer works
	Enhanced Routing App routing का पूर्ण support, complex application structures को seamlessly adapt करता है, Next.js, React, Vite, Vue.js, आदि के लिए। - Explore Next.js integration
	Markdown Support Locale files और remote Markdown को import और interpret करें multilingual content जैसे privacy policies, documentation, आदि के लिए। Markdown metadata को interpret करें और अपने code में accessible बनाएं। - Content files
	Free Visual Editor & CMS एक free visual editor और CMS content writers के लिए उपलब्ध हैं, localization platform की आवश्यकता को हटाते हुए। अपनी content को Git का उपयोग करके synchronized रखें, या इसे totally या partially externalize करें CMS के साथ। - Intlayer Editor - Intlayer CMS
	Tree-shakable Content Tree-shakable content, final bundle के size को reduce करता है। प्रत्येक component के लिए content load करता है, अपने bundle से किसी भी unused content को exclude करता है। Lazy loading को support करता है app loading efficiency को enhance करने के लिए। - App build optimization
	Static Rendering Static Rendering को block नहीं करता। - Next.js integration
	AI-Powered Translation Intlayer के advanced AI-powered translation tools का उपयोग करके अपनी website को 231 languages में transform करें, अपने own AI provider/API key का उपयोग करके। - CI/CD integration - Intlayer CLI - Auto fill
	MCP Server Integration एक MCP (Model Context Protocol) server provide करता है IDE automation के लिए, अपने development environment में directly seamless content management और i18n workflows को enable करता है। - MCP Server
	VSCode Extension Intlayer एक VSCode extension provide करता है आपकी content और translations को manage करने में मदद करने के लिए, अपने dictionaries को build करना, अपनी content को translate करना, और बहुत कुछ। - VSCode Extension
	Interoperability react-i18next, next-i18next, next-intl, और react-intl के साथ interoperability allow करता है। - Intlayer and react-intl - Intlayer and next-intl - Intlayer and next-i18next
Testing Missing Translations (CLI/CI)	✅ CLI: npx intlayer content test (CI-friendly audit)

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

GitHub सितारे

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

पारस्परिक संचालन (Interoperability)

intlayer आपके react-intl, react-i18next, next-intl, next-i18next, और vue-i18n नेमस्पेस को प्रबंधित करने में भी मदद कर सकता है।

intlayer का उपयोग करके, आप अपनी पसंदीदा i18n लाइब्रेरी के प्रारूप में अपनी सामग्री घोषित कर सकते हैं, और intlayer आपकी पसंद के स्थान पर आपके नेमस्पेस उत्पन्न करेगा (उदाहरण: `/messages/{{locale}}/{{namespace}}.json)।