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

Intlayer क्या है?

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

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

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

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|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml} 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 - Intlayer compat adapters
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)।

यदि आप अपनी वर्तमान i18n लाइब्रेरी का API उपयोग करना जारी रखना चाहते हैं, तो intlayer compat adapters भी प्रदान करता है: ऐसे पैकेज जो react-i18next, next-intl, react-intl, vue-i18n और अन्य के बिल्कुल समान API उपलब्ध कराते हैं, लेकिन सामग्री Intlayer डिक्शनरी से आती है। इससे आप अपना कोड दोबारा लिखे बिना क्रमिक रूप से माइग्रेट कर सकते हैं। देखें Compat Adapters दस्तावेज़ीकरण।

अक्सर पूछे जाने वाले प्रश्न