@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/blog/hi/i18n_using_next-i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-01
-updatedAt: 2025-11-01
-title: next-i18next का उपयोग करके अपने Next.js एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें
-description: "next-i18next के साथ i18n सेट करें: बहुभाषी Next.js ऐप्स के लिए सर्वोत्तम प्रथाएं और SEO सुझाव, जिसमें अंतरराष्ट्रीयकरण, सामग्री संगठन, और तकनीकी सेटअप शामिल हैं।"
+updatedAt: 2026-05-31
+title: "next-i18next का उपयोग करके अपने Next.js एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें - अनुवाद का पूर्ण गाइड: Translate Next.js 16 with next-i18next — App Router Setup"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Next.js 16 वेबसाइट को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - next-i18next
   - i18next
@@ -80,6 +80,7 @@ history:
   title="Demo CodeSandbox - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/next-i18next-template) देखें।
 
@@ -116,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### चरण 1: Dependencies इंस्टॉल करें
+<Steps>
+
+<Step number={1} title="Dependencies इंस्टॉल करें">
 
 npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: i18next के लिए React बाइंडिंग्स जो क्लाइंट कंपोनेंट्स के लिए `useTranslation` जैसे हुक प्रदान करता है।
 - **i18next-resources-to-backend**: एक प्लगइन जो अनुवाद फ़ाइलों को डायनामिक रूप से लोड करने में सक्षम बनाता है, जिससे आप केवल आवश्यक namespaces को लोड कर सकते हैं।
 
-### चरण 2: अपने प्रोजेक्ट को कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट को कॉन्फ़िगर करें">
 
 एक कॉन्फ़िगरेशन फ़ाइल बनाएं जिसमें आपके समर्थित लोकल, डिफ़ॉल्ट लोकल, और URL लोकलाइज़ेशन के लिए सहायक फ़ंक्शन परिभाषित हों। यह फ़ाइल आपके i18n सेटअप के लिए एकमात्र सत्य स्रोत के रूप में कार्य करती है और आपके एप्लिकेशन में टाइप सुरक्षा सुनिश्चित करती है।
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### चरण 3: अनुवाद नेमस्पेसेस को केंद्रीकृत करें
+</Step>
+
+<Step number={3} title="अनुवाद नेमस्पेसेस को केंद्रीकृत करें">
 
 अपने एप्लिकेशन द्वारा एक्सपोज़ किए गए प्रत्येक namespace के लिए एक सिंगल सोर्स ऑफ ट्रूथ बनाएं। इस सूची का पुन: उपयोग सर्वर, क्लाइंट, और टूलिंग कोड को सिंक में रखता है और ट्रांसलेशन हेल्पर्स के लिए मजबूत टाइपिंग को अनलॉक करता है।
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### चरण 4: TypeScript के साथ ट्रांसलेशन कीज़ को मजबूत टाइप करें
+</Step>
+
+<Step number={4} title="TypeScript के साथ ट्रांसलेशन कीज़ को मजबूत टाइप करें">
 
 `i18next` को अपने कैनोनिकल भाषा फ़ाइलों (आमतौर पर अंग्रेज़ी) की ओर बढ़ाएं। TypeScript तब प्रत्येक namespace के लिए वैध कीज़ का अनुमान लगाता है, इसलिए `t()` कॉल्स को एंड-टू-एंड चेक किया जाता है।
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### चरण 5: सर्वर-साइड i18n इनिशियलाइज़ेशन सेट करें
+</Step>
+
+<Step number={5} title="सर्वर-साइड i18n इनिशियलाइज़ेशन सेट करें">
 
 सर्वर-साइड i18n इनिशियलाइज़ेशन फ़ंक्शन बनाएं जो सर्वर कंपोनेंट्स के लिए अनुवाद लोड करता है। यह फ़ंक्शन सर्वर-साइड रेंडरिंग के लिए एक अलग i18next इंस्टेंस बनाता है, यह सुनिश्चित करते हुए कि रेंडरिंग से पहले अनुवाद लोड हो जाएं।
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### चरण 6: क्लाइंट-साइड i18n प्रोवाइडर बनाएं
+</Step>
+
+<Step number={6} title="क्लाइंट-साइड i18n प्रोवाइडर बनाएं">
 
 एक क्लाइंट कंपोनेंट प्रोवाइडर बनाएं जो आपके एप्लिकेशन को i18next संदर्भ के साथ लपेटता है। यह प्रोवाइडर सर्वर से पहले से लोड की गई अनुवाद सामग्री प्राप्त करता है ताकि अनुवादित सामग्री के फ्लैश (FOUC) को रोका जा सके और डुप्लिकेट फेचिंग से बचा जा सके।
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### चरण 7: डायनामिक लोकल रूट्स परिभाषित करें
+</Step>
+
+<Step number={7} title="डायनामिक लोकल रूट्स परिभाषित करें">
 
 अपने ऐप फ़ोल्डर में `[locale]` डायरेक्टरी बनाकर लोकल के लिए डायनामिक रूटिंग सेट करें। इससे Next.js लोकल-आधारित रूटिंग को संभाल सकता है जहाँ प्रत्येक लोकल URL सेगमेंट बन जाता है (जैसे, `/en/about`, `/fr/about`)।
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### चरण 8: अपनी अनुवाद फ़ाइलें बनाएं
+</Step>
+
+<Step number={8} title="अपनी अनुवाद फ़ाइलें बनाएं">
 
 प्रत्येक locale और namespace के लिए JSON फ़ाइलें बनाएं। यह संरचना आपको अनुवादों को तार्किक रूप से व्यवस्थित करने और केवल उस पृष्ठ के लिए आवश्यक अनुवाद लोड करने की अनुमति देती है।
 
@@ -481,7 +498,9 @@ export default function LocaleLayout({
 }
 ```
 
-### चरण 9: अपने पृष्ठों में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={9} title="अपने पृष्ठों में अनुवादों का उपयोग करें">
 
 एक पेज कॉम्पोनेंट बनाएं जो सर्वर पर i18next को इनिशियलाइज़ करता है और अनुवादों को सर्वर और क्लाइंट दोनों कॉम्पोनेंट्स को पास करता है। यह सुनिश्चित करता है कि अनुवाद रेंडरिंग से पहले लोड हो जाएं और कंटेंट फ्लैशिंग से बचा जा सके।
 
@@ -541,7 +560,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 10: क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें
+</Step>
+
+<Step number={10} title="क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें">
 
 क्लाइंट कंपोनेंट्स अनुवादों तक पहुँचने के लिए `useTranslation` हुक का उपयोग कर सकते हैं। यह हुक अनुवाद फ़ंक्शन और i18n इंस्टेंस तक पहुँच प्रदान करता है, जिससे आप सामग्री का अनुवाद कर सकते हैं और लोकल जानकारी प्राप्त कर सकते हैं।
 
@@ -592,7 +613,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### चरण 11: सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={11} title="सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें">
 
 सर्वर कंपोनेंट्स React hooks का उपयोग नहीं कर सकते हैं, इसलिए वे अपने पैरेंट कंपोनेंट्स से props के माध्यम से अनुवाद प्राप्त करते हैं। यह तरीका सर्वर कंपोनेंट्स को synchronous बनाए रखता है और उन्हें क्लाइंट कंपोनेंट्स के अंदर नेस्ट करने की अनुमति देता है।
 
@@ -638,9 +661,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (वैकल्पिक) चरण 12: अपनी सामग्री की भाषा बदलें
+<Step number={12} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 Next.js में अपनी सामग्री की भाषा बदलने के लिए, अनुशंसित तरीका है locale-पूर्वसर्ग वाले URL और Next.js लिंक का उपयोग करना। नीचे दिया गया उदाहरण वर्तमान locale को route से पढ़ता है, pathname से इसे हटाता है, और उपलब्ध प्रत्येक locale के लिए एक लिंक रेंडर करता है।
 
@@ -712,7 +735,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (वैकल्पिक) चरण 13: एक स्थानीयकृत Link कॉम्पोनेंट बनाएं
+</Step>
+
+<Step number={13} title="एक स्थानीयकृत Link कॉम्पोनेंट बनाएं" isOptional={true}>
 
 अपने ऐप में स्थानीयकृत URLs का पुन: उपयोग नेविगेशन को सुसंगत और SEO-अनुकूल बनाए रखता है। `next/link` को एक छोटे हेल्पर में लपेटें जो आंतरिक रूट्स के सामने सक्रिय locale जोड़ता है जबकि बाहरी URLs को अपरिवर्तित छोड़ता है।
 
@@ -763,7 +788,9 @@ export default function LocalizedLink({
 
 > सुझाव: क्योंकि `LocalizedLink` एक ड्रॉप-इन रिप्लेसमेंट है, इसलिए आयातों को धीरे-धीरे बदलकर और कंपोनेंट को locale-विशिष्ट URLs संभालने दें, क्रमिक रूप से माइग्रेट करें।
 
-### (वैकल्पिक) चरण 14: सर्वर एक्शन्स के अंदर सक्रिय locale तक पहुँचें
+</Step>
+
+<Step number={14} title="सर्वर एक्शन्स के अंदर सक्रिय locale तक पहुँचें" isOptional={true}>
 
 सर्वर एक्शन्स को अक्सर ईमेल, लॉगिंग, या थर्ड-पार्टी इंटीग्रेशन के लिए वर्तमान locale की आवश्यकता होती है। अपने प्रॉक्सी द्वारा सेट किए गए locale कुकी को `Accept-Language` हेडर के साथ एक फॉलबैक के रूप में संयोजित करें।
 
@@ -801,7 +828,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > क्योंकि यह हेल्पर Next.js कुकीज़ और हेडर्स पर निर्भर करता है, यह Route Handlers, Server Actions, और अन्य केवल सर्वर-संदर्भों में काम करता है।
 
-### (वैकल्पिक) चरण 15: अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें
+</Step>
+
+<Step number={15} title="अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें" isOptional={true}>
 
 सामग्री का अनुवाद करना महत्वपूर्ण है, लेकिन अंतरराष्ट्रीयकरण का मुख्य उद्देश्य आपकी वेबसाइट को दुनिया के लिए अधिक दृश्यनीय बनाना है। I18n आपकी वेबसाइट की दृश्यता को उचित SEO के माध्यम से बढ़ाने के लिए एक अद्भुत साधन है।
 
@@ -868,7 +897,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (वैकल्पिक) चरण 16: अपने साइटमैप को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={16} title="अपने साइटमैप को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 एक साइटमैप बनाएं जिसमें आपके पृष्ठों के सभी लोकल संस्करण शामिल हों। यह सर्च इंजन को आपकी सामग्री के सभी भाषा संस्करणों को खोजने और इंडेक्स करने में मदद करता है।
 
@@ -924,7 +955,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (वैकल्पिक) चरण 17: अपने robots.txt को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={17} title="अपने robots.txt को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 अपने संरक्षित रूट्स के सभी लोकल संस्करणों को सही ढंग से संभालने के लिए एक robots.txt फ़ाइल बनाएं। यह सुनिश्चित करता है कि सर्च इंजन किसी भी भाषा में एडमिन या डैशबोर्ड पेजों को इंडेक्स न करें।
 
@@ -955,7 +988,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (वैकल्पिक) चरण 18: लोकल रूटिंग के लिए मिडलवेयर सेट करें
+</Step>
+
+<Step number={18} title="लोकल रूटिंग के लिए मिडलवेयर सेट करें" isOptional={true}>
 
 एक प्रॉक्सी बनाएं जो स्वचालित रूप से उपयोगकर्ता की पसंदीदा भाषा का पता लगाए और उन्हें उपयुक्त लोकल-प्रिफिक्स्ड URL पर पुनः निर्देशित करे। यह उपयोगकर्ता अनुभव को बेहतर बनाता है क्योंकि सामग्री उनकी पसंदीदा भाषा में दिखाई जाती है।
 
@@ -1044,7 +1079,9 @@ export const config = {
 };
 ```
 
-### (वैकल्पिक) चरण 19: Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें
+</Step>
+
+<Step number={19} title="Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें" isOptional={true}>
 
 Intlayer एक **मुफ्त** और **ओपन-सोर्स** लाइब्रेरी है जो आपके एप्लिकेशन में स्थानीयकरण प्रक्रिया में सहायता करने के लिए डिज़ाइन की गई है। जबकि i18next अनुवाद लोडिंग और प्रबंधन को संभालता है, Intlayer अनुवाद कार्यप्रवाह को स्वचालित करने में मदद करता है।
 
@@ -1074,3 +1111,7 @@ Intlayer आपको निम्नलिखित सुविधाएँ
   Intlayer एक मुफ्त विज़ुअल एडिटर प्रदान करता है जिससे आप अपनी सामग्री को विज़ुअल एडिटर का उपयोग करके संपादित कर सकते हैं। [अपने अनुवादों का विज़ुअल संपादन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) के बारे में अधिक जानें।
 
 और भी बहुत कुछ। Intlayer द्वारा प्रदान की गई सभी विशेषताओं को खोजने के लिए, कृपया [Intlayer के महत्व की दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/interest_of_intlayer.md) देखें।
+
+</Step>
+
+</Steps>

package/blog/hi/i18n_using_next-intl.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-01
-updatedAt: 2025-11-01
-title: next-intl का उपयोग करके अपने Next.js एप्लिकेशन को अंतरराष्ट्रीयकृत कैसे करें
-description: "next-intl के साथ i18n सेटअप करें: बहुभाषी Next.js ऐप्स के लिए सर्वोत्तम प्रथाएं और SEO सुझाव, जिसमें अंतरराष्ट्रीयकरण, सामग्री संगठन, और तकनीकी सेटअप शामिल हैं।"
+updatedAt: 2026-05-31
+title: "next-intl का उपयोग करके अपने Next.js एप्लिकेशन को अंतरराष्ट्रीयकृत कैसे करें - अनुवाद का पूर्ण गाइड: Translate Next.js 16 with next-intl — App Router Setup"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Next.js 16 वेबसाइट को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - next-intl
   - Internationalization
@@ -108,7 +108,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -126,7 +128,9 @@ yarn add next-intl
 
 - **next-intl**: Next.js App Router के लिए मुख्य अंतरराष्ट्रीयकरण लाइब्रेरी जो अनुवादों के प्रबंधन के लिए hooks, सर्वर फ़ंक्शन, और क्लाइंट प्रदाता प्रदान करती है।
 
-### चरण 2: अपने प्रोजेक्ट को कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट को कॉन्फ़िगर करें">
 
 अपने समर्थित लोकल्स को परिभाषित करने और next-intl के अनुरोध कॉन्फ़िगरेशन को सेट अप करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएं। यह फ़ाइल आपके i18n सेटअप के लिए सत्य का एकमात्र स्रोत के रूप में कार्य करती है और आपके एप्लिकेशन में टाइप सुरक्षा सुनिश्चित करती है।
 
@@ -210,7 +214,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### चरण 3: डायनामिक लोकल रूट्स परिभाषित करें
+</Step>
+
+<Step number={3} title="डायनामिक लोकल रूट्स परिभाषित करें">
 
 अपने ऐप फ़ोल्डर में `[locale]` डायरेक्टरी बनाकर स्थानीयताओं के लिए डायनेमिक रूटिंग सेट करें। इससे Next.js स्थानीय-आधारित रूटिंग को संभाल सकता है जहाँ प्रत्येक स्थानीयता URL सेगमेंट बन जाती है (जैसे, `/en/about`, `/fr/about`)।
 
@@ -298,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 4: अपने अनुवाद फ़ाइलें बनाएं
+</Step>
+
+<Step number={4} title="अपने अनुवाद फ़ाइलें बनाएं">
 
 प्रत्येक locale और namespace के लिए JSON फ़ाइलें बनाएं। यह संरचना आपको अनुवादों को तार्किक रूप से व्यवस्थित करने और प्रत्येक पेज के लिए केवल आवश्यक अनुवाद लोड करने की अनुमति देती है।
 
@@ -340,7 +348,9 @@ namespace के अनुसार अनुवादों को व्यव
 }
 ```
 
-### चरण 5: अपने पृष्ठों में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={5} title="अपने पृष्ठों में अनुवादों का उपयोग करें">
 
 एक पेज कंपोनेंट बनाएं जो सर्वर पर अनुवाद लोड करता है और उन्हें सर्वर और क्लाइंट दोनों कंपोनेंट्स को पास करता है। यह सुनिश्चित करता है कि अनुवाद रेंडरिंग से पहले लोड हो जाएं और कंटेंट फ्लैशिंग को रोका जा सके।
 
@@ -391,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 6: क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें
+</Step>
+
+<Step number={6} title="क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें">
 
 क्लाइंट कंपोनेंट्स `useTranslations` और `useFormatter` hooks का उपयोग करके अनुवाद और फॉर्मेटिंग फ़ंक्शंस तक पहुँच सकते हैं। ये hooks `NextIntlClientProvider` context से पढ़ते हैं।
 
@@ -427,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### चरण 7: सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={7} title="सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें">
 
 सर्वर कंपोनेंट्स React hooks का उपयोग नहीं कर सकते, इसलिए वे अपने पैरेंट कंपोनेंट्स से props के माध्यम से अनुवाद और फॉर्मैटर प्राप्त करते हैं। यह तरीका सर्वर कंपोनेंट्स को synchronous रखता है और उन्हें क्लाइंट कंपोनेंट्स के अंदर नेस्ट करने की अनुमति देता है।
 
@@ -459,9 +473,9 @@ const ServerComponent = ({
 
 > अपने पेज/लेआउट में, `next-intl/server` से `getTranslations` और `getFormatter` का उपयोग करें ताकि अनुवाद और फॉर्मेटिंग को पहले से गणना किया जा सके, फिर उन्हें props के रूप में सर्वर कंपोनेंट्स को पास करें।
 
----
+</Step>
 
-### (वैकल्पिक) चरण 8: अपनी सामग्री की भाषा बदलें
+<Step number={8} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 next-intl के साथ अपनी सामग्री की भाषा बदलने के लिए, ऐसे locale-aware लिंक रेंडर करें जो locale बदलते समय उसी pathname की ओर इशारा करें। प्रदाता URLs को स्वचालित रूप से पुनर्लेखित करता है, इसलिए आपको केवल वर्तमान रूट को लक्षित करना होता है।
 
@@ -533,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (वैकल्पिक) चरण 9: स्थानीयकृत Link कॉम्पोनेंट का उपयोग करें
+</Step>
+
+<Step number={9} title="स्थानीयकृत Link कॉम्पोनेंट का उपयोग करें" isOptional={true}>
 
 `next-intl` एक उप-पैकेज `next-intl/navigation` प्रदान करता है जिसमें एक स्थानीयकृत लिंक कॉम्पोनेंट होता है जो स्वचालित रूप से सक्रिय locale लागू करता है। हमने इसे आपके लिए `@/i18n` फ़ाइल में पहले ही निकाला है, इसलिए आप इसे इस प्रकार उपयोग कर सकते हैं:
 
@@ -543,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (वैकल्पिक) चरण 10: Server Actions के अंदर सक्रिय locale तक पहुँचें
+</Step>
+
+<Step number={10} title="Server Actions के अंदर सक्रिय locale तक पहुँचें" isOptional={true}>
 
 Server Actions वर्तमान locale को `next-intl/server` का उपयोग करके पढ़ सकते हैं। यह स्थानीयकृत ईमेल भेजने या सबमिट किए गए डेटा के साथ भाषा प्राथमिकताएँ संग्रहीत करने के लिए उपयोगी है।
 
@@ -566,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` उस locale को पढ़ता है जो `next-intl` प्रॉक्सी द्वारा सेट किया गया है, इसलिए यह सर्वर पर कहीं भी काम करता है: Route Handlers, Server Actions, और edge functions।
 
-### (वैकल्पिक) चरण 11: अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें
+</Step>
+
+<Step number={11} title="अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें" isOptional={true}>
 
 सामग्री का अनुवाद करना महत्वपूर्ण है, लेकिन अंतरराष्ट्रीयकरण का मुख्य उद्देश्य आपकी वेबसाइट को दुनिया के लिए अधिक दृश्य बनाना है। I18n आपकी वेबसाइट की दृश्यता को उचित SEO के माध्यम से सुधारने के लिए एक अद्भुत उपकरण है।
 
@@ -605,7 +625,9 @@ export async function generateMetadata({
 // ... पेज कोड का बाकी हिस्सा
 ```
 
-### (वैकल्पिक) चरण 12: अपने साइटमैप को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={12} title="अपने साइटमैप को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 अपने पृष्ठों के सभी स्थानीय संस्करणों को शामिल करने वाला एक साइटमैप जनरेट करें। यह खोज इंजन को आपकी सामग्री के सभी भाषा संस्करणों को खोजने और अनुक्रमित करने में मदद करता है।
 
@@ -659,7 +681,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (वैकल्पिक) चरण 13: अपने robots.txt को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={13} title="अपने robots.txt को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 एक robots.txt फ़ाइल बनाएं जो आपके सभी स्थानीय संस्करणों वाले संरक्षित रूट्स को सही ढंग से संभाले। यह सुनिश्चित करता है कि सर्च इंजन किसी भी भाषा में एडमिन या डैशबोर्ड पेजों को इंडेक्स न करें।
 
@@ -692,7 +716,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (वैकल्पिक) चरण 14: लोकल रूटिंग के लिए प्रॉक्सी सेट करें
+</Step>
+
+<Step number={14} title="लोकल रूटिंग के लिए प्रॉक्सी सेट करें" isOptional={true}>
 
 एक प्रॉक्सी बनाएं जो स्वचालित रूप से उपयोगकर्ता की पसंदीदा भाषा (locale) का पता लगाए और उन्हें उपयुक्त लोकल-प्रिफिक्स्ड URL पर पुनः निर्देशित करे। next-intl एक सुविधाजनक प्रॉक्सी फ़ंक्शन प्रदान करता है जो इसे स्वचालित रूप से संभालता है।
 
@@ -712,7 +738,9 @@ export const config = {
 };
 ```
 
-### (वैकल्पिक) चरण 15: लोकल के लिए TypeScript टाइप्स सेट करें
+</Step>
+
+<Step number={15} title="लोकल के लिए TypeScript टाइप्स सेट करें" isOptional={true}>
 
 TypeScript सेटअप करने से आपको अपने कीज़ के लिए ऑटो-कम्प्लीशन और टाइप सुरक्षा प्राप्त करने में मदद मिलेगी।
 
@@ -738,7 +766,9 @@ declare module "next-intl" {
 
 यह कोड Module Augmentation का उपयोग करेगा ताकि locales और messages को next-intl के AppConfig टाइप में जोड़ा जा सके।
 
-### (वैकल्पिक) चरण 15: Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें
+</Step>
+
+<Step number={16} title="Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें" isOptional={true}>
 
 Intlayer एक **मुफ़्त** और **ओपन-सोर्स** लाइब्रेरी है जिसे आपके एप्लिकेशन में लोकलाइज़ेशन प्रक्रिया में सहायता करने के लिए डिज़ाइन किया गया है। जबकि next-intl अनुवाद लोडिंग और प्रबंधन को संभालता है, Intlayer अनुवाद वर्कफ़्लो को स्वचालित करने में मदद करता है।
 
@@ -763,3 +793,7 @@ Intlayer आपको निम्नलिखित की अनुमति
   Intlayer एक मुफ्त विज़ुअल एडिटर प्रदान करता है जिससे आप अपने कंटेंट को विज़ुअल एडिटर का उपयोग करके संपादित कर सकते हैं। अधिक जानने के लिए [अपने अनुवादों का विज़ुअल संपादन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) देखें।
 
 और भी बहुत कुछ। Intlayer द्वारा प्रदान की गई सभी विशेषताओं को खोजने के लिए, कृपया [Intlayer के महत्व की दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/interest_of_intlayer.md) देखें।
+
+</Step>
+
+</Steps>

package/blog/hi/list_i18n_technologies/frameworks/angular.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Angular के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण
-description: Angular के i18n समाधानों के शीर्ष विकल्प खोजें, अनुवाद चुनौतियों को हल करें, SEO बढ़ाएं और एक वैश्विक वेब अनुभव प्रदान करें.
+updatedAt: 2026-05-31
+title: "Angular के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण - अनुवाद का पूर्ण गाइड: Best Angular i18n Libraries 2026 — Compared by DX & Bundle"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Angular ऐप को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - Angular
   - i18n

package/blog/hi/list_i18n_technologies/frameworks/react-native.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: React Native के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण
-description: React Native के i18n समाधानों के शीर्ष विकल्प खोजें, अनुवाद चुनौतियों को हल करें, SEO बढ़ाएं और एक वैश्विक वेब अनुभव प्रदान करें.
+updatedAt: 2026-05-31
+title: "React Native के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण - अनुवाद का पूर्ण गाइड: React Native i18n 2026: Best Tools for Expo & TypeScript"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने React Native मोबाइल ऐप को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - React Native
   - i18n

package/blog/hi/list_i18n_technologies/frameworks/react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: React के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण
-description: React के i18n समाधानों के शीर्ष विकल्प खोजें, अनुवाद चुनौतियों को हल करें, SEO बढ़ाएं और एक वैश्विक वेब अनुभव प्रदान करें.
+updatedAt: 2026-05-31
+title: "React के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण - अनुवाद का पूर्ण गाइड: Best React i18n Libraries 2026 — Compared by DX & Bundle"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने React ऐप को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - React
   - i18n

package/blog/hi/list_i18n_technologies/frameworks/svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Svelte के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण
-description: Svelte के i18n समाधानों के शीर्ष विकल्प खोजें, अनुवाद चुनौतियों को हल करें, SEO बढ़ाएं और एक वैश्विक वेब अनुभव प्रदान करें.
+updatedAt: 2026-05-31
+title: "Svelte के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण - अनुवाद का पूर्ण गाइड: Best Svelte i18n Libraries 2026 — Compared by DX & Bundle"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Svelte ऐप को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - Svelte
   - i18n

package/blog/hi/list_i18n_technologies/frameworks/vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-16
-updatedAt: 2025-06-29
-title: Vue के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण
-description: Vue के i18n समाधानों के शीर्ष विकल्प खोजें, अनुवाद चुनौतियों को हल करें, SEO बढ़ाएं और एक वैश्विक वेब अनुभव प्रदान करें.
+updatedAt: 2026-05-31
+title: "Vue के लिए सबसे अच्छा अंतर्राष्ट्रीयकरण (i18n) और उपकरण - अनुवाद का पूर्ण गाइड: Best Vue i18n Libraries 2026 — Compared by DX & Bundle"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Vue ऐप को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - Vue
   - i18n

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

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
-title: next-i18next बनाम next-intl बनाम Intlayer
-description: Next.js ऐप के अंतरराष्ट्रीयकरण (i18n) के लिए next-i18next की तुलना next-intl और Intlayer के साथ करें
+updatedAt: 2026-05-31
+title: "next-i18next बनाम next-intl बनाम Intlayer - अनुवाद का पूर्ण गाइड: next-i18next vs next-intl vs Intlayer: 2026 Comparison"
+description: बंडल साइज़, SEO, परफॉर्मेंस & मेंटेनेबिलिटी के लिए सबसे अच्छा समाधान। 2026 में अपने Next.js वेबसाइट को बहुभाषी बनाएं, LLM ट्रांसलेशन, Agent Skills & MCP.
 keywords:
   - next-intl
   - next-i18next