@intlayer/docs 5.5.10 → 5.5.12

package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md

@@ -0,0 +1,285 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: next-i18next vs next-intl vs Intlayer
+description: Next.js एप्लिकेशन के लिए next-i18next के साथ next-intl और Intlayer के साथ एक नेटवर्क ऐप की अंतर्राष्ट्रीयकरण (i18n) की तुलना करें
+keywords:
+  - next-intl
+  - next-i18next
+  - Intlayer
+  - अंतर्राष्ट्रीयकरण
+  - दस्तावेज़ीकरण
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - next-i18next-vs-next-intl-vs-intlayer
+---
+
+# next-i18next VS next-intl VS Intlayer | Next.js अंतर्राष्ट्रीयकरण (i18n)
+
+नीचे **तीन लोकप्रिय पुस्तकालयों** की संक्षिप्त तुलना दी गई है जो Next.js एप्लिकेशन के अंतर्राष्ट्रीयकरण (i18n) के लिए हैं: **next-intl**, **next-i18next**, और **Intlayer**।
+
+यह दस्तावेज़ मुख्य मानदंडों पर प्रकाश डालता है:
+
+1. **आर्किटेक्चर** (अनुवादों को उनके घटकों के करीब रखना)
+2. **TypeScript समर्थन**
+3. **गायब अनुवादों का प्रबंधन**
+4. **सर्वर घटकों का समर्थन**
+5. **Next.js के लिए उन्नत रूटिंग और मिडलवेयर**
+6. **सेटअप की सादगी**
+
+यह मार्गदर्शिका **Intlayer** पर एक **गहन नज़र** भी प्रदान करती है, यह दिखाते हुए कि यह एक मजबूत विकल्प क्यों हो सकता है, विशेष रूप से Next.js 13+ के लिए, जिसमें **App Router** और **Server Components** शामिल हैं।
+
+---
+
+## प्रत्येक पुस्तकालय का अवलोकन
+
+### 1. next-intl
+
+**मुख्य ध्यान**: स्थानीयकरण के लिए हल्के दृष्टिकोण के साथ त्वरित और आसान सेटअप।
+
+- **आर्किटेक्चर**: एकल फ़ोल्डर (जैसे, `locales/`) में अनुवादों को सह-स्थान देने को प्रोत्साहित करता है लेकिन कई रणनीतियों की अनुमति भी देता है। "प्रत्येक घटक के लिए अनुवाद" आर्किटेक्चर को सख्ती से लागू नहीं करता है।
+- **TypeScript समर्थन**: आधारभूत TypeScript एकीकरण। कुछ प्रकार की श्रेष्ठताएँ मौजूद हैं, लेकिन ये आपके अनुवाद फ़ाइलों से TypeScript परिभाषाओं को स्वचालित रूप से उत्पन्न करने पर केंद्रित नहीं हैं।
+- **गायब अनुवाद**: आधारभूत फ़ॉलबैक तंत्र। डिफ़ॉल्ट रूप से, एक कुंजी या डिफ़ॉल्ट स्थानीयकरण स्ट्रिंग पर वापस जाता है। उन्नत गायब अनुवाद परीक्षणों के लिए किसी प्रकार का सुसंगत उपकरण नहीं है।
+- **सर्वर घटकों का समर्थन**: सामान्य तौर पर Next.js 13+ के साथ काम करता है, लेकिन पैटर्न गहरे सर्वर-साइट उपयोग के लिए कम विशेषज्ञ है (जैसे, जटिल गतिशील रूटिंग के साथ सर्वर घटक)।
+- **रूटिंग और मिडलवेयर**: मिडलवेयर समर्थन संभव है लेकिन सीमित। आमतौर पर Next.js `Middleware` पर स्थानीयकरण पहचान के लिए या स्थानीयकरण पथ को फिर से लिखने के लिए मैनुअल कॉन्फ़िगरेशन पर भरोसा करता है।
+- **सेटअप की सादगी**: बहुत सीधा है। न्यूनतम बॉयलरप्लेट की आवश्यकता है।
+
+**का उपयोग करें जब**: आप एक सरल दृष्टिकोण चाहते हैं या अपने अनुवादों का प्रबंधन करने में आरामदायक हैं (जैसे कि एक फ़ोल्डर JSON फ़ाइलों के साथ)।
+
+---
+
+### 2. next-i18next
+
+**मुख्य ध्यान**: `i18next` का उपयोग करने वाला एक समय-परीक्षणित समाधान, जो Next.js परियोजनाओं में व्यापक रूप से अपनाया गया है।
+
+- **आर्किटेक्चर**: अक्सर `public/locales` फ़ोल्डर में अनुवादों को व्यवस्थित करता है। विशेष रूप से अनुवादों को "निकट" रखने के लिए डिज़ाइन नहीं किया गया है, हालांकि आप मैन्युअल रूप से एक अलग ढाँचा अपना सकते हैं।
+- **TypeScript समर्थन**: उचित TypeScript कवरेज लेकिन टाइपेड अनुवादों और टाइपेड हुक के लिए कस्टम कॉन्फ़िगरेशन की आवश्यकता होती है।
+- **गायब अनुवाद**: i18next इंटरपोलेशन/फ़ॉलबैक प्रदान करता है। हालाँकि, गायब अनुवाद पहचान अक्सर अतिरिक्त सेटअप या थर्ड-पार्टी प्लगइन्स की आवश्यकता होती है।
+- **सर्वर घटकों का समर्थन**: Next.js 13 के साथ बुनियादी उपयोग का दस्तावेज़ है, लेकिन जटिल उपयोग (जैसे, सर्वर घटकों के साथ गहरे एकीकरण, गतिशील रूट जेनरेशन) कठिन हो सकता है।
+- **रूटिंग और मिडलवेयर**: स्थानीयकरण उपपथों के लिए Next.js `Middleware` और पुनर्लेखन पर भारी निर्भर करता है। अधिक जटिल सेटअप के लिए, आपको उन्नत i18next कॉन्फ़िगरेशन में गोताखोरी करने की आवश्यकता हो सकती है।
+- **सेटअप की सादगी**: i18next का उपयोग करने वाले लोगों के लिए परिचित दृष्टिकोण। हालाँकि, जब उन्नत i18n सुविधाओं (नेमस्पेस, कई फ़ॉलबैक स्थान) की आवश्यकता होती है, तो यह और अधिक बॉयलरप्लेट-गहन हो सकता है।
+
+**का उपयोग करें जब**: आप पहले से ही `i18next` पारिस्थितिकी तंत्र के लिए प्रतिबद्ध हैं या आपके पास मौजूदा i18next-आधारित अनुवाद हैं।
+
+---
+
+### 3. Intlayer
+
+**मुख्य ध्यान**: Next.js **App Router** (12, 13, 14, और 15) के लिए विशेष रूप से अनुकूलित एक आधुनिक, ओपन-सोर्स i18n पुस्तकालय जिसमें **Server Components** और **Turbopack** का अंतर्निहित समर्थन है।
+
+#### प्रमुख लाभ
+
+1. **आर्किटेक्चर**
+
+   - **अनुवादों को उनके घटकों के ठीक बगल में रखने** को प्रोत्साहित करता है। प्रत्येक पृष्ठ या घटक में अपनी स्वयं की `.content.ts` (या JSON) फ़ाइल हो सकती है, अब विशाल अनुवाद फ़ोल्डर के माध्यम से बिखरकर खोजने की आवश्यकता नहीं है।
+   - यह आपके कोड को अधिक **मॉड्यूलर और बनाए रखने योग्य** बनाता है, विशेष रूप से बड़े कोड बेस में।
+
+2. **TypeScript समर्थन**
+
+   - **स्वचालित रूप से उत्पन्न प्रकार की परिभाषाएँ**: जिस क्षण आप अपनी सामग्री को परिभाषित करते हैं, Intlayer उन प्रकारों को उत्पन्न करता है जो ऑटोकम्पलीट को पावर देते हैं और अनुवाद संबंधित त्रुटियों को पकड़ते हैं।
+   - गायब कुंजियों जैसी रनटाइम में त्रुटियों को कम करता है और आपके IDE में सीधे उन्नत **ऑटोकम्पलीट** प्रदान करता है।
+
+3. **गायब अनुवादों का प्रबंधन**
+
+   - निर्माण के दौरान, Intlayer **गायब अनुवाद कुंजियों का पता लगा सकता है** और चेतावनियाँ या त्रुटियाँ फेंक सकता है।
+   - यह सुनिश्चित करता है कि आप कभी भी अनुवादों के बीच गायब पाठ के साथ शिप न करें।
+
+4. **सर्वर घटकों के लिए ऑप्टिमाइज्ड**
+
+   - Next.js **App Router** और नए **Server Components** पैराजाइम के साथ पूरी तरह से संगत।
+   - **सर्वर संदर्भ** को **आइसोलेट** करने के लिए विशेषज्ञ प्रदाता (`IntlayerServerProvider`, `IntlayerClientProvider`) प्रदान करता है (Next.js 13+ के साथ काम करते समय महत्वपूर्ण)।
+
+5. **उन्नत रूटिंग और मिडलवेयर**
+
+   - [**`intlayerMiddleware`**](#) के लिए एक समर्पित फ़ाइल है जो **स्वचालित स्थानीयकरण पहचान** (कुकीज़ या ब्राउज़र हैडर के माध्यम से) और उन्नत रूट जेनरेशन करती है।
+   - न्यूनतम कॉन्फ़िगरेशन के साथ स्थानीयकृत पथों को गतिशील रूप से संभालता है (जैसे, `/en-US/about` बनाम `/fr/about`)।
+   - वैकल्पिक भाषा लिंक बनाने के लिए `getMultilingualUrls` जैसी सहायक विधियाँ प्रदान करता है (**SEO** के लिए शानदार)।
+
+6. **सरलीकृत सेटअप**
+   - आपकी स्थानीयताओं, डिफ़ॉल्ट स्थानीयता, और एकीकरण प्राथमिकताओं को परिभाषित करने के लिए एकल कॉन्फ़िग फ़ाइल (`intlayer.config.ts`)।
+   - एक रैपर प्लगइन `withIntlayer(nextConfig)` जो आपके सभी पर्यावरण चर और आपकी सामग्री के लिए वॉचर को **इंजेक्ट** करता है।
+   - **कोई बड़ा फ़ॉलबैक कॉन्फ़िगरेशन नहीं**, सिस्टम को न्यूनतम घर्षण के साथ "बस काम करना" के लिए बनाया गया है।
+
+> **निचोड़**: Intlayer एक आधुनिक समाधान है जो **सर्वश्रेष्ठ प्रथाओं को बढ़ावा देना चाहता है**: **प्रत्येक React घटक के पास अनुवादों को करीब रखते हुए**, और **शक्तिशाली TS समर्थन** और **आसान सर्वर-साइड** उपयोग प्रदान करना, जबकि **बॉयलरप्लेट को बड़े पैमाने पर कम करना**।
+
+---
+
+## साइड-बाय-साइड फीचर तुलना
+
+| **विशेषता**                    | **next-intl**                               | **next-i18next**                                | **Intlayer**                               |
+| ------------------------------ | ------------------------------------------- | ----------------------------------------------- | ------------------------------------------ |
+| **घटकों के निकट अनुवाद रखें**  | आंशिक – सामान्यतः एक स्थानीयकरण फ़ोल्डर     | डिफ़ॉल्ट नहीं – अक्सर `public/locales`          | **हां – अनुशंसित और सरल**                  |
+| **TypeScript ऑटो उत्पन्न**     | आधारभूत TS परिभाषाएँ                        | आधारभूत TS समर्थन                               | **हां – उन्नत बॉक्स से बाहर**              |
+| **गायब अनुवादों का पता लगाना** | अधिकांशतः फ़ॉलबैक स्ट्रिंग                  | अधिकांशतः फ़ॉलबैक स्ट्रिंग                      | **हां – निर्माण के समय जांच**              |
+| **सर्वर घटकों का समर्थन**      | काम करता है लेकिन विशेषज्ञ नहीं             | समर्थित लेकिन जटिल हो सकता है                   | **विशेषज्ञ प्रदाताओं के साथ पूर्ण समर्थन** |
+| **रूटिंग और मिडलवेयर**         | Next मिडलवेयर के साथ मैन्युअल रूप से एकीकृत | पुनर्लेखन कॉन्फ़िग के माध्यम से प्रदान किया गया | **समर्पित i18n मिडलवेयर + उन्नत हुक**      |
+| **सेटअप की जटिलता**            | सरल, न्यूनतम कॉन्फ़िगरेशन                   | पारंपरिक, उन्नत उपयोग के लिए जटिल हो सकता है    | **एक कॉन्फ़िग फ़ाइल और प्लगइन**            |
+
+---
+
+## Intlayer क्यों?
+
+**Next.js App Router** (संस्करण 13, 14, या 15) पर आधारित टीमों के लिए जो **सर्वर घटकों** के साथ काम कर रही हैं, Intlayer प्रदान करता है:
+
+1. **एक सरलीकृत आर्किटेक्चर**
+
+   - प्रत्येक रूट या घटक अपने अनुवादों को रखता है। यह स्पष्टता और बनाए रखने की सुविधा को बढ़ावा देता है।
+
+2. **शक्तिशाली TypeScript एकीकरण**
+
+   - आपको कम्पाइलर-स्तरीय सुरक्षा मिलती है, "टाइपो-भरे" या गायब अनुवाद कुंजियों से बचना।
+
+3. **वास्तविक गायब अनुवाद चेतावनियाँ**
+
+   - यदि आप एक कुंजी या भाषा के अनुवाद को भूल जाते हैं, तो आपको निर्माण के समय चेतावनी दी जाएगी (पूर्ण UI के साथ शिप करने के बजाय)।
+
+4. **इन-बिल्ट उन्नत रूटिंग**
+
+   - स्वचालित स्थानीयकरण पहचान, गतिशील मार्ग निर्माण, और आसान स्थानीयकृत URL प्रबंधन शामिल हैं।
+   - मानक `intlayerMiddleware` को गहरी कस्टम पुनर्लेखन की आवश्यकता नहीं होती है।
+
+5. **एक-स्टॉप सेटअप**
+
+   - न्यूनतम बॉयलरप्लेट: बस अपने `intlayer.config.ts` को परिभाषित करें, `next.config` को `withIntlayer` के साथ लपेटें, और आधिकारिक मिडलवेयर जोड़ें।
+   - दोनों **सर्वर** और **क्लाइंट** घटकों के लिए स्पष्ट, सीधी उपयोगिता `IntlayerServerProvider` और `IntlayerClientProvider` के माध्यम से।
+
+6. **SEO के अनुकूल**
+   - अंतर्निहित सहायक (`getMultilingualUrls`, `hrefLang` गुण, आदि) SEO-अनुपालन पृष्ठों और साइटमैप बनाने को आसान बनाते हैं।
+
+---
+
+## उदाहरण: Intlayer कार्रवाई में
+
+नीचे Next.js 15 परियोजना में Intlayer का उपयोग करके एक _बहुत_ संक्षिप्त स्निपेट दर्शाया गया है। पूर्ण विवरण और कोड उदाहरणों के लिए, [पूर्ण Intlayer गाइड देखें](#)。
+
+<details>
+<summary>स्टेप-बाय-स्टेप उदाहरण</summary>
+
+1. **स्थापना और कॉन्फ़िगर करें**
+
+   ```bash
+   npm install intlayer next-intlayer
+   ```
+
+   ```ts
+   // intlayer.config.ts
+   import { Locales, type IntlayerConfig } from "intlayer";
+
+   const config: IntlayerConfig = {
+     internationalization: {
+       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+       defaultLocale: Locales.ENGLISH,
+     },
+   };
+   export default config;
+   ```
+
+2. **प्लगइन का उपयोग करें**
+
+   ```ts
+   // next.config.mjs
+   import { withIntlayer } from "next-intlayer/server";
+
+   /** @type {import('next').NextConfig} */
+   const nextConfig = {};
+
+   export default withIntlayer(nextConfig);
+   ```
+
+3. **मिडलवेयर जोड़ें**
+
+   ```ts
+   // src/middleware.ts
+   export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
+
+   export const config = {
+     matcher:
+       "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
+   };
+   ```
+
+4. **एक स्थानीयकृत लेआउट बनाएँ**
+
+   ```tsx
+   // src/app/[locale]/layout.tsx
+   import { getHTMLTextDir } from "intlayer";
+   import { NextLayoutIntlayer } from "next-intlayer";
+
+   const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
+     const { locale } = params;
+     return (
+       <html lang={locale} dir={getHTMLTextDir(locale)}>
+         <body>{children}</body>
+       </html>
+     );
+   };
+
+   export { generateStaticParams } from "next-intlayer";
+   export default LocaleLayout;
+   ```
+
+5. **सामग्री की घोषणा और उपयोग करें**
+
+   ```tsx
+   // src/app/[locale]/page.content.ts
+   import { t } from "intlayer";
+
+   export default {
+     key: "page",
+     content: {
+       getStarted: {
+         main: t({
+           en: "Get started by editing",
+           fr: "Commencez par éditer",
+           es: "Comience por editar",
+         }),
+         pageLink: "src/app/page.tsx",
+       },
+     },
+   };
+   ```
+
+   ```tsx
+   // src/app/[locale]/page.tsx
+   import { IntlayerServerProvider } from "next-intlayer/server";
+   import { IntlayerClientProvider, useIntlayer } from "next-intlayer";
+
+   const PageContent = () => {
+     const { content } = useIntlayer("page");
+     return (
+       <>
+         <p>{content.getStarted.main}</p>
+         <code>{content.getStarted.pageLink}</code>
+       </>
+     );
+   };
+
+   export default function Page({ params }) {
+     return (
+       <IntlayerServerProvider locale={params.locale}>
+         <IntlayerClientProvider locale={params.locale}>
+           <PageContent />
+         </IntlayerClientProvider>
+       </IntlayerServerProvider>
+     );
+   }
+   ```
+
+   </details>
+
+---
+
+## निष्कर्ष
+
+प्रत्येक समाधान, **next-intl**, **next-i18next**, और **Intlayer**, बहुभाषी Next.js परियोजनाओं के लिए प्रभावी साबित हुआ है। हालाँकि, **Intlayer** आगे बढ़ता है:
+
+- **घटक-स्तरीय अनुवाद आर्किटेक्चर** को प्रोत्साहित करना
+- **Next.js 13+ और Server Components** के साथ सहज एकीकरण
+- **शक्तिशाली TypeScript** स्वचालित उत्पन्न सुरक्षा के लिए
+- निर्माण के समय **गायब अनुवादों** का प्रबंधन करना
+- उन्नत रूटिंग और मिडलवेयर के साथ **सरल, एकल कॉन्फ़िगरेशन** दृष्टिकोण प्रदान करना
+
+यदि आप **आधुनिक** i18n सुविधाओं की तलाश कर रहे हैं जो Next.js App Router के लिए अनुकूलित हैं और एक **पूर्ण रूप से टाइप** अनुभव की तलाश कर रहे हैं बिना मैन्युअल रूप से फ़ॉलबैक लॉजिक, रूट पुनर्लेखन, या जटिल निर्माण चरणों को तैयार किए, तो **Intlayer** एक आकर्षक विकल्प है। यह न केवल आपके सेटअप के समय को कम करता है, बल्कि आपकी टीम के लिए अनुवादों के लिए एक अधिक बनाए रखने योग्य, स्केलेबल दृष्टिकोण सुनिश्चित करता है।

package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md

@@ -0,0 +1,194 @@
+---
+createdAt: 2025-01-02
+updatedAt: 2025-06-29
+title: react-i18n vs react-intl vs Intlayer
+description: React एप्लिकेशन के लिए react-i18next के साथ next-intl और Intlayer के साथ एक नेटवर्क ऐप की अंतर्राष्ट्रीयकरण (i18n) की तुलना करें
+keywords:
+  - next-intl
+  - react-i18next
+  - Intlayer
+  - अंतर्राष्ट्रीयकरण
+  - दस्तावेज़ीकरण
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - react-i18next-vs-react-intl-vs-intlayer
+---
+
+# React-Intl VS React-i18next VS Intlayer | React अंतर्राष्ट्रीयकरण (i18n)
+
+नीचे **React-Intl**, **React-i18next**, और **Intlayer** के लिए तीन लोकप्रिय i18n (अंतर्राष्ट्रीयकरण) पुस्तकालयों की संक्षिप्त तुलना दी गई है। प्रत्येक पुस्तकालय आपके React एप्लिकेशन में बहुभाषी समर्थन को एकीकृत करने के लिए अद्वितीय सुविधाएँ और कार्यप्रणालियाँ प्रदान करता है। इसे पढ़ने के बाद, आपको यह तय करने में सक्षम होना चाहिए कि कौन सा समाधान आपकी आवश्यकताओं को सबसे अच्छे ढंग से पूरा करता है।
+
+---
+
+## 1. परिचय
+
+React अनुप्रयोगों में अंतर्राष्ट्रीयकरण (i18n) कई तरीकों से प्राप्त किया जा सकता है। यहाँ प्रस्तुत तीन पुस्तकालयों में अलग-अलग डिज़ाइन दर्शन, सुविधाओं का सेट, और सामुदायिक समर्थन है:
+
+1. **React-Intl**
+2. **React-i18next**
+3. **Intlayer**
+
+नीचे, आप प्रत्येक समाधान का एक अवलोकन पाएंगे, उसके बाद एक सुविधा तुलना, फायदे और नुकसान, और उदाहरण उपयोग के मामले।
+
+---
+
+## 2. React-Intl
+
+### अवलोकन
+
+[**React-Intl**](https://formatjs.io/docs/react-intl/) [FormatJS](https://formatjs.io/) सूट का एक हिस्सा है। यह संदेश स्वरूपण, बहुवचन, दिनांक/समय, और संख्या स्वरूपण को संभालने के लिए **API और घटकों** का एक शक्तिशाली सेट प्रदान करता है। React-Intl का व्यापक रूप से उद्यम अनुप्रयोगों में उपयोग होता है, मुख्य रूप से क्योंकि यह एक पारिस्थितिकी तंत्र का हिस्सा है जो संदेश वाक्यविन्यास और स्वरूपण को मानकीकरण करता है।
+
+### प्रमुख सुविधाएँ
+
+- **ICU संदेश वाक्यविन्यास**: संदेश अंतःक्रिया, बहुवचन, और अधिक के लिए एक व्यापक वाक्यविन्यास प्रदान करता है।
+- **स्थानीयकृत स्वरूपण**: दिनांक, समय, संख्या, और सापेक्ष समय को स्थानीय अनुसार स्वरूपित करने के लिए निर्मित उपयोगिताएँ।
+- **घोषणाशील घटक**: JSX में निर्बाध उपयोग के लिए `<FormattedMessage>`, `<FormattedNumber>`, `<FormattedDate>`, आदि को प्रकट करता है।
+- **समृद्ध पारिस्थितिकी तंत्र**: संदेश निकालने, प्रबंधन, और संकलन के लिए FormatJS उपकरणों (जैसे, [babel-plugin-react-intl](https://formatjs.io/docs/tooling/babel-plugin/)) के साथ अच्छी तरह से एकीकृत करता है।
+
+### सामान्य कार्यप्रणाली
+
+1. **संदेश कैटलॉग परिभाषित करें** (आम तौर पर प्रत्येक स्थानीय के लिए JSON फ़ाइलें)।
+2. अपने ऐप को `<IntlProvider locale="en" messages={messages}>` में लपेटें।
+3. `<FormattedMessage id="myMessage" defaultMessage="Hello world" />` का उपयोग करें या अनुवाद स्ट्रिंग्स तक पहुंचने के लिए `useIntl()` हुक का उपयोग करें।
+
+### फायदे
+
+- अच्छी तरह से स्थापित और कई उत्पादन वातावरणों में उपयोग किया जाता है।
+- बहुवाचन, लिंग, समय क्षेत्र, और अधिक सहित उन्नत संदेश स्वरूपण।
+- संदेश निकालने और संकलन के लिए मजबूत उपकरण समर्थन।
+
+### नुकसान
+
+- **ICU संदेश स्वरूप** के साथ परिचितता की आवश्यकता होती है, जोverbose हो सकता है।
+- केवल स्ट्रिंग-आधारित से अधिक जटिल अनुवादों को संभालने में आसान नहीं है।
+
+---
+
+## 3. React-i18next
+
+### अवलोकन
+
+[**React-i18next**](https://react.i18next.com/) [i18next](https://www.i18next.com/) का एक React एक्सटेंशन है, जो सबसे लोकप्रिय JavaScript i18n फ्रेमवर्क में से एक है। यह **रनटाइम अनुवादों**, लेज़ी लोडिंग, और भाषा पहचान के लिए **विशेषाधिकारित सुविधाएँ** प्रदान करता है, जिससे यह विभिन्न उपयोग मामलों के लिए अत्यधिक लचीला बनाता है।
+
+### प्रमुख सुविधाएँ
+
+- **लचीला अनुवाद संरचना**: ICU जैसी एकल स्वरूप में बंधा नहीं है। आप JSON में अनुवाद संग्रह कर सकते हैं, अंतःक्रिया, बहुवचन आदि का उपयोग कर सकते हैं।
+- **गतिशील भाषा स्विचिंग**: इन-बिल्ट भाषा पहचानकर्ता प्लगइन्स और रनटाइम अपडेट।
+- **नस्टेड और संरचित अनुवाद**: आप JSON के भीतर आसानी से अनुवाद नस्ट कर सकते हैं।
+- **विशाल प्लगइन पारिस्थितिकी तंत्र**: पहचान के लिए (ब्राउज़र, पथ, उपडोमेन, आदि), संसाधन लोडिंग, कैशिंग, और अधिक।
+
+### सामान्य कार्यप्रणाली
+
+1. **`i18next` और `react-i18next` स्थापित करें।**
+2. **अनुवादों (JSON) को लोड करने और भाषा पहचान या फ़ॉलबैक सेट करने के लिए i18n को कॉन्फ़िगर करें।**
+3. अपने ऐप को `I18nextProvider` में लपेटें।
+4. अनुवाद प्रदर्शित करने के लिए `useTranslation()` हुक या `<Trans>` घटक का उपयोग करें।
+
+### फायदे
+
+- अत्यधिक **लचीला** और विशेषता-समृद्ध।
+- बहुत सक्रिय समुदाय और प्लगइन्स का बड़ा पारिस्थितिकी तंत्र।
+- अनुवादों के **गतिशील लोडिंग** की सुविधा (जैसे, सर्वर से, मांग पर)।
+
+### नुकसान
+
+- **कॉन्फ़िगरेशन verbose हो सकता है**, विशेषकर यदि आपके पास अधिक उन्नत आवश्यकताएँ हों।
+- यदि आप मजबूत प्रकार के अनुवादों को प्राथमिकता देते हैं, तो आपको अतिरिक्त TypeScript सेटअप की आवश्यकता हो सकती है।
+
+---
+
+## 4. Intlayer
+
+### अवलोकन
+
+[**Intlayer**](https://github.com/aymericzip/intlayer) एक नया, ओपन-सोर्स i18n पुस्तकालय है जो **घटक-स्तरीय सामग्री घोषणाओं**, प्रकार की सुरक्षा, और **गतिशील मार्गनिर्देशन** पर केंद्रित है। यह आधुनिक React कार्यप्रणालियों के लिए डिज़ाइन किया गया है, जो **Create React App** और **Vite** सेटअप दोनों का समर्थन करता है। इसमें **स्थानीयकृत मार्गनिर्देशन** और अनुवादों के लिए **स्वचालित प्रकार के TypeScript** जैसी उन्नत सुविधाएँ भी शामिल हैं।
+
+### प्रमुख सुविधाएँ
+
+- **घोषणाशील सामग्री फ़ाइलें**: प्रत्येक घटक या मॉड्यूल अपने अनुवादों को समर्पित `.content.tsx` या `.content.json` फ़ाइलों में घोषित कर सकता है, जिससे सामग्री उस स्थान के करीब रहती है जहाँ इसका उपयोग किया जाता है।
+- **निर्मित मार्गनिर्देशन और मिडलवेयर**: स्थानीयकृत मार्गनिर्देशन के लिए वैकल्पिक मॉड्यूल (जैसे, `/en/about`, `/fr/about`) और उपयोगकर्ता की स्थानीय पहचान के लिए सर्वर मिडलवेयर।
+- **स्वचालित रूप से जनरेट की गई TypeScript प्रकार**: ऑटोकंप्लीशन और संकलन-समय की त्रुटि पहचान जैसी सुविधाओं के साथ प्रकार की सुरक्षा सुनिश्चित करता है।
+- **गतिशील और समृद्ध अनुवाद**: अनुवाद में JSX/TSX शामिल कर सकते हैं, जिससे अधिक जटिल उपयोग के मामलों (जैसे, लिंक, बोल्ड टेक्स्ट, अनुवाद में आइकन) की अनुमति मिलती है।
+
+### सामान्य कार्यप्रणाली
+
+1. **`intlayer` और `react-intlayer` स्थापित करें।**
+2. **लभ्य स्थानीय और डिफ़ॉल्ट स्थानीय को परिभाषित करने के लिए `intlayer.config.ts` बनाएँ।**
+3. **Intlayer CLI** या प्लगइन का उपयोग करके **सामग्री घोषणाओं को संकलित** करें।
+4. अपने ऐप को `<IntlayerProvider>` में लपेटें और `useIntlayer("keyName")` के साथ सामग्री प्राप्त करें।
+
+### फायदे
+
+- **TypeScript-फ्रेंडली** जिसमें निर्मित प्रकारों की पीढ़ी और त्रुटि-की पहचान शामिल है।
+- **समृद्ध सामग्री** संभव (जैसे, अनुवादों के रूप में React नोड्स को पास करना)।
+- **स्थानीयकृत मार्गनिर्देशन** बिना किसी समस्या के।
+- आसान सेटअप के लिए लोकप्रिय निर्माण उपकरणों (CRA, Vite) के साथ एकीकृत।
+
+### नुकसान
+
+- React-Intl या React-i18next की तुलना में अभी भी **सापेक्ष रूप से नया** है।
+- "घटक-स्तरीय सामग्री घोषणाओं" पर भारी ध्यान केंद्रित, यह सामान्य .json कैटलॉग से बदलाव हो सकता है।
+- अधिक स्थापित पुस्तकालयों की तुलना में छोटा पारिस्थितिकी तंत्र और समुदाय।
+
+---
+
+## 5. विशेषता तुलना
+
+| **विशेषता**               | **React-Intl**                                                         | **React-i18next**                                                                                                        | **Intlayer**                                                                                                                                         |
+| ------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **प्राथमिक उपयोग मामला**  | स्ट्रिंग-आधारित अनुवाद, दिनांक/संख्या स्वरूपण, ICU संदेश वाक्यविन्यास  | पूर्ण-विशेषता वाला i18n सरल गतिशील स्विचिंग, नस्टिंग, प्लगइन पारिस्थितिकी तंत्र                                          | प्रकार- सुरक्षित अनुवादों के साथ घोषणाशील सामग्री, स्थानीयकृत मार्गनिर्देशन, और वैकल्पिक सर्वर मिडलवेयर                                              |
+| **कार्यप्रणाली**          | `<IntlProvider>` और FormatJS संदेश घटकों का उपयोग                      | `I18nextProvider` और `useTranslation()` हुक का उपयोग                                                                     | `<IntlayerProvider>` और `useIntlayer()` हुक का उपयोग सामग्री घोषणाओं के साथ                                                                          |
+| **स्थानीयकरण प्रारूप**    | ICU-आधारित स्ट्रिंग्स (JSON या JavaScript कैटलॉग)                      | JSON संसाधन फ़ाइलें (या कस्टम लोडर)। ICU प्रारूप वैकल्पिक i18next प्लगइन के माध्यम से                                    | `.content.[ts/js/tsx]` या JSON घोषणाएँ; इसमें स्ट्रिंग्स या React घटक शामिल हो सकते हैं                                                              |
+| **मार्गनिर्देशन**         | बाहरी रूप से संभाला जाता है (निर्मित स्थानीयकृत मार्गनिर्देशन नहीं है) | i18next प्लगइन्स (पथ, उपडोमेन पहचान, आदि) के साथ बाहरी रूप से संभाला जाता है                                             | निर्मित स्थानीयकृत मार्गनिर्देशन समर्थन (जैसे, `/en/about`, `/fr/about`), साथ ही वैकल्पिक सर्वर मिडलवेयर (SSR/Vite के लिए)                           |
+| **TypeScript समर्थन**     | अच्छा (आधिकारिक पैकेजों के लिए प्रकार)                                 | अच्छा लेकिन यदि आप सख्त जांच करना चाहते हैं तो टाइप किए गए अनुवादों के लिए अतिरिक्त कॉन्फ़िगरेशन आवश्यक है               | उत्कृष्ट (सामग्री कुंजियों और अनुवादों के लिए स्वचालित रूप से जनरेट की गई प्रकार परिभाषाएँ)                                                          |
+| **बहुवचन और स्वरूपण**     | उन्नत: निर्मित दिनांक/समय/संख्या स्वरूपण, बहुवचन/लिंग समर्थन           | कॉन्फ़िगर करने योग्य बहुवचन। दिनांक/समय का स्वरूप आमतौर पर बाहरी पुस्तकालयों या i18next प्लगइन के माध्यम से किया जाता है | मानक JavaScript Intl या सामग्री में तर्क को एम्बेड करने पर निर्भर हो सकता है। FormatJS की तरह विशेषीकृत नहीं है, लेकिन सामान्य मामलों को संभालता है। |
+| **समुदाय & पारिस्थितिकी** | बड़ा, FormatJS पारिस्थितिकी तंत्र का एक हिस्सा                         | बहुत बड़ा, अत्यधिक सक्रिय, कई प्लगइन्स (पहचान, कैशिंग, ढाँचे)                                                            | छोटा लेकिन बढ़ता हुआ; ओपन-सोर्स, आधुनिक दृष्टिकोण                                                                                                    |
+| **सीखने का झुकाव**        | मध्यम (ICU संदेश वाक्यविन्यास, FormatJS के नियमों को सीखना)            | कम से मध्यम (सीधे उपयोग में, लेकिन उन्नत कॉन्फ़िगरेशन verbose हो सकता है)                                                | मध्यम (सामग्री घोषणाओं और विशिष्ट निर्माण चरणों का विचार)                                                                                            |
+
+---
+
+## 6. कब चुनें प्रत्येक
+
+1. **React-Intl**
+
+   - आपको दिनांक/समय/संख्या के लिए **शक्तिशाली स्वरूपण** और मजबूत **ICU संदेश वाक्यविन्यास** की आवश्यकता है।
+   - आप अनुवादों के लिए अधिक “**मानक-आधारित**” दृष्टिकोण को पसंद करते हैं।
+   - आपको स्थानीयकृत मार्गनिर्देशन या मजबूत प्रकार के अनुवाद कुंजियों की आवश्यकता नहीं है।
+
+2. **React-i18next**
+
+   - आपको एक **लचीला, स्थापित** समाधान की आवश्यकता है जिसमें **गतिशील** और **मांग पर** अनुवाद लोडिंग हो।
+   - आप **प्लगइन-आधारित** भाषा पहचान चाहते हैं (जैसे, URL, कुकीज़, स्थानीय संग्रह से) या उन्नत कैशिंग।
+   - आपको सबसे बड़े पारिस्थितिकी तंत्र की आवश्यकता है, जिसमें विभिन्न ढाँचों (Next.js, React Native, आदि) के लिए कई मौजूदा एकीकरण हैं।
+
+3. **Intlayer**
+   - आप **मजबूत TypeScript** एकीकरण चाहते हैं जिसमें _स्वचालित प्रकार_ शामिल हैं, यह सुनिश्चित करते हुए कि आप शायद ही कभी एक अनुवाद कुंजी छोड़ें।
+   - आप **घोषणाशील सामग्री** को घटक के करीब रखना पसंद करते हैं, संभवतः अनुवादों में React नोड्स या उन्नत तर्क शामिल करना।
+   - आपको **निर्मित स्थानीयकृत मार्गनिर्देशन** की आवश्यकता है या आप इसे अपने SSR या Vite सेटअप में आसानी से शामिल करना चाहते हैं।
+   - आप एक आधुनिक दृष्टिकोण की इच्छा रखते हैं या केवल एक एकल पुस्तकालय चाहते हैं जो दोनों **सामग्री प्रबंधन** (i18n) और **मार्गनिर्देशन** को प्रकार-सुरक्षित तरीके से कवर करता है।
+
+---
+
+## 7. निष्कर्ष
+
+प्रत्येक पुस्तकालय एक React एप्लिकेशन के लिए अंतरराष्ट्रीयकरण का एक मजबूती समाधान प्रदान करता है:
+
+- **React-Intl** संदेश स्वरूपण में उत्कृष्टता प्राप्त करता है और ICU संदेश वाक्यविन्यास पर ध्यान केंद्रित करने वाले उद्यम समाधानों के लिए एक लोकप्रिय विकल्प है।
+- **React-i18next** उन्नत या गतिशील i18n आवश्यकताओं के लिए एक अत्यधिक लचीला, प्लगइन-चालित वातावरण प्रदान करता है।
+- **Intlayer** एक **आधुनिक, मजबूत प्रकार** का दृष्टिकोण प्रस्तुत करता है जो सामग्री घोषणाओं, उन्नत स्थानीयकृत मार्गनिर्देशन, और प्लगइन-आधारित (CRA, Vite) एकीकरणों को एकीकृत करता है।
+
+आपकी पसंद मुख्य रूप से परियोजना की आवश्यकताओं, वांछित विकासकर्ता अनुभव (DX), और क्या टाइप किए गए अनुवाद या उन्नत मार्गनिर्देशन महत्वपूर्ण हैं, पर निर्भर करती है। यदि आप निर्मित स्थानीयकृत मार्गनिर्देशन और TypeScript एकीकरण को महत्व देते हैं, तो **Intlayer** सबसे आकर्षक हो सकता है। यदि आप एक युद्ध-परीक्षित, पारिस्थितिकी तंत्र-समृद्ध समाधान चाहते हैं, तो **React-i18next** एक महान विकल्प है। सरल ICU-आधारित स्वरूपण आवश्यकताओं के लिए, **React-Intl** एक विश्वसनीय विकल्प है।
+
+---
+
+### आगे की पढ़ाई
+
+- [React-Intl प्रलेखन](https://formatjs.io/docs/react-intl/)
+- [React-i18next प्रलेखन](https://react.i18next.com/)
+- [Intlayer + CRA शुरू करने के लिए गाइड](#/hi) (आपके दस्तावेज़ से)
+- [Intlayer + Vite & React शुरू करने के लिए गाइड](#/hi) (आपके दस्तावेज़ से)
+
+अपनी आवश्यकताओं के अनुसार दृष्टिकोणों को मिलाने और मिलन-जुलने में स्वतंत्र महसूस करें, कोई "एक-आकार-फिट-सभी" समाधान नहीं है, और प्रत्येक पुस्तकालय नए उपयोग मामलों को संबोधित करने के लिए विकसित होता रहता है।