अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
react-Intl बनाम react-i18next बनाम intlayer
यह गाइड React के लिए तीन स्थापित i18n विकल्पों की तुलना करता है: react-intl (FormatJS), react-i18next (i18next), और Intlayer। हम साधारण React एप्लिकेशन (जैसे, Vite, CRA, SPA) पर ध्यान केंद्रित करते हैं। यदि आप Next.js का उपयोग कर रहे हैं, तो हमारी समर्पित Next.js तुलना देखें।
हम मूल्यांकन करते हैं:
- वास्तुकला और सामग्री संगठन
- TypeScript और सुरक्षा
- लापता अनुवाद प्रबंधन
- समृद्ध सामग्री और स्वरूपण क्षमताएं
- प्रदर्शन और लोडिंग व्यवहार
- डेवलपर अनुभव (DX), टूलिंग और रखरखाव
- SEO/रूटिंग (फ्रेमवर्क-निर्भर)
संक्षेप में: ये तीनों React ऐप को स्थानीयकृत कर सकते हैं। यदि आप चाहते हैं कंपोनेंट-स्कोप्ड सामग्री, सख्त TypeScript प्रकार, बिल्ड-टाइम लापता-कुंजी जांच, ट्री-शेक्ड शब्दकोश, और अंतर्निर्मित संपादकीय टूलिंग (विज़ुअल एडिटर/CMS + वैकल्पिक AI अनुवाद), तो Intlayer मॉड्यूलर React कोडबेस के लिए सबसे पूर्ण विकल्प है।
उच्च-स्तरीय स्थिति
- react-intl - ICU-प्रथम, मानकों के अनुरूप स्वरूपण (तिथियाँ/संख्याएँ/बहुवचन) के साथ एक परिपक्व API। कैटलॉग आमतौर पर केंद्रीकृत होते हैं; कुंजी सुरक्षा और बिल्ड-टाइम सत्यापन मुख्य रूप से आपके जिम्मे होते हैं।
- react-i18next - अत्यंत लोकप्रिय और लचीला; नामस्थान, डिटेक्टर, और कई प्लगइन्स (ICU, बैकएंड)। शक्तिशाली, लेकिन परियोजनाओं के बढ़ने पर कॉन्फ़िगरेशन फैल सकता है।
- Intlayer - React के लिए कंपोनेंट-केंद्रित सामग्री मॉडल, सख्त TS टाइपिंग, बिल्ड-टाइम जांच, ट्री-शेकिंग, साथ ही विज़ुअल एडिटर/CMS और AI-सहायता प्राप्त अनुवाद। React Router, Vite, CRA आदि के साथ काम करता है।
ये लाइब्रेरी कहाँ से आईं, यह समझने के लिए JavaScript i18n का इतिहास पढ़ें।
फीचर मैट्रिक्स (React फोकस)
सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें
| फीचर | react-intlayer (Intlayer) | react-i18next (i18next) | react-intl (FormatJS) |
|---|---|---|---|
| कंपोनेंट के पास अनुवाद | ✅ हाँ, प्रत्येक कंपोनेंट के साथ सामग्री सह-स्थित | ❌ नहीं | ❌ नहीं |
| टाइपस्क्रिप्ट एकीकरण | ✅ उन्नत, स्वचालित रूप से उत्पन्न सख्त प्रकार | ⚠️ बुनियादी; सुरक्षा के लिए अतिरिक्त कॉन्फ़िगरेशन | ✅ अच्छा, लेकिन कम सख्त |
| अनुवाद की कमी का पता लगाना | ✅ टाइपस्क्रिप्ट त्रुटि हाइलाइट और बिल्ड-टाइम त्रुटि/चेतावनी | ⚠️ अधिकांशतः रनटाइम पर फॉलबैक स्ट्रिंग्स | ⚠️ फॉलबैक स्ट्रिंग्स |
| समृद्ध सामग्री (JSX/मार्कडाउन/कंपोनेंट्स) | ✅ प्रत्यक्ष समर्थन | ⚠️ सीमित / केवल इंटरपोलेशन | ⚠️ ICU सिंटैक्स, असली JSX नहीं |
| एआई-संचालित अनुवाद | ✅ हाँ, कई एआई प्रदाताओं का समर्थन करता है। अपने स्वयं के API कुंजी का उपयोग करके उपयोग किया जा सकता है। आपके एप्लिकेशन और सामग्री के संदर्भ को ध्यान में रखता है | ❌ नहीं | ❌ नहीं |
| विज़ुअल एडिटर | ✅ हाँ, स्थानीय विज़ुअल एडिटर + वैकल्पिक CMS; कोडबेस सामग्री को बाहरी रूप से प्रबंधित कर सकता है; एम्बेड करने योग्य | ❌ नहीं / बाहरी स्थानीयकरण प्लेटफार्मों के माध्यम से उपलब्ध | ❌ नहीं / बाहरी स्थानीयकरण प्लेटफार्मों के माध्यम से उपलब्ध |
| स्थानीयकृत रूटिंग | ✅ हाँ, बॉक्स से बाहर स्थानीयकृत पथों का समर्थन करता है (Next.js और Vite के साथ काम करता है) | ⚠️ अंतर्निहित नहीं, प्लगइन्स (जैसे next-i18next) या कस्टम राउटर कॉन्फ़िगरेशन की आवश्यकता होती है | ❌ नहीं, केवल संदेश स्वरूपण, रूटिंग मैन्युअल होनी चाहिए |
| डायनामिक रूट जनरेशन | ✅ हाँ | ⚠️ प्लगइन/इकोसिस्टम या मैन्युअल सेटअप | ❌ प्रदान नहीं किया गया |
| बहुवचन रूप | ✅ एनेमरेशन-आधारित पैटर्न | ✅ कॉन्फ़िगर करने योग्य (i18next-icu जैसे प्लगइन्स) | ✅ (ICU) |
| स्वरूपण (तिथियाँ, संख्याएँ, मुद्राएँ) | ✅ अनुकूलित स्वरूपक (अंदर से Intl) | ⚠️ प्लगइन्स या कस्टम Intl उपयोग के माध्यम से | ✅ ICU स्वरूपक |
| सामग्री प्रारूप | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml प्रगति पर) | ⚠️ .json | ✅ .json, .js |
| ICU समर्थन | ⚠️ प्रगति पर | ⚠️ प्लगइन के माध्यम से (i18next-icu) | ✅ हाँ |
| एसईओ सहायक (hreflang, साइटमैप) | ✅ अंतर्निर्मित उपकरण: साइटमैप, robots.txt, मेटाडेटा के लिए सहायक | ⚠️ समुदाय प्लगइन्स/मैनुअल | ❌ कोर नहीं |
| इकोसिस्टम / समुदाय | ⚠️ छोटा लेकिन तेजी से बढ़ रहा और प्रतिक्रियाशील | ✅ सबसे बड़ा और परिपक्व | ✅ बड़ा |
| सर्वर-साइड रेंडरिंग और सर्वर कंपोनेंट्स | ✅ हाँ, SSR / React सर्वर कंपोनेंट्स के लिए सुव्यवस्थित | ⚠️ पेज स्तर पर समर्थित लेकिन बच्चों के सर्वर कंपोनेंट्स के लिए कंपोनेंट ट्री पर t-फंक्शंस पास करने की आवश्यकता | ❌ समर्थित नहीं, बच्चों के सर्वर कंपोनेंट्स के लिए कंपोनेंट ट्री पर t-फंक्शंस पास करने की आवश्यकता |
| ट्री-शेकिंग (केवल उपयोग की गई सामग्री लोड करें) | ✅ हाँ, बिल्ड समय पर प्रति-कंपोनेंट Babel/SWC प्लगइन्स के माध्यम से | ⚠️ आमतौर पर सभी लोड करता है (नेमस्पेस/कोड-स्प्लिटिंग के साथ सुधार किया जा सकता है) | ⚠️ आमतौर पर सभी लोड करता है |
| लेट लोडिंग | ✅ हाँ, प्रति-लोकल / प्रति-शब्दकोश | ✅ हाँ (जैसे, मांग पर बैकएंड/नेमस्पेस) | ✅ हाँ (लोकल बंडलों को विभाजित करें) |
| अप्रयुक्त सामग्री को हटाना | ✅ हाँ, बिल्ड समय पर प्रति-शब्दकोश | ❌ नहीं, केवल मैनुअल नेमस्पेस विभाजन के माध्यम से | ❌ नहीं, सभी घोषित संदेश बंडल किए जाते हैं |
| बड़े प्रोजेक्ट्स का प्रबंधन | ✅ मॉड्यूलर को प्रोत्साहित करता है, डिज़ाइन-सिस्टम के लिए उपयुक्त | ⚠️ अच्छी फ़ाइल अनुशासन की आवश्यकता होती है | ⚠️ केंद्रीय कैटलॉग बड़े हो सकते हैं |
गहन तुलना
1) आर्किटेक्चर और स्केलेबिलिटी
- react-intl / react-i18next: अधिकांश सेटअप प्रति भाषा केंद्रीकृत लोकल फ़ोल्डर बनाए रखते हैं, कभी-कभी इन्हें नेमस्पेस (i18next) द्वारा विभाजित किया जाता है। शुरू में यह अच्छी तरह काम करता है लेकिन जैसे-जैसे ऐप बढ़ते हैं, यह एक साझा सतह बन जाता है।
- Intlayer: प्रत्येक घटक (या प्रत्येक फीचर) के लिए शब्दकोशों को बढ़ावा देता है जो उस UI के साथ सह-स्थित होते हैं जिसे वे सेवा देते हैं। इससे स्वामित्व स्पष्ट रहता है, घटकों की नकल/स्थानांतरण आसान होता है, और टीमों के बीच कुंजी परिवर्तन कम होता है। अप्रयुक्त सामग्री की पहचान करना और उसे हटाना आसान होता है।
महत्व क्यों है: मॉड्यूलर सामग्री मॉड्यूलर UI का प्रतिबिंब होती है। बड़े React कोडबेस तब साफ-सुथरे रहते हैं जब अनुवाद उन घटकों के साथ रहते हैं जिनसे वे संबंधित हैं।
2) टाइपस्क्रिप्ट और सुरक्षा
- react-intl: मजबूत टाइपिंग्स, लेकिन स्वचालित कुंजी टाइपिंग नहीं; सुरक्षा पैटर्न आप स्वयं लागू करते हैं।
- react-i18next: हुक्स के लिए मजबूत टाइपिंग्स; कठोर कुंजी टाइपिंग आमतौर पर अतिरिक्त कॉन्फ़िगरेशन या जनरेटर की आवश्यकता होती है।
- Intlayer: आपकी सामग्री से कठोर प्रकारों को स्वचालित रूप से उत्पन्न करता है। IDE ऑटोकंप्लीट और कंपाइल-टाइम त्रुटियाँ रनटाइम से पहले टाइपो और गायब कुंजी पकड़ती हैं।
महत्व क्यों है: विफलताओं को बाएं (बिल्ड/CI) स्थानांतरित करने से उत्पादन समस्याएँ कम होती हैं और डेवलपर प्रतिक्रिया चक्र तेज़ होता है।
3) अनुवाद की कमी को संभालना
- react-intl / react-i18next: डिफ़ॉल्ट रूप से रनटाइम फॉलबैक (कुंजी की नकल या डिफ़ॉल्ट लोकल) का उपयोग करते हैं। आप लिंटिंग/प्लगइन्स जोड़ सकते हैं, लेकिन यह बिल्ड पर गारंटीकृत नहीं है।
- Intlayer: आवश्यक लोकल/कुंजी गायब होने पर बिल्ड-टाइम पहचान के साथ चेतावनी या त्रुटियाँ देता है।
महत्व क्यों है: CI में गायब स्ट्रिंग्स पर विफलता गैर-अंग्रेज़ी UI में "रहस्यमय अंग्रेज़ी" के रिसाव को रोकती है।
4) समृद्ध सामग्री और स्वरूपण
- react-intl: बहुवचन, चयन, तिथियाँ/संख्याएँ, और संदेश संरचना के लिए उत्कृष्ट ICU समर्थन। JSX का उपयोग किया जा सकता है, लेकिन मानसिक मॉडल संदेश-केंद्रित रहता है।
- react-i18next: लचीला इंटरपोलेशन और तत्वों/कंपोनेंट्स को एम्बेड करने के लिए
<Trans>; ICU प्लगइन के माध्यम से उपलब्ध। - Intlayer: सामग्री फ़ाइलों में समृद्ध नोड्स (JSX/Markdown/कंपोनेंट्स) और मेटाडेटा शामिल हो सकते हैं। फॉर्मेटिंग अंतर्निहित रूप से Intl का उपयोग करती है; बहुवचन पैटर्न उपयोगकर्ता के अनुकूल हैं।
महत्व क्यों है: जटिल UI टेक्स्ट (लिंक, बोल्ड हिस्से, इनलाइन कंपोनेंट्स) तब आसान होते हैं जब लाइब्रेरी React नोड्स को साफ़-सुथरे तरीके से अपनाती है।
5) प्रदर्शन और लोडिंग व्यवहार
- react-intl / react-i18next: आप आमतौर पर कैटलॉग विभाजन और लेट लोडिंग को मैन्युअल रूप से प्रबंधित करते हैं (नेमस्पेस/डायनामिक इम्पोर्ट्स)। प्रभावी लेकिन अनुशासन की आवश्यकता होती है।
- Intlayer: उपयोग न किए गए शब्दकोशों को ट्री-शेक करता है और प्रति-शब्दकोश/प्रति-लोकल लेज़ी लोडिंग को आउट-ऑफ-द-बॉक्स सपोर्ट करता है।
यह क्यों महत्वपूर्ण है: छोटे बंडल और कम उपयोग न किए गए स्ट्रिंग्स स्टार्टअप और नेविगेशन प्रदर्शन को बेहतर बनाते हैं।
नीचे दिया गया ग्राफ़ एक सैद्धांतिक ऐप के कंटेंट पेलोड का अनुमान देता है, जिसमें 1 से 10 पेज हैं और जिसे 1 से 10 भाषाओं में अनुवादित किया गया है, प्रति पेज लगभग 30 KB टेक्स्ट के साथ। locale के अनुसार कंटेंट को डायनामिक रूप से लोड करने से भाषा वाली धुरी हट जाती है, कंटेंट को कंपोनेंट या रूट तक सीमित करने से पेज वाली धुरी हट जाती है, और केवल दोनों के संयोजन से ही पेलोड स्थिर रहता है।
React पर benchmark परिणाम (TanStack Start / Vite)
Benchmark Bloom के आंकड़े, जो TanStack Start पर standard React implementations को मापते हैं:
मीट्रिक
डायनामिक JSON लोडिंग
रनटाइम पर आलस्य से अनुवाद लोड करता है
स्कोप्ड JSON (नेमस्पेसिंग)
प्रति-पृष्ठ अनुवाद नेमस्पेस
यह मीट्रिक क्या है?
अंतर्राष्ट्रीयकरण लाइब्रेरी बंडल का कुल gzip-संपीड़ित आकार। इसमें केवल ट्री-शेकिंग और मिनिफिकेशन के बाद प्रदाता और सामग्री पुनर्प्राप्ति तर्क शामिल हैं।
यह महत्वपूर्ण क्यों है?
एक छोटा लाइब्रेरी आकार प्रारंभिक जावास्क्रिप्ट पेलोड को कम करता है, जिससे क्लाइंट पर तेज़ डाउनलोड और निष्पादन समय होता है।
देखने का तरीका
सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें
| Library | Strategy | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity | Hydration |
|---|---|---|---|---|---|---|---|---|
| base (no i18n) | - | 0.0 KB | 111.0 KB | 0.0% | 0.0% | 0.7 KB | 8.1 ms | 21.6 ms |
react-i18next | dynamic | 18.4 KB | 136.4 KB | 23.1% | 89.8% | 24.8 KB | 123.1 ms | 32.9 ms |
intlayer | dynamic | 5.0 KB | 118.6 KB | 0.0% | 0.0% | 6.3 KB | 3.6 ms | 14.1 ms |
पूरी तालिका TanStack Start benchmark रिपोर्ट और i18n Benchmark अवलोकन में देखें।
6) DX, टूलिंग और रखरखाव
- react-intl / react-i18next: व्यापक समुदाय पारिस्थितिकी तंत्र; संपादकीय वर्कफ़्लो के लिए आप आमतौर पर बाहरी स्थानीयकरण प्लेटफ़ॉर्म अपनाते हैं।
- Intlayer: एक मुफ्त विज़ुअल एडिटर और वैकल्पिक CMS (सामग्री को Git में रखें या बाहरी रूप से प्रबंधित करें) प्रदान करता है। साथ ही सामग्री लेखन के लिए VSCode एक्सटेंशन और आपकी अपनी प्रदाता कुंजियों का उपयोग करके AI-सहायता प्राप्त अनुवाद भी उपलब्ध कराता है।
महत्व क्यों है: अंतर्निर्मित उपकरण डेवलपर्स और सामग्री लेखकों के बीच चक्र को छोटा करता है - कम ग्लू कोड, कम विक्रेता निर्भरताएँ।
कब किसे चुनें?
- react-intl चुनें यदि आप एक सरल, मानकों के अनुरूप API के साथ ICU-प्रथम संदेश स्वरूपण चाहते हैं और आपकी टीम मैन्युअल रूप से कैटलॉग और सुरक्षा जांच बनाए रखने में सहज है।
- react-i18next चुनें यदि आपको i18next के व्यापक इकोसिस्टम (डिटेक्टर, बैकएंड, ICU प्लगइन, एकीकरण) की आवश्यकता है और आप अधिक कॉन्फ़िगरेशन स्वीकार करते हैं ताकि लचीलापन प्राप्त हो सके।
- Intlayer चुनें यदि आप कंपोनेंट-स्कोप्ड कंटेंट, सख्त TypeScript, बिल्ड-टाइम गारंटियां, ट्री-शेकिंग, और बिल्ट-इन संपादकीय टूलिंग को महत्व देते हैं - खासकर बड़े, मॉड्यूलर React ऐप्स के लिए।
react-intl और react-i18next के साथ इंटरऑपरेबिलिटी
intlayer आपके react-intl और react-i18next namespaces को प्रबंधित करने में भी मदद कर सकता है।
intlayer का उपयोग करके, आप अपनी पसंदीदा i18n लाइब्रेरी के फ़ॉर्मेट में अपना कंटेंट घोषित कर सकते हैं, और intlayer आपकी पसंद के स्थान पर आपके namespaces जनरेट करेगा (उदाहरण: /messages/{{locale}}/{{namespace}}.json)।
आगे पढ़ें और benchmarks
Benchmark रिपोर्ट:
GitHub STARs
GitHub stars एक प्रोजेक्ट की लोकप्रियता, कम्युनिटी के विश्वास और दीर्घकालीन प्रासंगिकता का एक मजबूत संकेतक हैं। हालांकि तकनीकी गुणवत्ता का सीधा माप नहीं, वे दर्शाते हैं कि कितने developers को प्रोजेक्ट उपयोगी लगता है, इसकी प्रगति का अनुसरण करते हैं, और इसे अपनाने की संभावना रखते हैं। किसी प्रोजेक्ट के मूल्य का अनुमान लगाने के लिए, stars विकल्पों के बीच traction की तुलना करने और ecosystem growth में insights प्रदान करने में मदद करते हैं।
कमिट गतिविधि
स्टार लोकप्रियता दिखाते हैं। कमिट दिखाते हैं कि किसी प्रोजेक्ट में कितना काम लगा है। लिखते समय Intlayer में लगभग 7,500 कमिट हैं, जो यहाँ तुलना की गई अधिकांश लाइब्रेरी से ज़्यादा हैं और next-intl या next-i18next से लगभग 5 गुना।
- formatjs/formatjs
- i18next/react-i18next
- aymericzip/intlayer
डिफ़ॉल्ट ब्रांच पर कमिट, स्रोत: GitHub API।
Intlayer एक मोनोरेपो है, इसलिए इस संख्या में हर फ़्रेमवर्क पैकेज, CLI और डॉक्स शामिल हैं। कमिट को गुणवत्ता नहीं, गतिविधि का संकेत मानें।
npm डाउनलोड
- react-i18next
- react-intl
- react-intlayer
स्रोत: npm रजिस्ट्री डाउनलोड API।
डाउनलोड सबसे पुराने समाधानों को पुरस्कृत करते हैं, सबसे अच्छे को नहीं। वर्षों पहले जारी हुई लाइब्रेरी आज भी हर उस प्रोजेक्ट में इंस्टॉल होती है जिसने उसे तब चुना था, हर CI रन में और हर उस पैकेज में जो उस पर निर्भर है। यह संख्या नए चुनाव से ज़्यादा जड़ता को मापती है।
AI असिस्टेंट इस प्रभाव को और बढ़ाते हैं। next-intl, i18next और vue-i18n उस कोड में हर जगह हैं जिस पर वे प्रशिक्षित हुए, इसलिए वे विकल्पों की तुलना किए बिना इन्हें डिफ़ॉल्ट रूप से सुझाते हैं। हर सुझाव डाउनलोड बढ़ाता है, जो अगले सुझाव को बढ़ावा देता है। डाउनलोड की संख्या नहीं, बेंचमार्क के आधार पर तुलना करें।
निष्कर्ष
तीनों पुस्तकालय React को प्रभावी ढंग से स्थानीयकृत करते हैं। अंतर यह है कि आपको एक सुरक्षित, स्केलेबल सेटअप तक पहुंचने के लिए कितना इन्फ्रास्ट्रक्चर बनाना होगा:
- Intlayer के साथ, मॉड्यूलर कंटेंट, सख्त TS टाइपिंग, बिल्ड-टाइम सुरक्षा, ट्री-शेकन बंडल, और संपादकीय टूलिंग डिफ़ॉल्ट होते हैं - न कि बोझ।
- यदि आपकी टीम बहु-स्थानीय, कंपोनेंट-चालित React ऐप्स में रखरखाव और गति को महत्व देती है, तो Intlayer आज सबसे पूर्ण डेवलपर और कंटेंट वर्कफ़्लो प्रदान करता है।
अधिक जानकारी के लिए 'Intlayer क्यों?' दस्तावेज़ देखें।
टिप्पणियाँ
अभी तक कोई टिप्पणी नहीं। अपने विचार साझा करने वाले पहले व्यक्ति बनें।