@intlayer/docs 9.1.3 → 9.2.0

package/docs/hi/intlayer_CMS.md

@@ -247,6 +247,158 @@ bun x intlayer dictionary push -d my-first-dictionary-key --env production
 
 फिर आप अपने शब्दकोश को [Intlayer CMS](https://app.intlayer.org/content) में देख और प्रबंधित कर सकेंगे।
 
+## `@intlayer/api` SDK के साथ प्रोग्रामेटिक एक्सेस
+
+CLI और विजुअल एडिटर के अलावा, Intlayer [`@intlayer/api`](https://www.npmjs.com/package/@intlayer/api) पैकेज में एक typed SDK प्रदान करता है। यह आपको CMS को एक **headless content database** के रूप में उपयोग करने देता है: आप प्रोजेक्ट प्राप्त कर सकते हैं, डिक्शनरी प्राप्त कर सकते हैं, और उन्हें सीधे अपने एप्लिकेशन, स्क्रिप्ट या CI pipeline से push या अपडेट कर सकते हैं।
+
+SDK आपके लिए प्रमाणीकरण को हैंडल करता है। जब तक आपका `clientId` और `clientSecret` उपलब्ध हैं (आपकी Intlayer कॉन्फ़िगरेशन या environment में), यह स्वचालित रूप से एक OAuth2 एक्सेस टोकन प्राप्त करता है और रीफ्रेश करता है और हर अनुरोध को साइन करता है।
+
+### इंस्टॉलेशन
+
+```bash packageManager="npm"
+npm install @intlayer/api
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
+```
+
+### यह कैसे काम करता है: authenticator + endpoints
+
+SDK को **दो अलग-अलग imports** में विभाजित किया गया है, ताकि आपका bundle छोटा रहे:
+
+1. `createIntlayerCMS` — एक हल्का **authenticator** बनाता है। यह केवल credentials और managed access token को ले जाता है; यह किसी विशिष्ट domain के बारे में कुछ नहीं जानता।
+2. `dictionaryEndpoint`, `projectEndpoint`, … — प्रति-domain **endpoint binders**, प्रत्येक अपने subpath से imported (`@intlayer/api/dictionary`, `@intlayer/api/project`, …)। आप authenticator को उस endpoint पर पास करते हैं जिसकी आपको जरूरत है।
+
+क्योंकि प्रत्येक endpoint अलग से imported है, आपका bundle केवल उन domains को शामिल करता है जिन्हें आप वास्तव में use करते हैं — `dictionaryEndpoint` को import करना कभी भी project, AI, या किसी अन्य domain client को pull नहीं करता।
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+// कॉन्फ़िगरेशन वैकल्पिक है: जब छोड़ा जाता है, तो credentials को पढ़ा जाता है
+// `@intlayer/config/built` से, जो INTLAYER_CLIENT_ID और
+// INTLAYER_CLIENT_SECRET environment variables को resolve करता है।
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> CMS credentials (`clientId` / `clientSecret`) आपके content को **write access** प्रदान करते हैं। authenticator को केवल **server side** पर बनाएं (server actions, route handlers, scripts, CI)। इसे कभी भी client-side code में import न करें या अपने credentials को browser में expose न करें।
+
+यदि आप build-time configuration पर निर्भर नहीं करना पसंद करते हैं, तो credentials को explicitly पास करें:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // वैकल्पिक, self-hosted backends के लिए:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> [Intlayer Dashboard - Projects](https://app.intlayer.org/projects) में एक नई access key बनाकर अपने credentials प्राप्त करें।
+
+### Projects को Fetch करें
+
+```typescript fileName="projects.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { projectEndpoint } from "@intlayer/api/project";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// अपने credentials के साथ accessible projects को list करें
+const { data: projects } =
+  await projectEndpoint(cmsAuthenticator).getProjects();
+
+// चुने गए project की aggregated localization insights को read करें
+const { data: insights } =
+  await projectEndpoint(cmsAuthenticator).getProjectInsights();
+```
+
+### शब्दकोश प्राप्त करें
+
+```typescript fileName="read-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// प्रोजेक्ट के हर दूरस्थ शब्दकोश को सूचीबद्ध करें
+const { data: dictionaries } =
+  await dictionaryEndpoint(cmsAuthenticator).getDictionaries();
+
+// या कुंजी द्वारा एक एकल शब्दकोश प्राप्त करें
+const { data: dictionary } = await dictionaryEndpoint(
+  cmsAuthenticator
+).getDictionary("my-first-dictionary-key");
+```
+
+### शब्दकोश को Push और Update करें
+
+सामग्री वापस लिखने के लिए CMS को डेटाबेस के रूप में उपयोग करें:
+
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// एक नया शब्दकोश बनाएं
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// शब्दकोशों का एक बैच Upsert करें (एक कॉल में उन्हें बनाएं या अपडेट करें)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// एक मौजूदा शब्दकोश को अपडेट करें
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
+> टिप: बंधे हुए endpoint को दोबारा उपयोग करें ताकि आपको अपने आप को दोहराना न पड़े:
+>
+> ```typescript codeFormat="typescript"
+> const dictionary = dictionaryEndpoint(cmsAuthenticator);
+> await dictionary.pushDictionaries([myDictionary]);
+> const { data } = await dictionary.getDictionaries();
+> ```
+
+### एक single method निकालना
+
+हर endpoint method पहले से authenticated है और standalone है (यह अपना token handling करता है), इसलिए आप एक को निकाल सकते हैं और इसे around pass कर सकते हैं — उदाहरण के लिए इसे dependency के रूप में inject करने के लिए:
+
+```typescript fileName="push.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const dictionary = dictionaryEndpoint(createIntlayerCMS());
+
+// पहले से authenticated — हर call पर token को automatically refresh करता है
+export const pushDictionaries = dictionary.pushDictionaries;
+
+// उपयोग
+await pushDictionaries([{ key: "home", content: { title: "Home" } }]);
+```
+
 ## लाइव सिंक
 
 लाइव सिंक आपकी ऐप को रनटाइम पर CMS सामग्री परिवर्तनों को प्रतिबिंबित करने देता है। पुनर्निर्माण या पुनः तैनाती की आवश्यकता नहीं होती। जब सक्षम किया जाता है, तो अपडेट्स लाइव सिंक सर्वर को स्ट्रीम किए जाते हैं जो आपके एप्लिकेशन द्वारा पढ़े जाने वाले शब्दकोशों को ताज़ा करता है।

package/docs/hi/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
-description: "अब i18next की जरूरत नहीं। 2026 में Angular 21 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
+title: "Angular 22 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
+description: "अब i18next की जरूरत नहीं। 2026 में Angular 22 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
   - अंतर्राष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -13,8 +13,8 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
-applicationShowcase: https://intlayer-angular-21-template.vercel.app/
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-22-template
+applicationShowcase: https://intlayer-angular-22-template.vercel.app/
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -31,7 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Intlayer का उपयोग करके अपनी Angular 21 (Vite) वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
+# Intlayer का उपयोग करके अपनी Angular 22 (Vite) वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
 
 ## विषय-सूची
 
@@ -77,7 +77,7 @@ author: aymericzip
   <Tab label="Code" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-22-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतर्राष्ट्रीयकरण कैसे करें"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -88,7 +88,7 @@ author: aymericzip
   <Tab label="Demo" value="demo">
 
 <iframe
-  src="https://intlayer-angular-21-template.vercel.app/"
+  src="https://intlayer-angular-22-template.vercel.app/"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -98,7 +98,7 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-angular-21-template) देखें।
+GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-angular-22-template) देखें।
 
 <Steps>
 
@@ -186,7 +186,7 @@ export default config;
 
 <Step number={3} title="अपने Angular कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
 
-Intlayer को Angular CLI के साथ एकीकृत करने के लिए, आपको एक कस्टम बिल्डर का उपयोग करने की आवश्यकता है। यह मार्गदर्शिका मानती है कि आप Vite/esbuild का उपयोग कर रहे हैं (Angular 21 परियोजनाओं के लिए डिफ़ॉल्ट)।
+Intlayer को Angular CLI के साथ एकीकृत करने के लिए, आपको एक कस्टम बिल्डर का उपयोग करने की आवश्यकता है। यह मार्गदर्शिका मानती है कि आप Vite/esbuild का उपयोग कर रहे हैं (Angular 22 परियोजनाओं के लिए डिफ़ॉल्ट)।
 
 सबसे पहले, कस्टम esbuild बिल्डर का उपयोग करने के लिए अपने `angular.json` को संशोधित करें। `build` और `serve` कॉन्फ़िगरेशन अपडेट करें:
 

package/docs/hi/intlayer_with_nestjs.md

@@ -29,19 +29,23 @@ history:
     changes: "प्रारंभिक दस्तावेज़"
 ---
 
-### व्यावहारिक उपयोग के मामले
+# Intlayer का उपयोग करके अपनी Nest बैकएंड वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
 
-- **उपयोगकर्ता की भाषा में बैकएंड त्रुटियाँ दिखाना**: जब कोई त्रुटि होती है, तो संदेशों को उपयोगकर्ता की मातृभाषा में दिखाना समझ को बेहतर बनाता है और निराशा को कम करता है। यह विशेष रूप से उन गतिशील त्रुटि संदेशों के लिए उपयोगी है जो फ्रंट-एंड घटकों जैसे टोस्ट या मोडल में दिखाए जा सकते हैं।
+`express-intlayer` Express applications के लिए एक शक्तिशाली अंतर्राष्ट्रीयकरण (i18n) middleware है, जो आपकी बैकएंड सेवाओं को विश्व स्तर पर सुलभ बनाने के लिए डिज़ाइन किया गया है, जो क्लाइंट की प्राथमिकताओं के आधार पर स्थानीयकृत प्रतिक्रियाएं प्रदान करता है। चूंकि NestJS Express के शीर्ष पर बनाया गया है, आप `express-intlayer` को अपने NestJS applications में निर्बाध रूप से एकीकृत कर सकते हैं ताकि बहुभाषी सामग्री को प्रभावी ढंग से संभाल सकें।
 
-- **बहुभाषी सामग्री प्राप्त करना**: उन एप्लिकेशन के लिए जो डेटाबेस से सामग्री खींचते हैं, अंतरराष्ट्रीयकरण यह सुनिश्चित करता है कि आप इस सामग्री को कई भाषाओं में प्रदान कर सकें। यह उन प्लेटफार्मों के लिए महत्वपूर्ण है जैसे ई-कॉमर्स साइटें या सामग्री प्रबंधन प्रणाली, जिन्हें उपयोगकर्ता की पसंदीदा भाषा में उत्पाद विवरण, लेख और अन्य सामग्री दिखानी होती है।
+व्यावहारिक उपयोग के मामले
 
-- **बहुभाषी ईमेल भेजना**: चाहे वह लेनदेन संबंधी ईमेल हों, विपणन अभियान हों, या सूचनाएं हों, प्राप्तकर्ता की भाषा में ईमेल भेजने से जुड़ाव और प्रभावशीलता में काफी वृद्धि हो सकती है।
+- **उपयोगकर्ता की भाषा में बैकएंड त्रुटियां प्रदर्शित करना**: जब कोई त्रुटि होती है, तो संदेशों को उपयोगकर्ता की मूल भाषा में प्रदर्शित करना समझ में सुधार करता है और निराशा को कम करता है। यह विशेष रूप से गतिशील त्रुटि संदेशों के लिए उपयोगी है जो front-end components जैसे toasts या modals में दिखाए जा सकते हैं।
 
-- **बहुभाषी पुश सूचनाएं**: मोबाइल एप्लिकेशन के लिए, उपयोगकर्ता की पसंदीदा भाषा में पुश सूचनाएं भेजने से इंटरैक्शन और प्रतिधारण बढ़ सकता है। यह व्यक्तिगत स्पर्श सूचनाओं को अधिक प्रासंगिक और क्रियाशील महसूस कराता है।
+- **बहुभाषी सामग्री प्राप्त करना**: डेटाबेस से सामग्री खींचने वाले applications के लिए, अंतर्राष्ट्रीयकरण यह सुनिश्चित करता है कि आप इस सामग्री को कई भाषाओं में प्रदान कर सकते हैं। यह e-commerce साइटों या content management systems जैसे प्लेटफॉर्म के लिए महत्वपूर्ण है जिन्हें product descriptions, articles और अन्य सामग्री को उपयोगकर्ता द्वारा पसंदीदा भाषा में प्रदर्शित करने की आवश्यकता है।
 
-- **अन्य संचार**: बैकएंड से किसी भी प्रकार का संचार, जैसे एसएमएस संदेश, सिस्टम अलर्ट, या उपयोगकर्ता इंटरफ़ेस अपडेट, उपयोगकर्ता की भाषा में होने से स्पष्टता सुनिश्चित होती है और समग्र उपयोगकर्ता अनुभव में सुधार होता है।
+- **बहुभाषी ईमेल भेजना**: चाहे वह transactional emails, marketing campaigns, या notifications हों, प्राप्तकर्ता की भाषा में ईमेल भेजना engagement और प्रभावशीलता को काफी हद तक बढ़ा सकता है।
 
-बैकएंड को अंतरराष्ट्रीय बनाने से, आपका एप्लिकेशन न केवल सांस्कृतिक भिन्नताओं का सम्मान करता है बल्कि वैश्विक बाजार की आवश्यकताओं के साथ बेहतर तालमेल भी स्थापित करता है, जिससे यह आपकी सेवाओं को विश्व स्तर पर विस्तार देने में एक महत्वपूर्ण कदम बन जाता है।
+- **बहुभाषी Push Notifications**: मोबाइल applications के लिए, उपयोगकर्ता की पसंदीदा भाषा में push notifications भेजना इंटरैक्शन और retention को बढ़ा सकता है। यह व्यक्तिगत स्पर्श notifications को अधिक प्रासंगिक और कार्यान्वयन योग्य बना सकता है।
+
+- **अन्य संचार**: बैकएंड से किसी भी प्रकार का संचार, जैसे SMS messages, system alerts, या user interface updates, उपयोगकर्ता की भाषा में होने से लाभान्वित होता है, जिससे स्पष्टता सुनिश्चित होती है और समग्र user experience में वृद्धि होती है।
+
+बैकएंड का अंतर्राष्ट्रीयकरण करके, आपका application न केवल सांस्कृतिक अंतरों का सम्मान करता है बल्कि global market की जरूरतों के साथ बेहतर तरीके से संरेखित होता है, जो विश्व व्यापी आपकी सेवाओं को scale करने में एक महत्वपूर्ण कदम है।
 
 ## शुरुआत कैसे करें
 

package/docs/hi/intlayer_with_nextjs_14.md

@@ -24,34 +24,7 @@ history:
 author: aymericzip
 ---
 
-# Intlayer के साथ अपना Next.js 14 and App Router अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="कोड" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="डेमो" value="demo">
-
-<iframe
-  src="https://intlayer-next-14-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="डेमो - intlayer-next-14-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-[एप्लीकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-next-14-template) पर देखें.
+# Intlayer का उपयोग करके अपनी Next.js 14 और App Router वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
 
 ## विषय-सूची
 

package/docs/hi/intlayer_with_nextjs_15.md

@@ -31,39 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Intlayer के साथ अपना Next.js 15 अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
-
-<Tabs defaultTab="video">
-  <Tab label="वीडियो" value="video">
-
-<iframe title="Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="कोड" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-15-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="डेमो" value="demo">
-
-<iframe
-  src="https://next-15-intlayer-template-xt83.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="डेमो - intlayer-next-15-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-next-15-template) देखें।
+# Intlayer का उपयोग करके अपनी Next.js 15 वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
 
 ## विषय-सूची
 

package/docs/hi/intlayer_with_react_router_v7_fs_routes.md

@@ -166,99 +166,56 @@ app/
 - `_index` - Index route (parent path पर renders होता है)
 - `.` (dot) - Path segments को अलग करता है (उदा., `($locale).about` → `/:locale?/about`)
 
-## फ़ाइल-सिस्टम आधारित रूट्स के साथ React Router v7 एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
+#### Layout Component
 
-<Tabs defaultTab="video">
-  <Tab label="Video" value="video">
-
-<iframe title="How to translate an React Router v7 (File-System Routes) app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="डेमो" value="demo">
-
-<iframe
-  src="https://intlayer-react-router-v7.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="डेमो - intlayer-react-router-v7-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-template) on GitHub.
-
-अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig, Locales } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-  },
-};
-
-export default config;
-```
-
-> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
-
-<Steps>
-
-<Step number={3} title="अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें">
-
-अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:
-
-```typescript fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
+import { IntlayerProvider } from "react-intlayer";
+import {
+  isRouteErrorResponse,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
 
-export default defineConfig({
-  plugins: [reactRouter(), intlayer()],
-});
-```
+import type { Route } from "./+types/root";
 
-> `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
+import "./app.css";
 
-</Step>
+// ... अपरिवर्तित App, links और ErrorBoundary code
 
-<Step number={4} title="React Router v7 रूट्स कॉन्फ़िगर करें">
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
 
-अपने रूटिंग कॉन्फ़िगरेशन को स्थानीय-जानकारी वाले रूट्स के साथ सेट करें:
+  return { locale };
+}
 
-```typescript fileName="app/routes.ts"
-typescript;
-import { layout, route, type RouteConfig } from "@react-router/dev/routes";
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
 
-export default [
-  layout("routes/layout.tsx", [
-    route("/:lang?", "routes/page.tsx"), // स्थानीयकृत होम पेज
-    route("/:lang?/about", "routes/about/page.tsx"), // स्थानीयकृत अबाउट पेज
-  ]),
-] satisfies RouteConfig;
+  return (
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
 ```
 
-</Step>
-
-<Step number={5} title="लेआउट कंपोनेंट बनाएं">
-
-अपने रूट लेआउट और स्थानीय-विशिष्ट लेआउट सेट करें:
-
 #### रूट लेआउट
 
 ```tsx fileName="app/routes/layout.tsx"