@intlayer/docs 9.5.6 → 9.5.8

package/blog/hi/next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl बनाम Intlayer: 2026 बेंचमार्क और तुलना"
 description: "Next.js App Router और TanStack Start पर next-intl और Intlayer की तुलना। बंडल साइज़, कंटेंट लीकेज, कंपोनेंट साइज़, हाइड्रेशन, लोकेल स्विचिंग और डेवलपर अनुभव।"
 keywords:
@@ -22,11 +22,11 @@ author: aymericzip
 
 # next-intl बनाम Intlayer | React और Next.js अंतर्राष्ट्रीयकरण (i18n) बेंचमार्क
 
-`next-intl` आज Next.js App Router के लिए डिफ़ॉल्ट विकल्प है: राउटिंग के साथ गहरा एकीकरण, संपूर्ण ICU MessageFormat समर्थन, और क्लासिक i18n सिस्टम का उपयोग करने वाले किसी भी व्यक्ति के लिए एक परिचित डेवलपर अनुभव।
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
 
-`Intlayer` समस्या पर पुनर्विचार करता है: कोई केंद्रीकृत डिक्शनरी नहीं, रूट्स के साथ नेमस्पेस का मिलान करने का कोई मैन्युअल काम नहीं। सामग्री प्रत्येक कंपोनेंट के बगल में घोषित की जाती है, और एक बिल्ड-टाइम कंपाइलर केवल वही बंडल करता है जिसकी प्रत्येक पेज को आवश्यकता होती है।
+`next-intl` Next.js के लिए सबसे लोकप्रिय i18n लाइब्रेरी है। Intlayer एक कंपाइलर-आधारित, घटक-क्षेत्रीय विकल्प है। दोनों App Router एप्लिकेशन का स्थानीयकरण करते हैं। सवाल यह है कि ऐप बनने के बाद प्रत्येक की लागत क्या है।
 
-यह लेख [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) के डेटा का उपयोग करके दोनों की तुलना करता है, जो एक ओपन-सोर्स टेस्ट सूट है जो प्रत्येक लाइब्रेरी के साथ समान एप्लिकेशन बनाता है और रिकॉर्ड करता है कि ब्राउज़र वास्तव में क्या डाउनलोड और निष्पादित करता है।
+यह लेख कोई ट्यूटोरियल नहीं है। यह [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) के आंकड़ों द्वारा समर्थित एक तुलना है, जो एक ओपन-सोर्स बेंचमार्क सूट है जो प्रत्येक लाइब्रेरी के साथ एक ही एप्लिकेशन बनाता है और मापता है कि ब्राउज़र वास्तव में क्या डाउनलोड और निष्पादित करता है।
 
 <TOC/>
 
@@ -89,6 +89,10 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 
 ### Next.js (App Router) पर परिणाम
 
+अपनी पसंद के मेट्रिक्स और लाइब्रेरी चुनें:
+
+<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 |
@@ -107,8 +111,19 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 - **लीकेज।** सबसे आम सेटअप (`static` और `dynamic`) में, `next-intl` हर पेज पर **~90% अन्य पेजों की सामग्री** भेजता है, क्योंकि पूरी `en.json` क्लाइंट प्रोवाइडर में जाती है। 0% तक पहुँचने के लिए सावधानीपूर्वक मैनुअल विभाजन की आवश्यकता होती है, जबकि Intlayer स्वचालित रूप से 0% पर है।
 - **कंपोनेंट साइज़।** `useTranslations()` को कॉल करने वाला कंपोनेंट औसतन 21.8 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 (`use-intl`) पर परिणाम
 
+`use-intl` `next-intl` का फ्रेमवर्क-अज्ञेय कोर है। वही API, वही संदेश प्रारूप। TanStack Start पर `intlayer` के साथ इसकी तुलना Next.js-विशिष्ट भागों को समीकरण से हटा देती है।
+
 | लाइब्रेरी                     | रणनीति         | लाइब्रेरी साइज़ (gz) | पेज JS औसत (gz) | लोकेल लीक |  पेज लीक | कंपोनेंट औसत (gz) | E2E प्रतिक्रियाशीलता |
 | ----------------------------- | -------------- | -------------------: | --------------: | --------: | -------: | ----------------: | -------------------: |
 | **base** (बिना i18n)          | -              |               0.0 KB |        111.0 KB |      0.0% |     0.0% |            0.7 KB |               8.1 ms |
@@ -127,8 +142,19 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 - कंपोनेंट के स्तर पर वास्तुकला का अंतर स्पष्ट है: `use-intl` के साथ 76-87 KB बनाम Intlayer के साथ 6-8 KB।
 - **लोकेल स्विचिंग** Intlayer के साथ 2x-4x तेज़ है (3 ms बनाम 7-21 ms)।
 
+<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)
+
 `next-intl` क्लासिक मॉडल का पालन करता है: प्रति लोकेल एक JSON, जो `getRequestConfig` में लोड होता है, `NextIntlClientProvider` में पास होता है, और `t("namespace.key")` द्वारा पढ़ा जाता है।
 
 ```bash
@@ -150,6 +176,10 @@ Intlayer में कोई "scoped" संस्करण नहीं है:
 
 रनटाइम यह नहीं जान सकता कि कोई पेज किन कुंजियों का उपयोग करेगा, इसलिए संपूर्ण कैटलॉग भेजना ही सुरक्षित डिफ़ॉल्ट है।
 
+वहां तक न पहुँचने की लागत दो अक्षों पर एक साथ बढ़ती है, पृष्ठ और भाषाएँ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer जिम्मेदारी को बदल देता है। सामग्री सीधे कंपोनेंट के बगल में घोषित की जाती है:
 
 ```bash
@@ -177,7 +207,8 @@ Intlayer जिम्मेदारी को बदल देता है।
 
 ### क्लाइंट कंपोनेंट
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```json fileName="messages/en.json"
 {
@@ -188,7 +219,7 @@ Intlayer जिम्मेदारी को बदल देता है।
 }
 ```
 
-```tsx fileName="src/components/Counter.tsx"
+```tsx fileName="src/components/ClientCounter.tsx"
 "use client";
 
 import { useState } from "react";
@@ -210,7 +241,10 @@ export const Counter = () => {
 };
 ```
 
-**Intlayer**
+> इस घटक को प्रस्तुत करने वाले प्रत्येक पृष्ठ पर `NextIntlClientProvider` को दिए जाने वाले संदेशों में `counter` नेमस्पेस शामिल करना याद रखें।
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -249,11 +283,16 @@ export const Counter = () => {
 };
 ```
 
+पृष्ठ पर कुछ भी पंजीकृत करने की आवश्यकता नहीं है: घटक अपनी सामग्री स्वयं लाता है।
+
+</Tab>
+</Tabs>
 ### सिंक्रोनस सर्वर कंपोनेंट
 
 डिज़ाइन सिस्टम के घटक (जैसे नेवबार, फूटर, कार्ड) अक्सर सर्वर कंपोनेंट होते हैं जिन्हें क्लाइंट कंपोनेंट के चिल्ड्रन के रूप में रेंडर किया जाता है, इसलिए वे `async` नहीं हो सकते।
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -269,7 +308,10 @@ export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
 );
 ```
 
-**Intlayer**
+पृष्ठ को `await getTranslations("counter")` और `await getFormatter()` करना होगा, फिर परिणामों को प्रॉप्स के रूप में नीचे भेजना होगा। घटक अब आत्मनिर्भर नहीं रहा।
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -288,9 +330,12 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
 ### मेटाडेटा (Metadata)
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import type { Metadata } from "next";
@@ -323,7 +368,8 @@ export const generateMetadata = async ({
 };
 ```
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import { getIntlayer, getMultilingualUrls } from "intlayer";
@@ -347,6 +393,9 @@ export const generateMetadata = async ({
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## next-intl API बनाए रखें, Intlayer का आउटपुट प्राप्त करें
 
 उपरोक्त बेंचमार्क परिणाम प्राप्त करने के लिए आपको अपने कंपोनेंट्स को दोबारा लिखने की आवश्यकता नहीं है। `@intlayer/next-intl` एक ड्रॉप-इन एडेप्टर है: यह `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()` और ICU प्लुरल्स को बनाए रखता है, और उन्हें Intlayer डिक्शनरी से परोसता है।
@@ -368,17 +417,84 @@ export default withIntlayer(nextConfig);
 
 ## कब किसे चुनें?
 
-- **next-intl चुनें** यदि आप Next.js समुदाय मानक चाहते हैं, ICU MessageFormat पर बहुत अधिक निर्भर हैं, आपका ऐप छोटा से मध्यम है, या आप केंद्रीकृत JSON आधारित अनुवाद प्लेटफॉर्म (Crowdin, Phrase, Lokalise...) के साथ एकीकृत हैं।
-- **Intlayer चुनें** यदि आप **कंपोनेंट-स्कोप्ड कंटेंट**, **सख्त TypeScript**, **बिल्ड-टाइम गायब-कुंजी एरर**, **शून्य-प्रयास ट्री-शेकिंग और लेज़ी लोडिंग**, सिंक्रोनस सर्वर कंपोनेंट्स, और बिल्ट-इन एडिटोरियल टूलिंग (विजुअल एडिटर, CMS, AI अनुवाद, MCP सर्वर) चाहते हैं।
-- **`@intlayer/next-intl` चुनें** यदि आप पहले से ही `next-intl` पर हैं और बिना दोबारा लिखे बंडल लाभ चाहते हैं।
+<AccordionGroup>
+<Accordion header="next-intl चुनें">
+
+आप Next.js के लिए इकोसिस्टम मानक चाहते हैं, ICU MessageFormat पर निर्भर करते हैं, आपका ऐप छोटे से मध्यम आकार का है, या आप किसी ऐसे अनुवाद प्लेटफ़ॉर्म (Crowdin, Phrase, Lokalise...) के साथ एकीकृत होते हैं जो केंद्रीकृत JSON की अपेक्षा करता है। यदि प्रदर्शन मायने रखता है तो कैटलॉग को नेमस्पेस में विभाजित करने और प्रति पृष्ठ `pick()` के साथ संदेश चुनने के लिए समय निकालें।
+
+</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/next-intl चुनें">
+
+आप पहले से ही `next-intl` पर हैं और बिना दोबारा लिखे बंडल लाभ चाहते हैं। [कम्पैटिबिलिटी एडेप्टर](https://intlayer.org/hi/doc/compatibility/next-intl) आपके इम्पोर्ट और आपकी `messages/{locale}.json` फ़ाइल को सत्य के एकल स्रोत के रूप में रखता है। [next-intl vs @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl) में एक साथ मापा गया।
+
+</Accordion>
+</AccordionGroup>
+
+## अक्सर पूछे जाने वाले प्रश्न (FAQ)
+
+<FAQ>
+
+<Question title="क्या next-intl Intlayer से धीमा है?">
+
+रेंडर समय पर नहीं। अंतर इसमें है कि क्लाइंट को क्या भेजा जाता है: `next-intl` प्रत्येक पृष्ठ पर **+12.6 KB gzip** रनटाइम की लागत लेता है और अधिकांश सेटअप में प्रत्येक पृष्ठ के साथ विदेशी पृष्ठों के लगभग 90% टेक्स्ट भेजता है। भाषा बदलना और हाइड्रेशन Next.js पर तुलनीय हैं (15-18 ms); TanStack Start पर `use-intl` 7-21 ms लेता है जबकि Intlayer केवल 3-4 ms लेता है।
+
+</Question>
+
+<Question title="क्या मैं next-intl के साथ 0% लीकेज प्राप्त कर सकता हूँ?">
+
+हाँ, `scoped-dynamic` सेटअप के साथ: `messages/{locale}.json` को प्रति रूट एक नेमस्पेस में विभाजित करें, फिर प्रत्येक पृष्ठ में `pick(messages, [...])` का उपयोग करें और कंपोनेंट बदलने पर उस मैपिंग को सही बनाए रखें। बेंचमार्क की `scoped-*` पंक्तियाँ ठीक उसी काम को दर्शाती हैं। Intlayer बिना किसी अतिरिक्त प्रयास के 0% तक पहुँच जाता है क्योंकि कंपाइलर कंपोनेंट के अनुसार सामग्री को सीमित करता है। [बंडल ऑप्टिमाइज़ेशन](https://intlayer.org/hi/doc/concept/bundle-optimization) देखें।
+
+</Question>
+
+<Question title="क्या मुझे माइग्रेट करने के लिए अपने कंपोनेंट फिर से लिखने होंगे?">
+
+नहीं। `@intlayer/next-intl` `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()`, ICU बहुवचन और नेविगेशन सहायकों को बरकरार रखता है, और उन्हें संकलित शब्दकोशों से प्रस्तुत करता है। `next.config.ts` में केवल एक प्लगइन पंक्ति। चरण दर चरण [next-intl माइग्रेशन गाइड](https://intlayer.org/hi/doc/migration/next-intl) में देखें।
+
+</Question>
+
+<Question title="क्या Intlayer ICU MessageFormat का समर्थन करता है?">
+
+मूल API पर ICU समर्थन पर कार्य प्रगति पर है। कम्पैटिबिलिटी एडेप्टर (`@intlayer/next-intl`, `@intlayer/use-intl`) ICU चलाते हैं: बहुवचन, `select`, `selectordinal`, `#` और `{ts, date, long}` Intlayer के ICU रिज़ॉल्वर से गुजरते हैं। विवरण के लिए [ICU संदेश प्रारूप](https://intlayer.org/hi/blog/icu-message-format) पढ़ें।
+
+</Question>
+
+<Question title="क्या मैं अपनी messages/{locale}.json फ़ाइलें रख सकता हूँ?">
+
+हाँ। [JSON सिंक प्लगइन](https://intlayer.org/hi/doc/compatibility/next-intl) उन्हें पढ़ता है, उनकी शीर्ष-स्तरीय कुंजियों को शब्दकोशों में विभाजित करता है, और जब CLI या CMS उन्हें अपडेट करता है तो अनुवादों को उन्हीं फ़ाइलों में वापस लिखता है। आपके अनुवादकों का कार्यप्रवाह नहीं बदलता है।
+
+</Question>
+
+</FAQ>
 
 ## संबंधित तुलनाएँ
 
-- [i18next बनाम Intlayer](https://intlayer.org/hi/blog/i18next-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)
-- [क्या next-intl पुराना हो चुका है?](https://intlayer.org/hi/blog/is-next-intl-outdated)
+वही बेंचमार्क, अन्य लाइब्रेरीज़:
+
+- [i18next vs Intlayer](https://intlayer.org/hi/blog/i18next-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)
+
+next-intl पर गहराई से जानें:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl), उसी ऐप पर मापा गया एडेप्टर
+- [Is next-intl outdated?](https://intlayer.org/hi/blog/is-next-intl-outdated)
+- [Using Intlayer with next-intl](https://intlayer.org/hi/blog/intlayer-with-next-intl)
+- [How to internationalize a Next.js app with next-intl](https://intlayer.org/hi/blog/nextjs-internationalization-using-next-intl)
+
+संदर्भ दस्तावेज़:
+
+- [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) और [TanStack Start बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/tanstack)
+- [कम्पैटिबिलिटी एडेप्टर: next-intl](https://intlayer.org/hi/doc/compatibility/next-intl) और [माइग्रेशन गाइड](https://intlayer.org/hi/doc/migration/next-intl)
+- [बंडल ऑप्टिमाइज़ेशन](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 STARS
 

package/blog/hi/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n बनाम @intlayer/vue-i18n: समान API, विभिन्न Bundle"
 description: जब एक Vue 3 ऐप अपनी vue-i18n कॉल को रखता है लेकिन @intlayer/vue-i18n compat adapter के माध्यम से उन्हें serve करता है तो क्या बदलता है। प्रति-पेज JavaScript, runtime size, component size और leakage को same Vite + Vue code पर मापा गया है, साथ ही adapter क्या रखता है, क्या ignore करता है और क्या replace नहीं कर सकता है।
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n बनाम @intlayer/vue-i18n | समान API, विभिन्न Bundle
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` एक compat adapter है: यह `vue-i18n` API (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) को expose करता है और इसे Intlayer द्वारा compiled dictionaries से serve करता है। आपकी `.vue` files नहीं बदलती हैं। जो `t("footer.github")` से bound है, वह बदलता है।
 
 यह लेख एक ही Vite + Vue 3 एप्लिकेशन पर इस स्वैप को मापता है, एक बार `vue-i18n` के साथ और एक बार एडेप्टर के साथ निर्मित। संख्याएँ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) से आती हैं। `vue-i18n` और Intlayer की तुलना लाइब्रेरी के रूप में करने के लिए, [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) और [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) पढ़ें। यह इस बारे में है कि जब आप अपने components को वैसे ही रखते हैं तो एडेप्टर क्या बदलता है।
@@ -105,6 +107,10 @@ const { t } = useI18n(_dicHash_footer);
 
 ### Vite + Vue 3 पर परिणाम
 
+वे मेट्रिक्स और लाइब्रेरी चुनें जिनकी आपको परवाह है:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (कोई i18n नहीं) | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ const { t } = useI18n(_dicHash_footer);
 - **Reactivity और page load.** Locale switching दोनों के लिए सस्ता है (1.5-2.8 ms); Vue की reactivity system एक बार जब messages मेमोरी में हों तो ऐसा बनाती है। Page load 13.6 ms से **9.3 ms** तक जाता है, जो 88 KB कम JavaScript parse करने के अनुरूप है।
 - **नेटिव पंक्तियों के बारे में।** `vue-intlayer` इस रन में `static` मोड में हर लोकेल को बंडल करता है और 3.9 KB रनटाइम के साथ 57.1 KB पर पहुंचता है; एडेप्टर के सिंक्रोनाइज़्ड डिक्शनरीज़ में कम विदेशी-लोकेल स्ट्रिंग्स थीं, इसलिए प्रति-पृष्ठ आंकड़ा कम है। नेटिव रनटाइम तीनों में सबसे हल्का रहता है, और इसका `.content.ts` मॉडल वह जगह है जहां SFC `<i18n>` ब्लॉक अपने समकक्ष को खोजते हैं।
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> पूरी तालिका, प्रत्येक लाइब्रेरी और रणनीति, [Vue बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/vue) में।
+
 ## संख्याएं क्यों बदलती हैं
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 `src/components/` में कुछ भी नहीं बदला, इसलिए लाभ इसी से आते हैं कि `useI18n` किससे बंधा है।
 
-**`vue-i18n` के साथ**, binding global instance है। `createI18n({ messages: { en, fr, ... } })` एक import है जो सब कुछ hold करता है; हर component जो `useI18n()` को call करता है वह सब कुछ तक पहुँच सकता है, इसलिए bundler instance के नीचे split नहीं कर सकता। Optimizing का मतलब है कि _आप_ `en.json` को route से split करें, एक router guard में `setLocaleMessage()` को call करें, और जैसे components move हों वैसे route-to-file map को सही रखें।
+**`vue-i18n` के साथ**, binding global instance है। `createI18n({ messages: { en, fr, ... } })` एक import है जो सब कुछ hold करता है; हर component जो `useI18n()` को call करता है वह सब कुछ तक पहुँच सकता है, इसलिए bundler instance के नीचे split नहीं कर सकता। Optimizing का मतलब है कि _आप_ `en.json` को route से split करें, एक router guard में `setLocaleMessage()` को call करें, और जैसे components move हों वैसे route-to-file map को सही रखें। अपव्यय एक साथ दो अक्षों पर बढ़ता है, पेज और लोकेल:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## शुरू करने से पहले जानने योग्य सीमाएं
 
-- **SFC `<i18n>` blocks को read नहीं किया जाता है।** यदि आपके messages components के अंदर हैं, तो उन्हें locale files में move करने की आवश्यकता है (या `.content.ts` में, जो types के साथ एक ही विचार है)।
-- **Runtime message loading gone है।** `setLocaleMessage()` और `mergeLocaleMessage()` warn करते हैं और return करते हैं। Runtime पर CMS से fetch किए गए translations को Intlayer के CMS की आवश्यकता है, या `intlayer pull` / `push` commands की।
-- **`messages` एक fallback है, free नहीं है।** `createI18n()` में JSON imports को रखने से bundle में 75 KB रहता है। एक बार `intlayer test` pass होने के बाद उन्हें delete करें।
-- **adapter native runtime नहीं है।** `vue-intlayer` के लिए 3.9 KB के मुकाबले 7.9 KB। एक बार जब हर component `useIntlayer` पर चला गया हो, तो इसे छोड़ दें।
+<AccordionGroup>
+<Accordion header="SFC <i18n> ब्लॉक नहीं पढ़े जाते">
+
+यदि आपके संदेश घटकों के भीतर हैं, तो उन्हें लोकेल फ़ाइलों में या उत्पन्न प्रकारों के साथ समान विचार वाले `.content.ts` में स्थानांतरित करने की आवश्यकता है।
+
+</Accordion>
+<Accordion header="रनटाइम संदेश लोडिंग हटा दी गई है">
+
+`setLocaleMessage()` और `mergeLocaleMessage()` चेतावनी देते हैं और वापस लौट जाते हैं। रनटाइम पर CMS से लाए गए अनुवादों के लिए [Intlayer CMS](https://intlayer.org/hi/doc/concept/cms) या `intlayer pull` / `push` कमांड की आवश्यकता होती है।
+
+</Accordion>
+<Accordion header="messages एक फ़ॉलबैक है, मुफ़्त नहीं">
+
+`createI18n()` में JSON आयात रखने से बंडल में 75 KB बना रहता है। `intlayer test` पास होने के बाद उन्हें हटा दें।
+
+</Accordion>
+<Accordion header="एडाप्टर नेटिव रनटाइम नहीं है">
+
+`vue-intlayer` के 3.9 KB के मुकाबले 7.9 KB। एक बार जब प्रत्येक घटक `useIntlayer` पर चला जाए, तो इसे हटा दें।
+
+</Accordion>
+</AccordionGroup>
 
 ## कौन सा कब उपयोग करें?
 
-- **`vue-i18n` पर बने रहें** यदि आपका app SFC `<i18n>` blocks पर निर्भर करता है, runtime `setLocaleMessage()` flows पर, या यदि 90 KB प्रति page आपके audience के लिए चिंता का विषय नहीं है।
-- **`@intlayer/vue-i18n` का उपयोग करें** यदि आप `vue-i18n` पर हैं और 88 KB, 23x छोटे components, 0% page leakage, typed keys और CI checks चाहते हैं बिना किसी `.vue` file को edit किए। यह एक existing `vue-i18n` codebase के लिए entry point है।
-- **Native पर जाएं (`vue-intlayer`)** नई projects के लिए, या एक बार adapter ने अपना काम कर दिया हो। इसके पास सबसे हल्का runtime (3.9 KB) और per-component `.content.ts` model है जो `<i18n>` blocks को typed content से replace करता है।
+<AccordionGroup>
+<Accordion header="vue-i18n पर बने रहें">
+
+आपका ऐप SFC `<i18n>` ब्लॉक, रनटाइम `setLocaleMessage()` प्रवाह पर निर्भर करता है, या प्रति पेज 90 KB आपके दर्शकों के लिए कोई चिंता का विषय नहीं है।
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n का उपयोग करें">
+
+आप `vue-i18n` पर हैं और बिना किसी `.vue` फ़ाइल को संपादित किए 88 KB की बचत, 23 गुना छोटे घटक, 0% पेज लीकेज, टाइप की गई कुंजियाँ और CI जांच चाहते हैं। यह मौजूदा `vue-i18n` कोडबेस के लिए प्रवेश बिंदु है।
+
+</Accordion>
+<Accordion header="नेटिव बनें (vue-intlayer)">
+
+नई परियोजनाओं के लिए, या एक बार जब एडाप्टर अपना काम कर ले। इसमें सबसे हल्का रनटाइम (3.9 KB) और प्रति-घटक `.content.ts` मॉडल है जो `<i18n>` ब्लॉक को टाइप की गई सामग्री से बदलता है। [Vue के साथ Intlayer](https://intlayer.org/hi/doc/environment/vite-and-vue) या [Nuxt के साथ](https://intlayer.org/hi/doc/environment/nuxt-and-vue) से शुरुआत करें।
+
+</Accordion>
+</AccordionGroup>
+
+## अक्सर पूछे जाने वाले प्रश्न
+
+<FAQ>
+
+<Question title="क्या मुझे अपनी .vue फ़ाइलों को संपादित करना होगा?">
+
+नहीं। बेंचमार्क बिल्ड ने केवल `vite.config.ts`, `intlayer.config.ts` और `src/i18n.ts` में `messages` आयात की एक पंक्ति को बदला। प्रत्येक `useI18n()`, `$t`, `v-t` और Options API कॉल साइट वैसी ही रही।
+
+</Question>
+
+<Question title="घटक का आकार 23 गुना छोटा क्यों है?">
+
+क्योंकि `useI18n()` वैश्विक इंस्टेंस तक पहुंचना बंद कर देता है। `createI18n({ messages })` प्रत्येक लोकेल के प्रत्येक संदेश को रखता है, इसलिए अलग से संकलित घटक 196 KB खींचता है। एडाप्टर के साथ यह केवल अपने स्वयं के शब्दकोश तक पहुंचता है: 8.4 KB।
+
+</Question>
+
+<Question title="d() और n() फ़ॉर्मेटिंग का क्या होगा?">
+
+बनाए रखा गया है। `createI18n()` को दिए गए `datetimeFormats` और `numberFormats` का सम्मान किया जाता है, जो नेटिव `Intl` API द्वारा समर्थित हैं। [दिनांक, समय और संख्या फ़ॉर्मेटिंग](https://intlayer.org/hi/blog/date-time-number-formatting-locales) देखें।
+
+</Question>
+
+<Question title="क्या यह Nuxt के साथ काम करता है?">
+
+`@intlayer/vue-i18n` Vite + Vue को लक्षित करता है। `@nuxtjs/i18n` के लिए, [Nuxt i18n संगतता एडाप्टर](https://intlayer.org/hi/doc/compatibility/nuxtjs-i18n) का उपयोग करें, और नेटिव सेटअप के लिए [Nuxt के साथ Intlayer](https://intlayer.org/hi/doc/environment/nuxt-and-vue) देखें।
+
+</Question>
+
+<Question title="क्या मैं घटक दर घटक माइग्रेट कर सकता हूँ?">
+
+हाँ। कोई भी घटक सह-स्थित सामग्री फ़ाइल के साथ `useI18n()` से `useIntlayer("footer")` पर स्विच कर सकता है। JSON और `.content.ts` शब्दकोश सह-अस्तित्व में रहते हैं और विलीन हो जाते हैं।
+
+</Question>
+
+</FAQ>
 
 ## संबंधित तुलनाएं
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (features और DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (libraries, same benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (same adapter series)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (same adapter series)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (same adapter series)
-- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Compat adapter reference: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+समान एडाप्टर श्रृंखला:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/hi/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/hi/blog/lingui-vs-intlayer-lingui)
+
+लाइब्रेरी की आमने-सामने तुलना:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/hi/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/hi/blog/how-to-pick-vue-i18n-library)
+
+संदर्भ दस्तावेज़:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/hi/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/hi/doc/compatibility/nuxtjs-i18n)
+- [माइग्रेशन गाइड: vue-i18n से Intlayer](https://intlayer.org/hi/doc/migration/vue-i18n)
+- [Vue बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/vue)
+- [बंडल अनुकूलन](https://intlayer.org/hi/doc/concept/bundle-optimization) और [Intlayer कंपाइलर](https://intlayer.org/hi/doc/compiler)
+- [विज़ुअल एडिटर](https://intlayer.org/hi/doc/concept/editor), [CMS](https://intlayer.org/hi/doc/concept/cms) और [AI अनुवाद](https://intlayer.org/hi/doc/concept/auto-fill)
 
 ## निष्कर्ष
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 [Benchmark Bloom repository](https://github.com/intlayer-org/benchmark-bloom) में सभी raw data, test apps और scripts हैं। इसे अपने आप चलाएं।
 
-अधिक विवरण के लिए ['Why Intlayer?' doc](https://intlayer.org/doc/why) देखें।
+अधिक विवरण के लिए ['Why Intlayer?' doc](https://intlayer.org/hi/doc/why) देखें।