@intlayer/docs 9.5.6 → 9.5.7

package/blog/hi/i18next_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next बनाम Intlayer: 2026 बेंचमार्क और विस्तृत तुलना"
 description: "Next.js और TanStack Start पर Intlayer के मुकाबले react-i18next और next-i18next का परीक्षण। बंडल साइज, कंटेंट लीकेज, भाषा बदलने की प्रतिक्रिया और डेवलपर अनुभव का विश्लेषण।"
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # i18next बनाम Intlayer | React और Next.js अंतर्राष्ट्रीयकरण (i18n) बेंचमार्क
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `i18next` जावास्क्रिप्ट इकोसिस्टम में सबसे व्यापक रूप से उपयोग किया जाने वाला i18n फ्रेमवर्क है। `react-i18next` और `next-i18next` के माध्यम से यह अनगिनत React और Next.js एप्लिकेशनों को संचालित करता है। Intlayer एक आधुनिक, कंपाइलर-आधारित और कंपोनेंट-स्कोप्ड विकल्प है।
 
 यह लेख केवल फीचर लिस्ट के बजाय वास्तविक मापों के आधार पर दोनों की तुलना करता है। सभी आंकड़े [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) से लिए गए हैं, जो एक ओपन-सोर्स बेंचमार्क सूट है जो प्रत्येक लाइब्रेरी के साथ समान एप्लिकेशन बनाता है और ब्राउज़र द्वारा वास्तव में डाउनलोड किए गए डेटा को रिकॉर्ड करता है।
@@ -99,6 +101,10 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 
 ### Next.js पर परिणाम (`next-i18next`)
 
+वे मेट्रिक्स और लाइब्रेरीज़ चुनें जो आपके लिए महत्वपूर्ण हैं:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | लाइब्रेरी                       | रणनीति         | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E प्रतिक्रिया | Hydration |
 | ------------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | --------------: | --------: |
 | **base** (बिना i18n)            | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |         13.4 ms |   11.8 ms |
@@ -119,6 +125,15 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 - **कंपोनेंट आकार**: `useTranslation()` का उपयोग करने वाला कंपोनेंट 26-79 KB में कंपाइल होता है; वही कंपोनेंट `useIntlayer()` के साथ केवल 6.9 KB में कंपाइल होता है।
 - **हाइड्रेशन**: `dynamic` सेटअप में हाइड्रेशन 27.7 ms तक बढ़ जाता है क्योंकि React के हाइड्रेट होने से पहले i18next इंस्टेंस को क्लाइंट पर बैकएंड हल करना पड़ता है।
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> पूरी तालिका, प्रत्येक लाइब्रेरी और प्रत्येक रणनीति [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) में उपलब्ध है।
+
 ### TanStack Start पर परिणाम (`react-i18next`)
 
 Next.js की विशेषताओं को अलग करके TanStack Start पर शुद्ध `react-i18next` के साथ समान परीक्षण:
@@ -141,8 +156,19 @@ Next.js की विशेषताओं को अलग करके TanStac
 - Intlayer का `static` विकल्प पहले से ही **0% पेज लीकेज** देता है क्योंकि केवल वर्तमान पेज के कंपोनेंट्स द्वारा आयातित शब्दकोश ही बंडल होते हैं। `importMode: 'dynamic'` चालू करने से भाषा लीकेज भी पूरी तरह समाप्त हो जाती है।
 - **कंपोनेंट आकार**: `react-i18next` में प्रति कंपोनेंट 24-27 KB बनाम Intlayer में 6-8 KB।
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> पूरी तालिका [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack) में उपलब्ध है।
+
 ## यह अंतर क्यों है? ग्लोबल इंस्टेंस बनाम कंपाइल किए गए शब्दकोश
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `i18next` को 2012 में एक रनटाइम के रूप में डिजाइन किया गया था: एक ग्लोबल इंस्टेंस संसाधन भंडार रखता है, प्लगइन्स इसे विस्तारित करते हैं, और रेंडर समय पर `t()` कुंजियों को खोजता है। यह इसे अत्यधिक लचीला बनाता है लेकिन भारी भी बनाता है:
 
 ```bash
@@ -166,7 +192,13 @@ Next.js की विशेषताओं को अलग करके TanStac
                 └── page.tsx     # इसे जानना होगा कि इसे ["common", "about"] की आवश्यकता है
 ```
 
-ग्लोबल इंस्टेंस यह अनुमान नहीं लगा सकता कि कंपोनेंट को किन कुंजियों की आवश्यकता होगी, इसलिए यह उन सभी नेमस्पेस को बनाए रखता है जिन्हें लोड करने के लिए कहा गया है। अनुकूलन का अर्थ है कि **आप** फाइलों को विभाजित करें, **आप** प्रत्येक पेज के लिए आवश्यक नेमस्पेस सूचीबद्ध करें, और कंपोनेंट बदलने पर उस सूची को बनाए रखें। जैसा कि [बेंचमार्क रिपोर्ट](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) में कहा गया है: "टाइप सुरक्षा बनाए रखना और यह जानना कि किस पेज पर कौन सा नेमस्पेस चाहिए, एक दुःस्वप्न है।"
+ग्लोबल इंस्टेंस यह अनुमान नहीं लगा सकता कि कंपोनेंट को किन कुंजियों की आवश्यकता होगी, इसलिए यह उन सभी नेमस्पेस को बनाए रखता है जिन्हें लोड करने के लिए कहा गया है। अनुकूलन का अर्थ है कि **आप** फाइलों को विभाजित करें, **आप** प्रत्येक पेज के लिए आवश्यक नेमस्पेस सूचीबद्ध करें, और कंपोनेंट बदलने पर उस सूची को बनाए रखें।
+
+लागत एक साथ दो अक्षों पर बढ़ती है, पेज और भाषाएँ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
+जैसा कि [बेंचमार्क रिपोर्ट](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) में कहा गया है: "टाइप सुरक्षा बनाए रखना और यह जानना कि किस पेज पर कौन सा नेमस्पेस चाहिए, एक दुःस्वप्न है।"
 
 Intlayer ग्लोबल इंस्टेंस को पूरी तरह समाप्त कर देता है। कंटेंट सीधे कंपोनेंट के बगल में घोषित होता है, और कंपाइलर बिल्ड समय पर निर्भरता ट्री को हल करता है:
 
@@ -193,7 +225,8 @@ Intlayer ग्लोबल इंस्टेंस को पूरी तर
 
 ### सेटअप
 
-**next-i18next (App Router)**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```ts fileName="src/app/i18n/server.ts"
 import { createInstance } from "i18next";
@@ -228,7 +261,8 @@ export const initI18next = async (
 
 इसके अलावा क्लाइंट-साइड `I18nProvider`, `generateStaticParams`, और हर पेज पर `namespaces` सूची को बनाए रखना पड़ता है।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -264,9 +298,13 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
 export default LocaleLayout;
 ```
 
+</Tab>
+</Tabs>
+
 ### क्लाइंट कंपोनेंट
 
-**react-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="react-i18next" value="i18next">
 
 ```json fileName="src/locales/en/about.json"
 {
@@ -304,7 +342,8 @@ export const Counter = () => {
 
 > इस कंपोनेंट को रेंडर करने वाले पेज को `about` नेमस्पेस लोड करना होगा, और `CustomTypeOptions` का विस्तार किए बिना `t("counter.label")` केवल एक सामान्य स्ट्रिंग है।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -345,9 +384,13 @@ export const Counter = () => {
 
 `label` और `increment` पूरी तरह से टाइप-सुरक्षित हैं; वर्तनी की गलती TypeScript त्रुटि देती है और फ्रेंच अनुवाद गायब होने पर बिल्ड रुक जाता है।
 
+</Tab>
+</Tabs>
+
 ### सिंक्रोनस सर्वर कंपोनेंट
 
-**next-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -366,7 +409,8 @@ export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
 
 पेज को `i18n.getFixedT(locale, "about")` कॉल करके `t` और `locale` को Props के रूप में नीचे भेजना पड़ता है।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -385,6 +429,9 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## i18next API बनाए रखें, Intlayer का बेहतर प्रदर्शन पाएं
 
 बेंचमार्क परिणामों का लाभ उठाने के लिए आपको अपने कंपोनेंट्स को फिर से लिखने की आवश्यकता नहीं है। `@intlayer/i18next`, `@intlayer/react-i18next`, और `@intlayer/next-i18next` ड्रॉप-इन एडेप्टर हैं: `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, बहुवचन और संदर्भ प्रत्यय बिना किसी बदलाव के काम करते रहते हैं।
@@ -415,18 +462,85 @@ export default defineConfig({
 
 ## कब किसका चयन करें?
 
-- **i18next चुनें**: यदि आपको इसके विशाल प्लगइन इकोसिस्टम की आवश्यकता है, आप React के बाहर भी स्थानीयकरण करते हैं (Node सेवाएँ, Vanilla JS, अन्य फ्रेमवर्क), आपकी टीम पहले से इसमें कुशल है, या कोई अनुवाद प्लेटफ़ॉर्म `locales/{lng}/{ns}.json` फ़ाइलों की अपेक्षा करता है। प्रदर्शन महत्वपूर्ण होने पर नेमस्पेस विभाजन और पेज मैपिंग के लिए समय निकालें।
-- **Intlayer चुनें**: यदि आप **कंपोनेंट-स्तरीय कंटेंट**, **सख्त TypeScript सुरक्षा**, **बिल्ड-समय पर अनुवाद सत्यापन**, **शून्य-प्रयास ट्री-शेकिंग और लेज़ी लोडिंग**, त्वरित भाषा स्विचिंग, सिंक्रोनस सर्वर कंपोनेंट्स और अंतर्निहित संपादन उपकरण (विजुअल एडिटर, CMS, AI अनुवाद, MCP सर्वर) चाहते हैं। मॉड्यूलर कोडबेस और डिज़ाइन सिस्टम के लिए यह सर्वोत्तम है।
-- **`@intlayer/*-i18next` एडेप्टर चुनें**: यदि आप पहले से ही i18next का उपयोग कर रहे हैं और कोड को फिर से लिखे बिना बंडल साइज और प्रतिक्रिया गति में सुधार चाहते हैं।
+<AccordionGroup>
+<Accordion header="i18next चुनें">
+
+यदि आपको इसके विशाल प्लगइन इकोसिस्टम की आवश्यकता है, आप React के बाहर भी स्थानीयकरण करते हैं (Node सेवाएँ, Vanilla JS, अन्य फ्रेमवर्क), आपकी टीम पहले से इसमें कुशल है, या कोई अनुवाद प्लेटफ़ॉर्म `locales/{lng}/{ns}.json` फ़ाइलों की अपेक्षा करता है। प्रदर्शन महत्वपूर्ण होने पर नेमस्पेस विभाजन और पेज मैपिंग के लिए समय निकालें।
+
+</Accordion>
+<Accordion header="Intlayer चुनें">
+
+आप **कंपोनेंट-स्कोप सामग्री**, **सख्त TypeScript**, **बिल्ड-टाइम छूटी हुई कुंजियों पर त्रुटियाँ**, **शून्य-प्रयास ट्री-शेकिंग और लेज़ी लोडिंग**, त्वरित भाषा स्विचिंग, सिंक्रोनस सर्वर कंपोनेंट और अंतर्निहित संपादन उपकरण ([विज़ुअल एडिटर](https://intlayer.org/hi/doc/concept/editor), [CMS](https://intlayer.org/hi/doc/concept/cms), [AI अनुवाद](https://intlayer.org/hi/doc/concept/auto-fill), [MCP सर्वर](https://intlayer.org/hi/doc/mcp-server)) चाहते हैं। विशेष रूप से बड़े, मॉड्यूलर कोडबेस और डिज़ाइन सिस्टम के लिए उपयुक्त।
+
+</Accordion>
+<Accordion header="@intlayer/*-i18next एडेप्टर चुनें">
+
+आप पहले से ही i18next पर हैं और कंपोनेंट्स को दोबारा लिखे बिना बंडल और प्रतिक्रियाशीलता का लाभ चाहते हैं। आपकी `locales/{lng}/{ns}.json` फ़ाइलें सच्चाई का स्रोत बनी रहती हैं। [i18next vs @intlayer/i18next](https://intlayer.org/hi/blog/i18next-vs-intlayer-i18next) में एक साथ मापा गया।
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ (अक्सर पूछे जाने वाले प्रश्न)
+
+<FAQ>
+
+<Question title="i18next अन्य लाइब्रेरीज़ की तुलना में इतनी भारी क्यों है?">
+
+इसे फ्रेमवर्क-अज्ञेय रनटाइम के रूप में डिज़ाइन किया गया था: एक वैश्विक इंस्टेंस, एक प्लगइन पाइपलाइन, एक संसाधन स्टोर, एक कुंजी समाधानकर्ता। यह लचीलापन प्रत्येक बंडल में संकलित होता है। एक खाली कंपोनेंट जो केवल लाइब्रेरी को आयात करता है, `next-i18next` के साथ **19.7 KB gzip** और `next-intlayer` के साथ **5.5 KB** खर्च करता है, और यह लागत प्रत्येक पेज पर चुकानी पड़ती है चाहे आपकी सामग्री का वजन कुछ भी हो।
+
+</Question>
+
+<Question title="क्या बैकएंड के साथ लेज़ी लोडिंग इसे ठीक कर देती है?">
+
+यह बाइट्स को ठीक करता है, लेटेंसी को नहीं। `i18next-resources-to-backend` पर जाने से प्रति पेज ~49 KB की बचत होती है लेकिन भाषा स्विच पर नेटवर्क राउंड-ट्रिप जुड़ जाता है: `dynamic` सेटअप में **123 ms** और `scoped-static` में **185 ms**, जबकि Intlayer के साथ **3-4 ms**। हाइड्रेशन भी 27.7 ms तक बढ़ जाता है क्योंकि React के हाइड्रेट होने से पहले इंस्टेंस अपने बैकएंड को हल करता है।
+
+</Question>
+
+<Question title="क्या मैं i18next के साथ 0% लीकेज तक पहुँच सकता हूँ?">
+
+हाँ, `scoped-dynamic` के साथ: प्रति रूट एक नेमस्पेस, एक संसाधन बैकएंड और हाथ से बनाए रखा जाने वाला पेज-टू-नेमस्पेस मैप। यह Next.js पर प्रति पेज 163.4 KB पर पहुँचता है, जो अभी भी Intlayer के 141.3 KB से **+22 KB** अधिक है, जिसके लिए किसी कॉन्फ़िगरेशन की आवश्यकता नहीं थी। देखें [बंडल अनुकूलन](https://intlayer.org/hi/doc/concept/bundle-optimization)।
+
+</Question>
+
+<Question title="क्या मुझे माइग्रेट करने के लिए अपने कंपोनेंट्स को दोबारा लिखना होगा?">
+
+नहीं। `@intlayer/i18next`, `@intlayer/react-i18next` और `@intlayer/next-i18next` `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, `_one` / `_other` बहुवचन, संदर्भ प्रत्यय और `returnObjects` को बनाए रखते हैं। `next.config.ts` या `vite.config.ts` में केवल एक प्लगइन लाइन। [next-i18next माइग्रेशन गाइड](https://intlayer.org/hi/doc/migration/next-i18next) में चरण-दर-चरण।
+
+</Question>
+
+<Question title="मेरे i18next प्लगइन्स का क्या होता है?">
+
+बैकएंड और भाषा डिटेक्टर स्वीकार किए जाते हैं लेकिन निष्क्रिय रहते हैं: रनटाइम पर लोड या पता लगाने के लिए कुछ नहीं बचता है। भाषा का पता लगाना Intlayer का रूटिंग कॉन्फ़िगरेशन (URL उपसर्ग, कुकी, हेडर) बन जाता है। यदि आपका ऐप अनुरोध के समय CMS से अनुवाद प्राप्त करता है, तो इसके बजाय [Intlayer CMS](https://intlayer.org/hi/doc/concept/cms) या `intlayer pull` / `push` का उपयोग करें।
+
+</Question>
+
+</FAQ>
 
 ## संबंधित तुलनात्मक लेख
 
-- [next-intl बनाम Intlayer](https://intlayer.org/hi/blog/next-intl-vs-intlayer) (समान बेंचमार्क)
-- [Lingui बनाम Intlayer](https://intlayer.org/hi/blog/lingui-vs-intlayer) (समान बेंचमार्क)
-- [vue-i18n बनाम Intlayer बेंचमार्क](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-benchmark) (समान बेंचमार्क)
-- [next-i18next बनाम next-intl बनाम Intlayer](https://intlayer.org/hi/blog/next-i18next-vs-next-intl-vs-intlayer)
-- [react-i18next बनाम react-intl बनाम Intlayer](https://intlayer.org/hi/blog/react-i18next-vs-react-intl-vs-intlayer)
+वही बेंचमार्क, अन्य लाइब्रेरीज़:
+
+- [next-intl vs Intlayer](https://intlayer.org/hi/blog/next-intl-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/hi/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/hi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/hi/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+i18next पर और आगे जानें:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/hi/blog/i18next-vs-intlayer-i18next), उसी ऐप पर मापे गए एडेप्टर
 - [क्या i18next पुराना हो चुका है?](https://intlayer.org/hi/blog/is-i18next-outdated)
+- [i18next के साथ Intlayer का उपयोग करना](https://intlayer.org/hi/blog/intlayer-with-i18next) और [react-i18next के साथ](https://intlayer.org/hi/blog/intlayer-with-react-i18next)
+- [next-i18next के साथ Next.js ऐप का अंतर्राष्ट्रीयकरण कैसे करें](https://intlayer.org/hi/blog/nextjs-internationalization-using-next-i18next)
+
+संदर्भ दस्तावेज़:
+
+- [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) और [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack)
+- संगतता एडेप्टर: [i18next](https://intlayer.org/hi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/hi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/hi/doc/compatibility/next-i18next)
+- माइग्रेशन गाइड: [i18next](https://intlayer.org/hi/doc/migration/i18next), [react-i18next](https://intlayer.org/hi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/hi/doc/migration/next-i18next)
+- [बंडल अनुकूलन](https://intlayer.org/hi/doc/concept/bundle-optimization) और [Intlayer कंपाइलर](https://intlayer.org/hi/doc/compiler)
+- [प्रति-कंपोनेंट बनाम केंद्रीकृत i18n](https://intlayer.org/hi/blog/per-component-vs-centralized-i18n)
+- [कंपाइलर-संचालित बनाम घोषणात्मक i18n](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)
 
 ## GitHub स्टार्स
 

package/blog/hi/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui बनाम Intlayer: 2026 बेंचमार्क और तुलना"
 description: "Next.js और TanStack Start पर मापी गई दो कंपाइलर-आधारित i18n लाइब्रेरी। बंडल साइज़, कंटेंट लीकेज, कंपोनेंट साइज़, हाइड्रेशन, लोकेल-स्विच प्रतिक्रियाशीलता और डेवलपर अनुभव।"
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui VS Intlayer | React और Next.js अंतर्राष्ट्रीयकरण (i18n) बेंचमार्क
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Lingui और Intlayer इस बेंचमार्क में दो ऐसी लाइब्रेरी हैं जो केवल रनटाइम पर निर्भर रहने के बजाय एक **कंपाइलर** का उपयोग करती हैं। Lingui बिल्ड टाइम पर मैक्रोज़ से संदेश निकालता है और प्रति लोकेल कैटलॉग कंपाइल करता है। Intlayer प्रति-कंपोनेंट डिक्शनरी कंपाइल करता है और उन्हें प्रति लोकेल ट्री-शेक करता है। कागज़ पर वे काफी करीब दिखने चाहिए। आंकड़े दिखाते हैं कि वे कहाँ भिन्न होते हैं।
 
 डेटा [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) से आता है, जो एक ओपन-सोर्स सुइट है जो प्रत्येक लाइब्रेरी के साथ समान एप्लिकेशन बनाता है और रिकॉर्ड करता है कि ब्राउज़र वास्तव में क्या डाउनलोड और निष्पादित करता है।
@@ -96,6 +98,10 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 
 ### Next.js पर परिणाम
 
+उन मेट्रिक्स और लाइब्रेरीज़ को चुनें जिनकी आपको परवाह है:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | लाइब्रेरी            | रणनीति         | लाइब्रेरी साइज़ (gz) | पेज JS औसत (gz) | लोकेल लीक |  पेज लीक | कंपोनेंट औसत (gz) | E2E प्रतिक्रियाशीलता | हाइड्रेशन |
 | -------------------- | -------------- | -------------------: | --------------: | --------: | -------: | ----------------: | -------------------: | --------: |
 | **base** (बिना i18n) | -              |               0.0 KB |        141.0 KB |      0.0% |     0.0% |            0.9 KB |              13.4 ms |   11.8 ms |
@@ -114,6 +120,15 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 - **सोर्स-लोकेल फ़ॉलबैक लीक होता है।** अनुकूलित सेटअप में भी, **`en` स्ट्रिंग्स का 3-15% `fr` पेजों के अंदर भेजा जाता है**। Lingui मैक्रोज़ सोर्स मैसेज को फ़ॉलबैक के रूप में उपलब्ध रखते हैं, इसलिए यह अनुवाद के बगल में बंडल में आ जाता है। Intlayer बिल्ड समय पर फ़ॉलबैक को हल करता है और केवल सक्रिय लोकेल को भेजता है।
 - **`scoped-dynamic` में कंपोनेंट साइज़ बहुत बढ़ जाता है।** अलग से कंपाइल किए गए प्रत्येक कंपोनेंट का औसत **152.6 KB** होता है, क्योंकि हर रूट का कैटलॉग उस कंपोनेंट से पहुँच योग्य होता है जो इसे इम्पोर्ट करता है। `useIntlayer()` के साथ वही कंपोनेंट औसतन **6.9 KB** का होता है।
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) में पूरी तालिका, प्रत्येक लाइब्रेरी और प्रत्येक रणनीति देखें।
+
 ### TanStack Start पर परिणाम
 
 | लाइब्रेरी                   | रणनीति         | लाइब्रेरी साइज़ (gz) | पेज JS औसत (gz) | लोकेल लीक |  पेज लीक | कंपोनेंट औसत (gz) | E2E प्रतिक्रियाशीलता | हाइड्रेशन |
@@ -135,8 +150,19 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 - **Intlayer की `static` पंक्ति में पहले से ही 0% पेज लीकेज है** क्योंकि केवल पेज के कंपोनेंट्स द्वारा इम्पोर्ट की गई डिक्शनरी ही बंडल की जाती हैं। कॉन्फ़िगरेशन की एक पंक्ति (`importMode: 'dynamic'`) लोकेल लीकेज को भी हटा देती है।
 - **`@intlayer/lingui`** Lingui के मैक्रो सिंटैक्स को बनाए रखता है और इसे Intlayer डिक्शनरी से परोसता है। यह मूल Lingui की तुलना में छोटे कंपोनेंट्स (12.8 KB) और तेज़ हाइड्रेशन के लिए थोड़े पेज साइज़ (137 KB) का समझौता करता है। यह एक माइग्रेशन चरण है, अंतिम मंजिल नहीं।
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack) में पूरी तालिका देखें।
+
 ## अंतर क्यों है? दो कंपाइलर, काम की दो इकाइयाँ
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 दोनों लाइब्रेरी कंपाइल करती हैं। अंतर यह है कि वे **क्या** कंपाइल करती हैं।
 
 **Lingui कैटलॉग कंपाइल करता है।** आपके सोर्स में मैक्रोज़ प्रति लोकेल एक `.po` फ़ाइल में निकाले जाते हैं, फिर प्रति लोकेल एक JS मॉड्यूल में कंपाइल किए जाते हैं। इकाई **लोकेल** है। रूट या कंपोनेंट के अनुसार आगे विभाजित करने का मतलब है कई कैटलॉग बनाना, फ़ाइलों के एक अलग सेट से प्रत्येक को निकालने के लिए `lingui.config.ts` को कॉन्फ़िगर करना, और प्रत्येक रूट में सही कैटलॉग लोड करना। रनटाइम `I18n` इंस्टेंस ग्लोबल है; प्रत्येक `useLingui()` कॉल कंपोनेंट को इससे जोड़ती है।
@@ -176,7 +202,9 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
             └── about.content.ts
 ```
 
-यही कारण है कि `scoped-dynamic` पैटर्न Intlayer के लिए एक स्वचालित बिल्ड आउटपुट है और Lingui के लिए एक कॉन्फ़िगरेशन प्रोजेक्ट है।
+यही कारण है कि `scoped-dynamic` पैटर्न Intlayer के लिए एक स्वचालित बिल्ड आउटपुट है और Lingui के लिए एक कॉन्फ़िगरेशन प्रोजेक्ट है. यह अंतर एक साथ दो अक्षों, पृष्ठों और भाषाओं पर बढ़ता है:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > `dynamic` पंक्ति के आंकड़े प्राप्त करने के लिए, `intlayer.config.ts` में `dictionary.importMode: 'dynamic'` सेट करें। [बंडल ऑप्टिमाइज़ेशन दस्तावेज़](https://intlayer.org/hi/doc/concept/bundle-optimization) देखें।
 
@@ -184,7 +212,8 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 
 ### सेटअप
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="lingui.config.ts"
 import { defineConfig } from "@lingui/cli";
@@ -215,7 +244,8 @@ export const loadCatalog = async (locale: string) => {
 
 फिर बंडलर में `@lingui/babel-plugin-lingui-macro` (या `@lingui/swc-plugin`) जोड़ें, सोर्स एडिट करने के बाद `lingui extract` चलाएं, बिल्ड करने से पहले `lingui compile` चलाएं, और ट्री को `<I18nProvider i18n={i18n}>` में लपेटें।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -232,9 +262,12 @@ export default config;
 
 `vite.config.ts` में `intlayer()` (या `next.config.ts` में `withIntlayer()`) जोड़ें और ट्री को `<IntlayerProvider>` में लपेटें। कोई एक्सट्रैक्ट या कंपाइल चरण नहीं: बंडलर चलने पर डिक्शनरी अपने आप बन जाती हैं।
 
+</Tab>
+</Tabs>
 ### कंपोनेंट
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```tsx fileName="src/components/Counter.tsx"
 import { useState } from "react";
@@ -258,7 +291,8 @@ export const Counter = () => {
 
 अंग्रेजी टेक्स्ट कंपोनेंट में रहता है; फ्रेंच वाला `lingui extract` चलने के बाद एक हैशेड आईडी के तहत `src/locales/fr/messages.po` में रहता है। इसे चलाना या `compile` करना भूल जाने पर चुपचाप अंग्रेजी फ़ॉलबैक हो जाता है।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -297,11 +331,14 @@ export const Counter = () => {
 
 दोनों लोकेल कंपोनेंट के बगल में एक ही फ़ाइल में बैठते हैं। गायब `fr` मान एक बिल्ड एरर है, गलत कुंजी एक TypeScript एरर है।
 
+</Tab>
+</Tabs>
 ### कंपोनेंट्स के बाहर
 
 मेटाडेटा, लोडर्स, सर्वर फ़ंक्शंस: बिना React ट्री के कहीं भी।
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { setupI18n } from "@lingui/core";
@@ -324,7 +361,8 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 
 प्रति कॉल एक नया `I18n` इंस्टेंस, हाथ से लोड किया गया सही कैटलॉग, और `t` के बजाय `msg` + `i18n._()`। जैसा कि [बेंचमार्क नोट्स](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) बताते हैं, यह जानना कि कब `t`, `` t` ` ``, `i18n.t()`, `msg` या `<Trans>` का उपयोग करना है, "सहज नहीं है"।
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { getIntlayer } from "intlayer";
@@ -336,6 +374,9 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Lingui मैक्रोज़ रखें, Intlayer डिक्शनरी प्राप्त करें
 
 `@intlayer/lingui` `@lingui/core` और `@lingui/react` के लिए एक ड्रॉप-इन एडेप्टर है। मैक्रोज़ पहले की तरह कंपाइल होते रहते हैं; रनटाइम `i18n._()` जिसे वे कंपाइल करते हैं, Intlayer डिक्शनरी से परोसा जाता है, जिसमें `.po` सिंक प्लगइन्स आपके मौजूदा कैटलॉग को सत्य के स्रोत के रूप में रखते हैं। ICU प्लुरल्स और सेलेक्ट्स समान रूप से रेंडर होते हैं।
@@ -353,16 +394,82 @@ export default defineConfig({
 
 ## कब किसे चुनें?
 
-- **Lingui चुनें** यदि आप टाइप्ड मैक्रोज़ के साथ **ICU MessageFormat** चाहते हैं, आपके अनुवादक मौजूदा TMS पाइपलाइन के साथ **`.po`** में काम करते हैं, आप JSX में इनलाइन सोर्स स्ट्रिंग्स पसंद करते हैं, और आपकी टीम एक्सट्रैक्ट / कंपाइल / कैटलॉग-विभाजन वर्कफ़्लो को प्रबंधित करने में सहज है।
-- **Intlayer चुनें** यदि आप **कंपोनेंट-स्कोप्ड कंटेंट**, **सख्त TypeScript**, **बिल्ड-टाइम गायब-कुंजी एरर**, **शून्य-प्रयास ट्री-शेकिंग और लेज़ी लोडिंग**, छोटे कंपोनेंट्स, तेज़ हाइड्रेशन, त्वरित लोकेल स्विचिंग, और बिल्ट-इन एडिटोरियल टूलिंग (विजुअल एडिटर, CMS, AI अनुवाद, MCP सर्वर) चाहते हैं। बड़े, मॉड्यूलर कोडबेस और डिज़ाइन सिस्टम के लिए विशेष रूप से प्रासंगिक।
-- **`@intlayer/lingui` चुनें** यदि आप Lingui पर हैं और मैक्रोज़ को छुए बिना वृद्धिशील रूप से Intlayer डिक्शनरी में माइग्रेट करना चाहते हैं।
+<AccordionGroup>
+<Accordion header="Lingui चुनें">
+
+यदि आप टाइप किए गए मैक्रोज़ के साथ **ICU MessageFormat** चाहते हैं, आपके अनुवादक मौजूदा TMS पाइपलाइन के साथ **`.po`** में काम करते हैं, आप JSX में इनलाइन स्रोत स्ट्रिंग्स पसंद करते हैं, और आपकी टीम एक्सट्रैक्ट / कंपाइल / कैटलॉग-विभाजन वर्कफ़्लो को संभालने में सहज है। लेज़ी लोडिंग सेट होने के बाद इसका प्रति-पृष्ठ JS प्रतिस्पर्धी है।
+
+</Accordion>
+<Accordion header="Intlayer चुनें">
+
+यदि आप **घटक-क्षेत्रीय सामग्री**, **सख्त TypeScript**, **बिल्ड-टाइम अनुपलब्ध-कुंजी त्रुटियाँ**, **शून्य-प्रयास ट्री-शेकिंग और लेज़ी लोडिंग**, छोटे घटक, तेज़ हाइड्रेशन, त्वरित भाषा स्विचिंग और अंतर्निहित संपादकीय उपकरण ([विजुअल एडिटर](https://intlayer.org/hi/doc/concept/editor), [CMS](https://intlayer.org/hi/doc/concept/cms), [AI अनुवाद](https://intlayer.org/hi/doc/concept/auto-fill), [MCP सर्वर](https://intlayer.org/hi/doc/mcp-server)) चाहते हैं। बड़े, मॉड्यूलर कोडबेस और डिज़ाइन सिस्टम के लिए विशेष रूप से प्रासंगिक।
+
+</Accordion>
+<Accordion header="@intlayer/lingui चुनें">
+
+यदि आप Lingui पर हैं और मैक्रोज़ को छुए बिना वृद्धिशील रूप से Intlayer शब्दकोशों में स्थानांतरित होना चाहते हैं। आपके `.po` कैटलॉग [PO सिंक प्लगइन](https://intlayer.org/hi/doc/compatibility/lingui) के माध्यम से सत्य का स्रोत बने रहते हैं। [Lingui vs @intlayer/lingui](https://intlayer.org/hi/blog/lingui-vs-intlayer-lingui) में साथ-साथ मापा गया।
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Lingui भी कंपाइल करता है। आउटपुट इतना अलग क्यों है?">
+
+क्योंकि संकलन की इकाई भिन्न है। Lingui **प्रति भाषा एक कैटलॉग** संकलित करता है: उसके नीचे सब कुछ (प्रति-मार्ग कैटलॉग, लेज़ी लोडिंग, बंडल से फ़ॉलबैक को बाहर रखना) कॉन्फ़िगरेशन है। Intlayer **प्रति घटक एक शब्दकोश** संकलित करता है, इसलिए रूट स्कोपिंग बिल्ड का एक स्वाभाविक आउटपुट बन जाता है। यही कारण है कि अलगाव में संकलित Lingui घटक 6-8 KB के मुकाबले 58-153 KB का होता है।
+
+</Question>
+
+<Question title="Lingui के साथ भाषा का रिसाव कभी 0% तक क्यों नहीं पहुँचता?">
+
+मैक्रोज़ स्रोत संदेश को रनटाइम फ़ॉलबैक के रूप में उपलब्ध रखते हैं, इसलिए अनुवाद के साथ-साथ अंग्रेजी स्ट्रिंग भी बंडल में जाती है। बेंचमार्क प्रत्येक अनुकूलित सेटअप में **`fr` पृष्ठों के अंदर 3-15% `en` स्ट्रिंग्स** मापता है। Intlayer बिल्ड समय पर फ़ॉलबैक को हल करता है और केवल सक्रिय भाषा भेजता है।
+
+</Question>
+
+<Question title="क्या Lingui का प्रति-पृष्ठ जावास्क्रिप्ट वास्तव में प्रतिस्पर्धी है?">
+
+हाँ, और TanStack Start पर यह बहुत कम अंतर से जीतता है: Intlayer के लिए 118.6 KB के मुकाबले `dynamic` में 115.2 KB। हैश की गई आईडी वाले संकलित कैटलॉग कॉम्पैक्ट होते हैं। लागत अन्यत्र दिखाई देती है: 11-14 ms के मुकाबले 28-34 ms पर हाइड्रेशन, और `scoped-dynamic` सेटअप में **42 ms** का भाषा स्विच।
+
+</Question>
+
+<Question title="क्या माइग्रेट करने के लिए मुझे मैक्रोज़ छोड़ना होगा?">
+
+नहीं। `@intlayer/lingui` `` t`...` ``, `<Trans>`, `msg`, `plural`, `select` और `selectOrdinal` को पहले की तरह संकलित करता रहता है; केवल वह स्रोत बदलता है जिसके विरुद्ध `i18n._()` हल होता है। बिल्ड में `@lingui/babel-plugin-lingui-macro` या `@lingui/swc-plugin` बनाए रखें। [Lingui संगतता दस्तावेज़](https://intlayer.org/hi/doc/compatibility/lingui) देखें।
+
+</Question>
+
+<Question title="एक्सट्रैक्ट और कंपाइल चरणों का क्या?">
+
+वे मैक्रोज़ के लिए बने रहते हैं, और Intlayer की अपनी सामग्री के लिए हट जाते हैं। `.content.ts` शब्दकोश तब बनाए जाते हैं जब बंडलर चलता है, बिना किसी अलग CLI पास के, और [`intlayer test`](https://intlayer.org/hi/doc/concept/cli) चुपचाप स्रोत स्ट्रिंग पर वापस जाने के बजाय किसी भी लापता कुंजी पर CI को विफल कर देता है।
+
+</Question>
+
+</FAQ>
 
 ## संबंधित तुलनाएँ
 
-- [next-intl बनाम Intlayer](https://intlayer.org/hi/blog/next-intl-vs-intlayer) (समान बेंचमार्क)
-- [i18next बनाम Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer) (समान बेंचमार्क)
-- [vue-i18n बनाम Intlayer बेंचमार्क](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-benchmark) (समान बेंचमार्क)
-- [कंपाइलर बनाम डिक्लेरेटिव i18n](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)
+समान बेंचमार्क, अन्य लाइब्रेरीज़:
+
+- [next-intl vs Intlayer](https://intlayer.org/hi/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/hi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/hi/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+और आगे:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/hi/blog/lingui-vs-intlayer-lingui), उसी ऐप पर मापा गया एडॉप्टर
+- [Compiler-driven vs declarative i18n](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/hi/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/hi/blog/icu-message-format)
+
+संदर्भ दस्तावेज़:
+
+- [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) और [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack)
+- [Compat adapter: Lingui](https://intlayer.org/hi/doc/compatibility/lingui)
+- [बंडल अनुकूलन](https://intlayer.org/hi/doc/concept/bundle-optimization) और [Intlayer कंपाइलर](https://intlayer.org/hi/doc/compiler)
 
 ## GitHub STARS