@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.20

package/docs/hi/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Next.js 16 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -37,7 +37,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="वीडियो" value="video">
-  
+
 <iframe title="Next.js के लिए सबसे अच्छा i18n समाधान? 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>
@@ -117,24 +117,44 @@ GitHub पर [एप्लिकेशन टेम्प्लेट](https://
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
+
+> यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -209,9 +229,7 @@ export default config;
 import type { NextConfig } from "next";
 import { withIntlayer } from "next-intlayer/server";
 
-const nextConfig: NextConfig = {
-  /* यहाँ कॉन्फ़िग विकल्प */
-};
+const nextConfig: NextConfig = {/* यहाँ कॉन्फ़िग विकल्प */};
 
 export default withIntlayer(nextConfig);
 ```
@@ -773,7 +791,131 @@ return (
 
 </Step>
 
-<Step number={1} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
+<Step number={11} title="एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना" isOptional={true}>
+
+यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान लोकल का सम्मान करता है, आप एक कस्टम `Link` कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफ़िक्स करता है। उदाहरण के लिए, जब कोई फ़्रेंच भाषी उपयोगकर्ता "About" पृष्ठ के लिंक पर क्लिक करता है, तो उन्हें `/about` के बजाय `/fr/about` पर पुनर्निर्देशित किया जाता है।
+
+यह व्यवहार कई कारणों से उपयोगी है:
+
+- **SEO और उपयोगकर्ता अनुभव**: स्थानीयकृत URL खोज इंजनों को भाषा-विशिष्ट पृष्ठों को सही ढंग से अनुक्रमित करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
+- **स्थिरता**: अपने पूरे एप्लिकेशन में स्थानीयकृत लिंक का उपयोग करके, आप गारंटी देते हैं कि नेविगेशन वर्तमान लोकल के भीतर रहता है, जिससे अप्रत्याशित भाषा परिवर्तन रुक जाते हैं।
+- **रखरखाव**: स्थानीयकरण तर्क को एक ही घटक में केंद्रित करना URL के प्रबंधन को सरल बनाता है, जिससे आपके एप्लिकेशन के बढ़ने पर आपके कोडबेस को बनाए रखना और विस्तारित करना आसान हो जाता है।
+
+नीचे TypeScript में एक स्थानीयकृत `Link` घटक का कार्यान्वयन है:
+
+```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import { getLocalizedUrl } from "intlayer";
+import NextLink, { type LinkProps as NextLinkProps } from "next/link";
+import { useLocale } from "next-intlayer";
+import type { PropsWithChildren, FC } from "react";
+
+/**
+ * यह जांचने के लिए उपयोगिता फ़ंक्शन कि दिया गया URL बाहरी है या नहीं।
+ * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है।
+ */
+export const checkIsExternalLink = (href?: string): boolean =>
+  /^https?:\/\//.test(href ?? "");
+
+/**
+ * एक कस्टम लिंक घटक जो वर्तमान लोकल के आधार पर href विशेषता को अनुकूलित करता है।
+ * आंतरिक लिंक के लिए, यह URL को लोकल (उदा. /fr/about) के साथ प्रीफ़िक्स करने के लिए `getLocalizedUrl` का उपयोग करता है।
+ * यह सुनिश्चित करता है कि नेविगेशन उसी लोकल संदर्भ के भीतर रहे।
+ */
+export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
+  href,
+  children,
+  ...props
+}) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href.toString());
+
+  // यदि लिंक आंतरिक है और एक मान्य href प्रदान किया गया है, तो स्थानीयकृत URL प्राप्त करें।
+  const hrefI18n: NextLinkProps["href"] =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} {...props}>
+      {children}
+    </NextLink>
+  );
+};
+```
+
+#### यह कैसे काम करता है
+
+- **बाहरी लिंक का पता लगाना**:  
+  उपयोगिता फ़ंक्शन `checkIsExternalLink` निर्धारित करता है कि क्या URL बाहरी है। बाहरी लिंक अपरिवर्तित छोड़ दिए जाते हैं क्योंकि उन्हें स्थानीयकरण की आवश्यकता नहीं होती है।
+
+- **वर्तमान लोकल प्राप्त करना**:  
+  `useLocale` हुक वर्तमान लोकल (उदा. फ़्रेंच के लिए `fr`) प्रदान करता है।
+
+- **URL को स्थानीयकृत करना**:  
+  आंतरिक लिंक (अर्थात गैर-बाहरी) के लिए, URL को वर्तमान लोकल के साथ स्वचालित रूप से प्रीफ़िक्स करने के लिए `getLocalizedUrl` का उपयोग किया जाता है। इसका मतलब यह है कि यदि आपका उपयोगकर्ता फ़्रेंच में है, तो `href` के रूप में `/about` पास करने से यह `/fr/about` में बदल जाएगा।
+
+- **लिंक लौटना**:  
+  कॉम्पोनेंट स्थानीयकृत URL के साथ एक `<a>` तत्व लौटाता है, यह सुनिश्चित करते हुए कि नेविगेशन लोकल के अनुरूप है।
+
+अपने एप्लिकेशन में इस `Link` कॉम्पोनेंट को एकीकृत करके, आप एक सुसंगत और भाषा-जागरूक उपयोगकर्ता अनुभव बनाए रखते हैं और बेहतर SEO और उपयोगिता से भी लाभान्वित होते हैं।
+
+</Step>
+
+<Step number={12} title="सर्वर एक्शन्स (Server Actions) में वर्तमान लोकेल प्राप्त करें" isOptional={true}>
+
+यदि आपको सर्वर एक्शन (Server Action) के भीतर सक्रिय लोकेल की आवश्यकता है (उदाहरण के लिए, ईमेल को स्थानीयकृत करने या लोकेल-जागरूक लॉजिक चलाने के लिए), तो `next-intlayer/server` से `getLocale` को कॉल करें:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // लोकेल के साथ कुछ करें
+};
+```
+
+> `getLocale` फ़ंक्शन उपयोगकर्ता के लोकेल को निर्धारित करने के लिए एक कैस्केडिंग रणनीति का पालन करता है:
+>
+> 1. सबसे पहले, यह अनुरोध हेडर में एक लोकेल मान की जांच करता है जो प्रॉक्सी द्वारा सेट किया गया हो सकता है
+> 2. यदि हेडर में कोई लोकेल नहीं मिलता है, तो यह कुकीज़ में संग्रहीत लोकेल की तलाश करता है
+> 3. यदि कोई कुकी नहीं मिलती है, तो यह उनके ब्राउज़र सेटिंग्स से उपयोगकर्ता की पसंदीदा भाषा का पता लगाने का प्रयास करता है
+> 4. अंतिम उपाय के रूप में, यह एप्लिकेशन के कॉन्फ़िगर किए गए डिफ़ॉल्ट लोकेल पर वापस आ जाता है
+>
+> यह उपलब्ध संदर्भ के आधार पर सबसे उपयुक्त लोकेल का चयन सुनिश्चित करता है।
+
+</Step>
+
+<Step number={13} title="अपने बंडल आकार को अनुकूलित करें" isOptional={true}>
+
+जब आप `next-intlayer` का उपयोग करते हैं, तो डिक्शनरी डिफ़ॉल्ट रूप से हर पेज के बंडल में शामिल होती हैं। बंडल आकार को अनुकूलित करने के लिए, Intlayer एक वैकल्पिक SWC प्लगइन प्रदान करता है जो मैक्रोज़ का उपयोग करके `useIntlayer` कॉल्स को बुद्धिमानी से बदलता है। यह सुनिश्चित करता है कि डिक्शनरी केवल उन पेजों के बंडल में शामिल हों जो वास्तव में उनका उपयोग करते हैं।
+
+इस अनुकूलन को सक्षम करने के लिए, `@intlayer/swc` पैकेज इंस्टॉल करें। एक बार इंस्टॉल हो जाने पर, `next-intlayer` स्वचालित रूप से इस प्लगइन का पता लगाएगा और उपयोग करेगा:
+
+```bash packageManager="npm"
+npm install @intlayer/swc --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/swc --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/swc --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/swc --dev
+```
+
+> नोट: यह अनुकूलन केवल Next.js 13 और उससे ऊपर के लिए उपलब्ध है।
+
+> नोट: यह पैकेज डिफ़ॉल्ट रूप से इंस्टॉल नहीं होता क्योंकि SWC प्लगइन्स अभी Next.js में प्रयोगात्मक हैं। भविष्य में इसमें बदलाव हो सकता है।
+> </Step>
+
+<Step number={14} title="अपने घटकों की सामग्री निकालें" isOptional={true}>
 
 यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
 
@@ -888,74 +1030,72 @@ bun run build # Or bun run dev
 
 </Step>
 
-<Step number={11} title="एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना" isOptional={true}>
+</Steps>
 
-यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान लोकल का सम्मान करता है, आप एक कस्टम `Link` कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफ़िक्स करता है। उदाहरण के लिए, जब कोई फ़्रेंच भाषी उपयोगकर्ता "About" पृष्ठ के लिंक पर क्लिक करता है, तो उन्हें `/about` के बजाय `/fr/about` पर पुनर्निर्देशित किया जाता है।
+### TypeScript कॉन्फ़िगर करें
 
-यह व्यवहार कई कारणों से उपयोगी है:
+Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
 
-- **SEO और उपयोगकर्ता अनुभव**: स्थानीयकृत URL खोज इंजनों को भाषा-विशिष्ट पृष्ठों को सही ढंग से अनुक्रमित करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
-- **स्थिरता**: अपने पूरे एप्लिकेशन में स्थानीयकृत लिंक का उपयोग करके, आप गारंटी देते हैं कि नेविगेशन वर्तमान लोकल के भीतर रहता है, जिससे अप्रत्याशित भाषा परिवर्तन रुक जाते हैं।
-- **रखरखाव**: स्थानीयकरण तर्क को एक ही घटक में केंद्रित करना URL के प्रबंधन को सरल बनाता है, जिससे आपके एप्लिकेशन के बढ़ने पर आपके कोडबेस को बनाए रखना और विस्तारित करना आसान हो जाता है।
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-नीचे TypeScript में एक स्थानीयकृत `Link` घटक का कार्यान्वयन है:
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
-"use client";
+सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं।
 
-import { getLocalizedUrl } from "intlayer";
-import NextLink, { type LinkProps as NextLinkProps } from "next/link";
-import { useLocale } from "next-intlayer";
-import type { PropsWithChildren, FC } from "react";
+```json5 fileName="tsconfig.json"
+{
+  // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
+  "include": [
+    // ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
+    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें
+  ],
+}
+```
 
-/**
- * यह जांचने के लिए उपयोगिता फ़ंक्शन कि दिया गया URL बाहरी है या नहीं।
- * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है।
- */
-export const checkIsExternalLink = (href?: string): boolean =>
-  /^https?:\/\//.test(href ?? "");
+> यदि आप next-intlayer@<=6.x.x का उपयोग कर रहे हैं, तो आपको Next.js 16 एप्लिकेशन को Turbopack के साथ सही ढंग से काम करने के लिए `--turbopack` फ़्लैग रखना होगा। हम इस सीमा से बचने के लिए next-intlayer@>=7.x.x का उपयोग करने की अनुशंसा करते हैं।
 
-/**
- * एक कस्टम लिंक घटक जो वर्तमान लोकल के आधार पर href विशेषता को अनुकूलित करता है।
- * आंतरिक लिंक के लिए, यह URL को लोकल (उदा. /fr/about) के साथ प्रीफ़िक्स करने के लिए `getLocalizedUrl` का उपयोग करता है।
- * यह सुनिश्चित करता है कि नेविगेशन उसी लोकल संदर्भ के भीतर रहे।
- */
-export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
-  href,
-  children,
-  ...props
-}) => {
-  const { locale } = useLocale();
-  const isExternalLink = checkIsExternalLink(href.toString());
+### Git कॉन्फ़िगरेशन
 
-  // यदि लिंक आंतरिक है और एक मान्य href प्रदान किया गया है, तो स्थानीयकृत URL प्राप्त करें।
-  const hrefI18n: NextLinkProps["href"] =
-    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+यह अनुशंसा की जाती है कि Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा किया जाए। इससे आप उन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
 
-  return (
-    <NextLink href={hrefI18n} {...props}>
-      {children}
-    </NextLink>
-  );
-};
+ऐसा करने के लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
+
+```plaintext fileName=".gitignore"
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
+.intlayer
 ```
 
-#### यह कैसे काम करता है
+### VS कोड एक्सटेंशन
 
-- **बाहरी लिंक का पता लगाना**:  
-  उपयोगिता फ़ंक्शन `checkIsExternalLink` निर्धारित करता है कि क्या URL बाहरी है। बाहरी लिंक अपरिवर्तित छोड़ दिए जाते हैं क्योंकि उन्हें स्थानीयकरण की आवश्यकता नहीं होती है।
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल कर सकते हैं।
 
-- **वर्तमान लोकल प्राप्त करना**:  
-  `useLocale` हुक वर्तमान लोकल (उदा. फ़्रेंच के लिए `fr`) प्रदान करता है।
+[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-- **URL को स्थानीयकृत करना**:  
-  आंतरिक लिंक (अर्थात गैर-बाहरी) के लिए, URL को वर्तमान लोकल के साथ स्वचालित रूप से प्रीफ़िक्स करने के लिए `getLocalizedUrl` का उपयोग किया जाता है। इसका मतलब यह है कि यदि आपका उपयोगकर्ता फ़्रेंच में है, तो `href` के रूप में `/about` पास करने से यह `/fr/about` में बदल जाएगा।
+यह एक्सटेंशन प्रदान करता है:
 
-- **लिंक लौटना**:  
-  कॉम्पोनेंट स्थानीयकृत URL के साथ एक `<a>` तत्व लौटाता है, यह सुनिश्चित करते हुए कि नेविगेशन लोकल के अनुरूप है।
+- अनुवाद कुंजियों के लिए **ऑटोकम्प्लीशन**।
+- **अनुवादों के लिए रियल-टाइम त्रुटि पहचान।**
+- **अनुवादित सामग्री के इनलाइन पूर्वावलोकन।**
+- **तेजी से क्रियाएं** जो अनुवादों को आसानी से बनाने और अपडेट करने में मदद करती हैं।
 
-अपने एप्लिकेशन में इस `Link` कॉम्पोनेंट को एकीकृत करके, आप एक सुसंगत और भाषा-जागरूक उपयोगकर्ता अनुभव बनाए रखते हैं और बेहतर SEO और उपयोगिता से भी लाभान्वित होते हैं।
+विस्तृत जानकारी के लिए, एक्सटेंशन का उपयोग कैसे करें, देखें [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)।
 
-</Step>
+### Turbopack पर शब्दकोश परिवर्तनों की निगरानी करें
 
-</Steps>
+जब `next dev --turbopack` कमांड के साथ विकास सर्वर के रूप में Turbopack का उपयोग किया जाता है, तो शब्दकोश परिवर्तन डिफ़ॉल्ट रूप से स्वचालित रूप से पता नहीं चलते हैं।
+
+यह सीमा इसलिए होती है क्योंकि Turbopack आपकी सामग्री फ़ाइलों में परिवर्तनों की निगरानी के लिए समानांतर में webpack प्लगइन्स नहीं चला सकता है। इसके समाधान के लिए, आपको विकास सर्वर और Intlayer बिल्ड वॉचर दोनों को एक साथ चलाने के लिए `intlayer watch` कमांड का उपयोग करना होगा।
+
+```json5 fileName="package.json"
+{
+  // ... आपकी मौजूदा package.json कॉन्फ़िगरेशन
+  "scripts": {
+    // ... आपकी मौजूदा स्क्रिप्ट कॉन्फ़िगरेशन
+    "dev": "intlayer watch --with 'next dev'",
+  },
+}
+```
+
+### आगे बढ़ें
+
+आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या अपनी सामग्री को [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।

package/docs/hi/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Next.js ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -88,28 +88,48 @@ GitHub पर [एप्लिकेशन टेम्पलेट](https://git
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
+
+> यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
 npm install @intlayer/babel --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
 pnpm add @intlayer/babel --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
 yarn add @intlayer/babel --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
 bun add @intlayer/babel --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/hi/intlayer_with_nextjs_no_locale_path.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Next.js 16 ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -31,7 +31,7 @@ author: aymericzip
 
 <Tabs defaultTab="video">
   <Tab label="वीडियो" value="video">
-  
+
 <iframe title="Next.js के लिए सबसे अच्छा i18n समाधान? 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>
@@ -100,24 +100,44 @@ GitHub पर [Application Template](https://github.com/aymericzip/intlayer-next
 
 आवश्यक पैकेज npm का उपयोग करके इंस्टॉल करें:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
+
+> यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -195,9 +215,7 @@ export default config;
 import type { NextConfig } from "next";
 import { withIntlayer } from "next-intlayer/server";
 
-const nextConfig: NextConfig = {
-  /* कॉन्फ़िग विकल्प यहाँ */
-};
+const nextConfig: NextConfig = {/* कॉन्फ़िग विकल्प यहाँ */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/hi/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
 description: "अब i18next की जरूरत नहीं। 2026 में Next.js Page Router ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
 keywords:
@@ -58,6 +58,10 @@ author: aymericzip
   </Tab>
 </Tabs>
 
+## विषय-सूची
+
+<TOC/>
+
 ## विकल्पों पर इन्टलेयर क्यों?
 
 `नेक्स्ट-इंटल` या `आई18नेक्स्ट` जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
@@ -104,24 +108,44 @@ author: aymericzip
 
 अपनी पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
+
+> यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/hi/intlayer_with_nuxt.md

@@ -74,7 +74,7 @@ Intlayer को **बहुभाषी रूटिंग**, **लोकेल
 
 <Tabs defaultTab="video">
   <Tab label="वीडियो" value="video">
-  
+
 <iframe title="अपने Nuxt और Vue ऐप को Intlayer का उपयोग करके कैसे अनुवादित करें? 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/nhUcUAVQ6eQ?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -110,28 +110,48 @@ GitHub पर [एप्लिकेशन टेम्पलेट](https://git
 
 npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> `--interactive` ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
+
+> यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
+
 ```bash packageManager="npm"
 npm install intlayer vue-intlayer
 npm install --save-dev nuxt-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer vue-intlayer
 pnpm add --save-dev nuxt-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer vue-intlayer
 yarn add --save-dev nuxt-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer vue-intlayer
 bun add --dev nuxt-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -593,33 +613,6 @@ export default aboutPageContent;
 
 </Steps>
 
-### (वैकल्पिक) चरण 6b: नेविगेशन के साथ एक लेआउट बनाएं
-
-Nuxt लेआउट्स आपको अपने पृष्ठों के लिए एक सामान्य संरचना परिभाषित करने की अनुमति देते हैं। एक डिफ़ॉल्ट लेआउट बनाएं जिसमें locale स्विचर और नेविगेशन शामिल हो:
-
-```vue fileName="layouts/default.vue"
-<script setup lang="ts">
-import Links from "~/components/Links.vue";
-import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
-</script>
-
-<template>
-  <div>
-    <header>
-      <LocaleSwitcher />
-    </header>
-    <main>
-      <slot />
-    </main>
-
-    <Links href="/">Home</Links>
-    <Links href="/about">About</Links>
-  </div>
-</template>
-```
-
-`Links` कंपोनेंट (नीचे दिखाया गया) यह सुनिश्चित करता है कि आंतरिक नेविगेशन लिंक स्वचालित रूप से स्थानीयकृत हों।
-
 ### Git कॉन्फ़िगरेशन
 
 यह अनुशंसित है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप इन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।