@intlayer/docs 5.8.1-canary.0 → 6.0.0-canary.0

package/docs/hi/intlayer_with_tanstack.md

@@ -1,348 +1,437 @@
 ---
-createdAt: 2025-08-11
-updatedAt: 2025-08-11
-title: TanStack Start (React) में Intlayer के साथ शुरुआत करना
-description: Intlayer का उपयोग करके अपने TanStack Start ऐप में i18n जोड़ें-कंपोनेंट-स्तरीय शब्दकोश, स्थानीयकृत URL, और SEO-अनुकूल मेटाडेटा।
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Tanstack Start में Intlayer के साथ शुरुआत करना
+description: जानें कि कैसे Intlayer का उपयोग करके अपने Tanstack Start एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) जोड़ें। इस व्यापक गाइड का पालन करें ताकि आपका ऐप बहुभाषी और लोकल-आधारित रूटिंग के साथ हो।
 keywords:
   - अंतरराष्ट्रीयकरण
-  - दस्तावेज़ीकरण
+  - प्रलेखन
   - Intlayer
-  - TanStack Start
-  - TanStack Router
+  - Tanstack Start
   - React
   - i18n
-  - JavaScript
+  - TypeScript
+  - लोकल रूटिंग
 slugs:
   - doc
   - environment
+  - vite-and-react
   - tanstack-start
+applicationTemplate: https://github.com/AydinTheFirst/tanstack-start-intlayer
+author: AydinTheFirst
 ---
 
-# Intlayer और TanStack Start (React) के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
+# Intlayer और Tanstack Start के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
+
+यह गाइड दिखाता है कि कैसे **Intlayer** को Tanstack Start प्रोजेक्ट्स में सहज अंतरराष्ट्रीयकरण के लिए एकीकृत किया जाए, जिसमें लोकल-आधारित रूटिंग, TypeScript समर्थन, और आधुनिक विकास प्रथाएँ शामिल हैं।
 
 ## Intlayer क्या है?
 
-**Intlayer** React ऐप्स के लिए एक ओपन-सोर्स i18n टूलकिट है। यह आपको प्रदान करता है:
+**Intlayer** एक नवोन्मेषी, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
 
-- **कंपोनेंट-स्थानीय शब्दकोश** TypeScript सुरक्षा के साथ।
-- **डायनामिक मेटाडेटा और रूट्स** (SEO-तैयार)।
-- **रनटाइम लोकल स्विचिंग** (और लोकल का पता लगाने/सहेजने के लिए सहायक)।
-- **Vite प्लगइन** बिल्ड-टाइम ट्रांसफॉर्म और डेवलपर अनुभव (DX) के लिए।
+Intlayer के साथ, आप कर सकते हैं:
 
-यह गाइड दिखाता है कि Intlayer को **TanStack Start** प्रोजेक्ट में कैसे जोड़ा जाए (जो अंतर्निहित रूप से Vite का उपयोग करता है और रूटिंग/SSR के लिए TanStack Router का उपयोग करता है)।
+- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन** करें, जो कि कंपोनेंट स्तर पर होते हैं।
+- **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत** करें।
+- **स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें**, जिससे ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार होता है।
+- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकल पहचान और स्विचिंग।
+- **Tanstack Start की फ़ाइल-आधारित रूटिंग सिस्टम के साथ लोकल-आवेयर रूटिंग सक्षम करें।**
 
 ---
 
-## चरण 1: निर्भरताएँ स्थापित करें
+## Tanstack Start एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-```bash
-# npm
-npm i intlayer react-intlayer
-npm i -D vite-intlayer
+### चरण 1: प्रोजेक्ट बनाएं
 
-# pnpm
-pnpm add intlayer react-intlayer
-pnpm add -D vite-intlayer
+TanStack Start वेबसाइट पर उपलब्ध [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) गाइड का पालन करके एक नया TanStack Start प्रोजेक्ट बनाएं।
+
+### चरण 2: Intlayer पैकेज इंस्टॉल करें
 
-# yarn
-yarn add intlayer react-intlayer
-yarn add -D vite-intlayer
+अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
 ```
 
-- **intlayer**: कोर (कॉन्फ़िग, शब्दकोश, CLI/ट्रांसफॉर्म)।
-- **react-intlayer**: `<IntlayerProvider>` + React के लिए हुक्स।
-- **vite-intlayer**: Vite प्लगइन, साथ ही वैकल्पिक मिडलवेयर लोकल डिटेक्शन/रिडायरेक्ट के लिए (डेवलपमेंट और SSR/पूर्वावलोकन में काम करता है; प्रोडक्शन SSR के लिए इसे `dependencies` में ले जाएं)।
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+```
 
----
+- **intlayer**
+
+- **intlayer**
+
+  कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md), ट्रांसपाइलेशन, और [CLI कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_cli.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
+
+- **react-intlayer**
+  वह पैकेज जो Intlayer को React एप्लिकेशन के साथ एकीकृत करता है। यह React अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक्स प्रदान करता है।
+
+- **vite-intlayer**
+  इसमें Vite प्लगइन शामिल है जो Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा लोकल का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी शामिल है।
 
-## चरण 2: Intlayer कॉन्फ़िगर करें
+### चरण 3: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
 
-अपने प्रोजेक्ट रूट पर `intlayer.config.ts` बनाएं:
+अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
 
-```ts fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+import { Locales } from "intlayer";
 
 const config: IntlayerConfig = {
   internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
+    defaultLocale: Locales.ENGLISH, // डिफ़ॉल्ट भाषा
+    locales: [
+      Locales.ENGLISH, // अंग्रेज़ी
+      Locales.FRENCH, // फ्रेंच
+      Locales.SPANISH, // स्पेनिश
+      // आपकी अन्य भाषाएँ
+    ],
   },
-  // आप contentDir, contentFileExtensions, middleware विकल्प आदि को भी समायोजित कर सकते हैं।
 };
 
 export default config;
 ```
 
-यदि आप `cjs`/`mjs` पसंद करते हैं तो CommonJS/ESM वेरिएंट आपके मूल दस्तावेज़ के समान ही हैं।
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
 
-> पूर्ण कॉन्फ़िग संदर्भ के लिए: Intlayer के कॉन्फ़िगरेशन दस्तावेज़ देखें।
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH, // डिफ़ॉल्ट भाषा
+    locales: [
+      Locales.ENGLISH, // अंग्रेज़ी
+      Locales.FRENCH, // फ्रेंच
+      Locales.SPANISH, // स्पेनिश
+      // आपकी अन्य भाषाएँ
+    ],
+  },
+};
 
----
+export default config;
+```
 
-## चरण 3: Vite प्लगइन (और वैकल्पिक मिडलवेयर) जोड़ें
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
 
-**TanStack Start Vite का उपयोग करता है**, इसलिए Intlayer के प्लगइन को अपने `vite.config.ts` में जोड़ें:
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH, // डिफ़ॉल्ट भाषा
+    locales: [
+      Locales.ENGLISH, // अंग्रेज़ी
+      Locales.FRENCH, // फ्रेंच
+      Locales.SPANISH, // स्पेनिश
+      // आपकी अन्य भाषाएँ
+    ],
+  },
+};
+
+module.exports = config;
+```
+
+> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-```ts fileName="vite.config.ts"
+### चरण 4: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+
+अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayerMiddlewarePlugin, intlayerPlugin } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
-    react(),
+    reactRouter(),
+    tsconfigPaths(),
     intlayerPlugin(),
-    // वैकल्पिक लेकिन स्थानीय पहचान, कुकीज़ और रीडायरेक्ट के लिए अनुशंसित:
-    intLayerMiddlewarePlugin(),
+    intlayerMiddlewarePlugin(),
   ],
 });
 ```
 
-> यदि आप SSR तैनात करते हैं, तो `vite-intlayer` को `dependencies` में स्थानांतरित करें ताकि मिडलवेयर उत्पादन में चले।
+> `intlayerPlugin()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को बेहतर बनाने के लिए उपनाम प्रदान करता है।
 
----
+### चरण 5: लेआउट कॉम्पोनेंट बनाएं
+
+अपने रूट लेआउट और स्थानीय-विशिष्ट लेआउट सेट करें:
+
+#### रूट लेआउट
 
-## चरण 4: अपनी सामग्री घोषित करें
+```tsx fileName="src/routes/{-$locale}/route.tsx" codeFormat="typescript"
+// src/routes/{-$locale}/route.tsx
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
+
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes";
+
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
+
+function LayoutComponent() {
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
 
-अपने शब्दकोशों को `./src` (डिफ़ॉल्ट `contentDir`) के अंतर्गत कहीं भी रखें। उदाहरण:
+### चरण 6: अपनी सामग्री घोषित करें
 
-```tsx fileName="src/app.content.tsx"
-import { t, type Dictionary } from "intlayer";
-import type { ReactNode } from "react";
+अपने अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
+
+```tsx fileName="src/contents/page.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+import { t } from "intlayer";
 
 const appContent = {
-  key: "app",
   content: {
-    viteLogo: t({ en: "Vite logo", fr: "Logo Vite", es: "Logo Vite" }),
-    reactLogo: t({ en: "React logo", fr: "Logo React", es: "Logo React" }),
+    links: {
+      about: t({
+        en: "About",
+        es: "Acerca de",
+        fr: "À propos",
+      }),
+      home: t({
+        en: "होम",
+        es: "Inicio",
+        fr: "Accueil",
+      }),
+    },
+    meta: {
+      description: t({
+        en: "यह Intlayer को TanStack Router के साथ उपयोग करने का एक उदाहरण है",
+        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
+        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
+      }),
+    },
     title: t({
-      en: "TanStack Start + React",
-      fr: "TanStack Start + React",
-      es: "TanStack Start + React",
-    }),
-    count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
-    edit: t<ReactNode>({
-      en: (
-        <>
-          <code>src/routes/index.tsx</code> को संपादित करें और HMR परीक्षण के
-          लिए सहेजें
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
-          HMR
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
-        </>
-      ),
-    }),
-    readTheDocs: t({
-      en: "लोगो पर क्लिक करके अधिक जानें",
-      fr: "Cliquez sur les logos pour en savoir plus",
-      es: "Haz clic en los logotipos para saber más",
+      en: "Intlayer + TanStack Router में आपका स्वागत है",
+      es: "Bienvenido a Intlayer + TanStack Router",
+      fr: "Bienvenue à Intlayer + TanStack Router",
     }),
   },
+  key: "app",
 } satisfies Dictionary;
 
 export default appContent;
 ```
 
-JSON/ESM/CJS संस्करण आपके मूल दस्तावेज़ की तरह ही काम करते हैं।
+> आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब वे `contentDir` निर्देशिका में शामिल हो जाती हैं (डिफ़ॉल्ट रूप से, `./app`)। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हैं (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
 
-> TSX सामग्री? यदि आपकी सेटअप को इसकी आवश्यकता है तो `import React from "react"` करना न भूलें।
+> अधिक विवरण के लिए, [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md) देखें।
 
----
+### चरण 7: स्थानीय-ज्ञानी (Locale-Aware) घटक और हुक बनाएं
 
-## चरण 5: TanStack Start को Intlayer के साथ लपेटें
+स्थानीय-ज्ञानी नेविगेशन के लिए एक `LocalizedLink` घटक बनाएं:
 
-TanStack Start के साथ, आपका **रूट रूट** प्रदाताओं को सेट करने के लिए सही स्थान है।
+```tsx fileName="src/components/localized-link.tsx" codeFormat="typescript"
+// src/components/localized-link.tsx
+// eslint-disable-next-line no-restricted-imports
+import { Link, type LinkProps } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-```tsx fileName="src/routes/__root.tsx"
-import {
-  Outlet,
-  createRootRoute,
-  Link as RouterLink,
-} from "@tanstack/react-router";
-import { IntlayerProvider, useIntlayer } from "react-intlayer";
-
-function AppShell() {
-  // शीर्ष स्तर पर एक शब्दकोश का उपयोग करने का उदाहरण:
-  const content = useIntlayer("app");
+type LocalizedLinkProps = {
+  to: string;
+} & Omit<LinkProps, "to">;
 
-  return (
-    <div>
-      <nav className="flex gap-3 p-3">
-        <RouterLink to="/">होम</RouterLink>
-        <RouterLink to="/about">के बारे में</RouterLink>
-      </nav>
-      <main className="p-6">
-        <h1>{content.title}</h1>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
+export function LocalizedLink(props: LocalizedLinkProps) {
+  const { locale } = useLocale();
 
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      <AppShell />
-    </IntlayerProvider>
-  ),
-});
-```
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
 
-फिर अपने पृष्ठों में अपनी सामग्री का उपयोग करें:
+  const to = isExternal(props.to)
+    ? props.to
+    : getLocalizedUrl(props.to, locale);
 
-```tsx fileName="src/routes/index.tsx"
-import { createFileRoute } from "@tanstack/react-router";
-import { useIntlayer } from "react-intlayer";
-import reactLogo from "../assets/react.svg";
-
-export const Route = createFileRoute("/")({
-  component: () => {
-    const content = useIntlayer("app");
-    return (
-      <>
-        <button>{content.count}0</button>
-        <p>{content.edit}</p>
-        <img
-          src={reactLogo}
-          alt={content.reactLogo.value}
-          width={48}
-          height={48}
-        />
-        <p className="opacity-70">{content.readTheDocs}</p>
-      </>
-    );
-  },
-});
+  return <Link {...props} to={to as LinkProps["to"]} />;
+}
 ```
 
-> स्ट्रिंग गुण (`alt`, `title`, `aria-label`, …) को `.value` की आवश्यकता होती है:
->
-> ```jsx
-> <img alt={c.reactLogo.value} />
-> ```
+प्रोग्रामेटिक नेविगेशन के लिए `useLocalizedNavigate` हुक बनाएं:
 
----
+```tsx fileName="src/hooks/useLocalizedNavigate.tsx" codeFormat="typescript"
+// src/hooks/useLocalizedNavigate.tsx
+// eslint-disable-next-line no-restricted-imports
+import { NavigateOptions, useNavigate } from "@tanstack/react-router";
+import { getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
 
-## (वैकल्पिक) चरण 6: भाषा स्विचिंग (क्लाइंट)
+type LocalizedNavigateOptions = {
+  to: string;
+} & Omit<NavigateOptions, "to">;
 
-```tsx fileName="src/components/LocaleSwitcher.tsx"
-import { Locales } from "intlayer";
-import { useLocale } from "react-intlayer";
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
+  const { locale } = useLocale();
 
-export function LocaleSwitcher() {
-  const { setLocale } = useLocale();
-  return (
-    <div className="flex gap-2">
-      <button onClick={() => setLocale(Locales.ENGLISH)}>अंग्रेज़ी</button>
-      <button onClick={() => setLocale(Locales.FRENCH)}>फ्रेंच</button>
-      <button onClick={() => setLocale(Locales.SPANISH)}>स्पेनिश</button>
-    </div>
-  );
-}
+  const isExternal = (to: string) => {
+    return /^(https?:)?\/\//.test(to);
+  };
+
+  const localizedNavigate = (options: LocalizedNavigateOptions) => {
+    const to = isExternal(options.to)
+      ? options.to
+      : getLocalizedUrl(options.to, locale);
+
+    navigate({ ...options, to: to as NavigateOptions["to"] });
+  };
+
+  return localizedNavigate;
+};
 ```
 
----
+### चरण 8: अपने पृष्ठों में Intlayer का उपयोग करें
 
-## (वैकल्पिक) चरण 7: स्थानीयकृत रूटिंग (SEO-अनुकूल URL)
+अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ तक पहुँचें:
 
-TanStack Start के साथ आपके पास **दो अच्छे पैटर्न** हैं। एक चुनें।
+#### रूट रीडायरेक्ट पेज
 
-`src/routes/$locale/` नामक एक डायनेमिक सेगमेंट फ़ोल्डर बनाएं ताकि आपके URL `/:locale/...` हों। `$locale` लेआउट में, `params.locale` को मान्य करें, `<IntlayerProvider locale=...>` सेट करें, और एक `<Outlet />` रेंडर करें। यह तरीका सीधा है, लेकिन आप अपने बाकी रूट्स को `$locale` के नीचे माउंट करेंगे, और यदि आप डिफ़ॉल्ट लोकल को प्रीफिक्स नहीं करना चाहते हैं तो आपको एक अतिरिक्त गैर-प्रिफिक्स्ड ट्री की आवश्यकता होगी।
+```tsx fileName="src/routes/page.tsx" codeFormat="typescript"
+// src/routes/page.tsx
+import { useLocale } from "react-intlayer";
+import { Navigate } from "react-router";
 
----
+export default function Page() {
+  const { locale } = useLocale();
 
-## (वैकल्पिक) चरण 8: लोकैल बदलते समय URL अपडेट करें
+  return <Navigate replace to={locale} />;
+}
+```
 
-पैटर्न A (basepath) के साथ, लोकैल बदलना मतलब है **एक अलग basepath पर नेविगेट करना**:
+#### स्थानीयकृत होम पेज
 
-```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
-import { useRouter } from "@tanstack/react-router";
-import { Locales, getLocalizedUrl } from "intlayer";
-import { useLocale } from "react-intlayer";
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute } from "@tanstack/react-router";
+import { getIntlayer } from "intlayer";
+import { useIntlayer } from "react-intlayer";
 
-export function LocaleSwitcherNavigate() {
-  const router = useRouter();
-  const { locale, setLocale } = useLocale();
-
-  const change = async (next: Locales) => {
-    if (next === locale) return;
-    const nextPath = getLocalizedUrl(
-      window.location.pathname + window.location.search,
-      next
-    );
-    await router.navigate({ to: nextPath }); // इतिहास को संरक्षित करता है
-    setLocale(next);
-  };
+import LocaleSwitcher from "@/components/locale-switcher";
+import { LocalizedLink } from "@/components/localized-link";
+import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: ({ params }) => {
+    const { locale } = params;
+    const metaContent = getIntlayer("app", locale);
+
+    return {
+      meta: [
+        { title: metaContent.title },
+        { content: metaContent.meta.description, name: "description" },
+      ],
+    };
+  },
+});
+
+function RouteComponent() {
+  const content = useIntlayer("app");
+  const navigate = useLocalizedNavigate();
 
   return (
-    <div className="flex gap-2">
-      <button onClick={() => change(Locales.ENGLISH)}>अंग्रेज़ी</button>
-      <button onClick={() => change(Locales.FRENCH)}>फ्रेंच</button>
-      <button onClick={() => change(Locales.SPANISH)}>स्पेनिश</button>
+    <div className="grid place-items-center h-screen">
+      <div className="flex flex-col gap-4 items-center text-center">
+        {content.title}
+        <LocaleSwitcher />
+        <div className="flex gap-4">
+          <a href="/">इंडेक्स</a>
+          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
+          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
+        </div>
+        <div className="flex gap-4">
+          <button onClick={() => navigate({ to: "/" })}>
+            {content.links.home}
+          </button>
+          <button onClick={() => navigate({ to: "/about" })}>
+            {content.links.about}
+          </button>
+        </div>
+      </div>
     </div>
   );
 }
 ```
 
----
+> `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md) देखें।
 
-## (वैकल्पिक) चरण 9: `<html lang>` और `dir` (TanStack Start Document)
+### चरण 9: एक लोकल स्विचर कंपोनेंट बनाएं
 
-TanStack Start एक **Document** (रूट HTML शेल) प्रदान करता है जिसे आप अनुकूलित कर सकते हैं। पहुँच/SEO के लिए `lang` और `dir` सेट करें:
+उपयोगकर्ताओं को भाषाएं बदलने की अनुमति देने के लिए एक कंपोनेंट बनाएं:
 
-```tsx fileName="src/routes/__root.tsx" {4,15}
-import { Outlet, createRootRoute } from "@tanstack/react-router";
-import { IntlayerProvider } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
+```tsx fileName="src/components/locale-switcher.tsx" codeFormat="typescript"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  Locales,
+} from "intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
+
+export default function LocaleSwitcher() {
+  const { pathname, searchStr } = useLocation();
+  const content = useIntlayer("locale-switcher");
+
+  const { availableLocales, locale, setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      const pathWithLocale = getLocalizedUrl(pathname + searchStr, newLocale);
+      location.replace(pathWithLocale);
+    },
+  });
 
-function Document({
-  locale,
-  children,
-}: {
-  locale: string;
-  children: React.ReactNode;
-}) {
   return (
-    <html lang={locale} dir={getHTMLTextDir(locale)}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {/* ... */}
-      </head>
-      <body>{children}</body>
-    </html>
+    <select
+      aria-label={content.label.toString()}
+      onChange={(e) => setLocale(e.target.value)}
+      value={locale}
+    >
+      {availableLocales.map((localeItem) => (
+        <option
+          dir={getHTMLTextDir(localeItem)}
+          key={localeItem}
+          lang={localeItem}
+          value={localeItem}
+        >
+          {/* उदाहरण: Français (फ्रेंच) */}
+          {getLocaleName(localeItem, locale)} (
+          {getLocaleName(localeItem, Locales.ENGLISH)})
+        </option>
+      ))}
+    </select>
   );
 }
-
-export const Route = createRootRoute({
-  component: () => (
-    <IntlayerProvider>
-      {/* यदि आप सर्वर पर locale की गणना करते हैं, तो इसे Document में पास करें; अन्यथा क्लाइंट पोस्ट-हाइड्रेशन के बाद सही कर देगा */}
-      <Document locale={document?.documentElement?.lang || "en"}>
-        <Outlet />
-      </Document>
-    </IntlayerProvider>
-  ),
-});
 ```
 
-क्लाइंट-साइड सुधार के लिए, आप अपना छोटा हुक भी रख सकते हैं:
+> `useLocale` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md) देखें।
 
-```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+### चरण 10: HTML एट्रिब्यूट्स प्रबंधन जोड़ें (वैकल्पिक)
+
+HTML lang और dir एट्रिब्यूट्स को प्रबंधित करने के लिए एक हुक बनाएं:
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
+// src/hooks/useI18nHTMLAttributes.tsx
+import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
-import { getHTMLTextDir } from "intlayer";
 
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
+
   useEffect(() => {
     document.documentElement.lang = locale;
     document.documentElement.dir = getHTMLTextDir(locale);
@@ -350,89 +439,185 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
 
----
+फिर इसे अपने रूट कॉम्पोनेंट में उपयोग करें:
 
-## (वैकल्पिक) चरण 10: स्थानीयकृत लिंक कॉम्पोनेंट
+```tsx fileName="src/routes/{-$locale}/index.tsx" codeFormat="typescript"
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router";
+import { configuration } from "intlayer";
+import { IntlayerProvider, useLocale } from "react-intlayer";
 
-TanStack Router एक `<Link/>` प्रदान करता है, लेकिन यदि आपको कभी एक साधारण `<a>` की आवश्यकता हो जो आंतरिक URL को स्वचालित रूप से प्रीफिक्स करे:
+import { useI18nHTMLAttributes } from "@/hooks/useI18nHTMLAttributes"; // हुक को इम्पोर्ट करें
 
-```tsx fileName="src/components/Link.tsx"
-import { getLocalizedUrl } from "intlayer";
-import {
-  forwardRef,
-  type AnchorHTMLAttributes,
-  type DetailedHTMLProps,
-} from "react";
-import { useLocale } from "react-intlayer";
+export const Route = createFileRoute("/{-$locale}")({
+  component: LayoutComponent,
+});
 
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {}
-
-const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
-
-// बाहरी URL की जांच करने के लिए फ़ंक्शन
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, children, ...props }, ref) => {
-    const { locale } = useLocale();
-    // यदि href आंतरिक URL है, तो इसे स्थानीयकृत URL में बदलें
-    const hrefI18n =
-      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
-    return (
-      <a href={hrefI18n} ref={ref} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
-Link.displayName = "Link";
+function LayoutComponent() {
+  useI18nHTMLAttributes(); // इस लाइन को जोड़ें
+
+  const { locale } = Route.useParams();
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
 ```
 
-> यदि आप पैटर्न A (basepath) का उपयोग करते हैं, तो TanStack का `<Link to="/about" />` पहले से ही `basepath` के माध्यम से `/fr/about` को हल करता है, इसलिए एक कस्टम लिंक वैकल्पिक है।
+### चरण 11: अपनी एप्लिकेशन को बिल्ड और रन करें
 
----
+कंटेंट डिक्शनरीज़ बनाएं और अपनी एप्लिकेशन चलाएं:
 
-## TypeScript
+```bash packageManager="npm"
+# Intlayer डिक्शनरीज़ बनाएं
+npm run intlayer:build
+
+# डेवलपमेंट सर्वर शुरू करें
+npm run dev
+```
 
-Intlayer द्वारा उत्पन्न प्रकारों को शामिल करें:
+```bash packageManager="pnpm"
+# Intlayer डिक्शनरीज़ बनाएं
+pnpm intlayer:build
+
+# डेवलपमेंट सर्वर शुरू करें
+pnpm dev
+```
+
+```bash packageManager="yarn"
+# Intlayer डिक्शनरीज़ बनाएं
+yarn intlayer:build
+
+# डेवलपमेंट सर्वर शुरू करें
+yarn dev
+```
+
+### चरण 12: TypeScript कॉन्फ़िगर करें (वैकल्पिक)
+
+Intlayer मॉड्यूल ऑगमेंटेशन का उपयोग करता है ताकि TypeScript के लाभ प्राप्त किए जा सकें और आपका कोडबेस मजबूत बनाया जा सके।
+
+सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं:
 
 ```json5 fileName="tsconfig.json"
 {
-  "include": ["src", ".intlayer/**/*.ts"],
+  compilerOptions: {
+    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन
+  },
+  include: [
+    // ... आपकी मौजूदा शामिल की गई फाइलें
+    ".intlayer/**/*.ts", // ऑटो-जेनरेटेड टाइप्स शामिल करें
+  ],
 }
 ```
 
----
+### Git कॉन्फ़िगरेशन
 
-## Git
+यह अनुशंसित है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप उन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
 
-Intlayer द्वारा उत्पन्न आर्टिफैक्ट्स को अनदेखा करें:
+इसके लिए, आप अपनी `.gitignore` फाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
 
-```gitignore
+```plaintext fileName=".gitignore"
+# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
 .intlayer
 ```
 
 ---
 
+### चरण 13: रीडायरेक्शन बनाएं (वैकल्पिक)
+
+```typescript fileName="src/routes/{-$locale}/rotue.tsx" codeFormat="typescript"
+function LayoutComponent() {
+  useI18nHTMLAttributes();
+
+  const { locale } = Route.useParams();
+  const { locale: selectedLocale } = useLocale();
+  const { defaultLocale } = configuration.internationalization;
+  const { prefixDefault } = configuration.middleware;
+
+  // यदि prefixDefault true है और URL में कोई locale मौजूद नहीं है, तो डिफ़ॉल्ट locale पर पुनर्निर्देशित करें
+  if (selectedLocale === defaultLocale && !locale && prefixDefault) {
+    return <Navigate replace to={defaultLocale} />;
+  }
+
+  // यदि URL में locale चयनित locale से मेल नहीं खाता है, तो चयनित locale पर पुनर्निर्देशित करें
+  if (selectedLocale !== defaultLocale && !locale) {
+    return <Navigate replace to={selectedLocale} />;
+  }
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
+
+## प्रोडक्शन डिप्लॉयमेंट
+
+जब आप अपनी एप्लिकेशन को डिप्लॉय कर रहे हों:
+
+1. **अपनी एप्लिकेशन बनाएं:**
+
+   ```bash
+   npm run build
+   ```
+
+2. **Intlayer शब्दकोश बनाएं:**
+
+   ```bash
+   npm run intlayer:build
+   ```
+
+3. **यदि प्रोडक्शन में मिडलवेयर का उपयोग कर रहे हैं तो `vite-intlayer` को dependencies में जोड़ें:**
+   ```bash
+   npm install vite-intlayer --save
+   ```
+
+अब आपकी एप्लिकेशन निम्नलिखित का समर्थन करेगी:
+
+- **URL संरचना**: `/en`, `/en/about`, `/tr`, `/tr/about`
+- **ब्राउज़र प्राथमिकताओं के आधार पर स्वचालित लोकल डिटेक्शन**
+- **Tanstack Start के साथ लोकल-संज्ञानी रूटिंग**
+- **स्वचालित जनरेट किए गए प्रकारों के साथ TypeScript समर्थन**
+- **सर्वर-साइड रेंडरिंग के साथ उचित लोकल हैंडलिंग**
+
 ## VS कोड एक्सटेंशन
 
-- **Intlayer VS कोड एक्सटेंशन** → ऑटोकंप्लीशन, त्रुटियाँ, इनलाइन प्रीव्यू, त्वरित क्रियाएँ।
-  मार्केटप्लेस: `intlayer.intlayer-vs-code-extension`
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल कर सकते हैं।
+
+[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+यह एक्सटेंशन प्रदान करता है:
+
+- अनुवाद कुंजियों के लिए **ऑटोकंप्लीशन**।
+- गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
+- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
+- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
+
+एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक जानकारी के लिए देखें [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)।
 
 ---
 
 ## आगे बढ़ें
 
-- विज़ुअल एडिटर
-- CMS मोड
-- एज / एडाप्टर पर लोकल डिटेक्शन
+आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](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) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।
 
 ---
 
+## दस्तावेज़ संदर्भ
+
+- [Intlayer दस्तावेज़](https://intlayer.org)
+- [Tanstack Start दस्तावेज़](https://reactrouter.com/)
+- [useIntlayer हुक](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md)
+- [useLocale हुक](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md)
+- [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md)
+- [कॉन्फ़िगरेशन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
+
+यह व्यापक गाइड आपको Intlayer को Tanstack Start के साथ पूरी तरह से अंतरराष्ट्रीयकृत एप्लिकेशन के लिए एकीकृत करने के लिए आवश्यक सभी जानकारी प्रदान करता है, जिसमें स्थानीय-जानकारी रूटिंग और TypeScript समर्थन शामिल है।
+
 ## दस्तावेज़ इतिहास
 
-| संस्करण | तिथि       | परिवर्तन                           |
-| ------- | ---------- | ---------------------------------- |
-| 1.0.0   | 2025-08-11 | TanStack स्टार्ट अनुकूलन जोड़ा गया |
+| संस्करण | तिथि       | परिवर्तन                        |
+| ------- | ---------- | ------------------------------- |
+| 5.8.1   | 2025-09-09 | Tanstack Start के लिए जोड़ा गया |