@intlayer/docs 6.1.6-canary.0 → 6.1.6

package/docs/hi/intlayer_with_react_router_v7.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2025-09-04
+updatedAt: 2025-10-03
 title: React Router v7 में Intlayer के साथ शुरुआत करना
-description: जानें कि कैसे Intlayer का उपयोग करके अपने React Router v7 एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) जोड़ें। इस व्यापक गाइड का पालन करें ताकि आपका ऐप बहुभाषी और locale-सचेत रूटिंग के साथ हो।
+description: जानें कि कैसे Intlayer का उपयोग करके अपने React Router v7 एप्लिकेशन में अंतरराष्ट्रीयकरण (i18n) जोड़ें। इस व्यापक गाइड का पालन करें ताकि आपका ऐप बहुभाषी और locale-aware रूटिंग के साथ हो।
 keywords:
   - अंतरराष्ट्रीयकरण
   - दस्तावेज़ीकरण
@@ -17,13 +17,12 @@ slugs:
   - environment
   - vite-and-react
   - react-router-v7
-applicationTemplate: https://github.com/AydinTheFirst/react-router-intlayer
-author: AydinTheFirst
+applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-template
 ---
 
 # Intlayer और React Router v7 के साथ अंतरराष्ट्रीयकरण (i18n) शुरू करना
 
-यह गाइड दिखाता है कि कैसे **Intlayer** को React Router v7 प्रोजेक्ट्स में seamless अंतरराष्ट्रीयकरण के लिए locale-सचेत रूटिंग, TypeScript समर्थन, और आधुनिक विकास प्रथाओं के साथ एकीकृत किया जाए।
+यह गाइड दिखाता है कि कैसे **Intlayer** को React Router v7 प्रोजेक्ट्स में seamless अंतरराष्ट्रीयकरण के लिए एकीकृत किया जाए, जिसमें locale-aware रूटिंग, TypeScript समर्थन, और आधुनिक विकास प्रथाएँ शामिल हैं।
 
 ## Intlayer क्या है?
 
@@ -31,11 +30,11 @@ author: AydinTheFirst
 
 Intlayer के साथ, आप कर सकते हैं:
 
-- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कि कंपोनेंट स्तर पर होते हैं।
+- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कंपोनेंट स्तर पर होते हैं।
 - **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें**।
-- **स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें**, जिससे ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार होता है।
+- **TypeScript समर्थन सुनिश्चित करें** autogenerated टाइप्स के साथ, जो ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करता है।
 - **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील locale पहचान और स्विचिंग।
-- **React Router v7 के कॉन्फ़िगरेशन-आधारित रूटिंग सिस्टम के साथ locale-सचेत रूटिंग सक्षम करें**।
+- **React Router v7 के कॉन्फ़िगरेशन-आधारित रूटिंग सिस्टम के साथ locale-aware रूटिंग सक्षम करें**।
 
 ---
 
@@ -57,14 +56,13 @@ pnpm add vite-intlayer --save-dev
 
 - **intlayer**
 
-- **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**
+- **react-intlayer**  
   वह पैकेज जो Intlayer को React एप्लिकेशन के साथ एकीकृत करता है। यह React अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक्स प्रदान करता है।
 
-- **vite-intlayer**
+- **vite-intlayer**  
   इसमें Vite प्लगइन शामिल है जो Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी शामिल है।
 
 ### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
@@ -77,10 +75,7 @@ import { type IntlayerConfig, Locales } from "intlayer";
 const config: IntlayerConfig = {
   internationalization: {
     defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true, // URLs में हमेशा डिफ़ॉल्ट भाषा को प्रीफिक्स करें
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
   },
 };
 
@@ -94,10 +89,7 @@ import { Locales } from "intlayer";
 const config = {
   internationalization: {
     defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
   },
 };
 
@@ -111,70 +103,65 @@ const { Locales } = require("intlayer");
 const config = {
   internationalization: {
     defaultLocale: Locales.ENGLISH,
-    locales: [Locales.ENGLISH, Locales.TURKISH],
-  },
-  middleware: {
-    prefixDefault: true, // URLs में हमेशा डिफ़ॉल्ट भाषा को प्रीफिक्स करें
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
   },
 };
 
 module.exports = config;
 ```
 
-> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, कृपया [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
-
-### चरण 3: React Router v7 रूट्स कॉन्फ़िगर करें
+> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग को अक्षम करना, और भी बहुत कुछ सेट कर सकते हैं। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
 
-अपने रूटिंग कॉन्फ़िगरेशन को लोकल-जानकारी वाले रूट्स के साथ सेट करें:
-
-```typescript fileName="app/routes.ts" codeFormat="typescript"
-import { layout, route, type RouteConfig } from "@react-router/dev/routes";
-
-export default [
-  layout("routes/layout.tsx", [
-    route("/", "routes/page.tsx"), // रूट पेज - लोकल पर रीडायरेक्ट करता है
-    route("/:lang", "routes/[lang]/page.tsx"), // स्थानीयकृत होम पेज
-    route("/:lang/about", "routes/[lang]/about/page.tsx"), // स्थानीयकृत अबाउट पेज
-  ]),
-] satisfies RouteConfig;
-```
-
-### चरण 4: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
+### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
 
 अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:
 
-```typescript fileName="vite.config.ts" codeFormat="typescript"
+```typescript fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
-import { intlayerMiddlewarePlugin, intlayer } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [
-    reactRouter(),
-    tsconfigPaths(),
-    intlayer(),
-    intlayerMiddlewarePlugin(),
-  ],
+  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
 });
 ```
 
-> `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
+> `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
+
+### चरण 4: React Router v7 रूट्स कॉन्फ़िगर करें
+
+अपने रूटिंग कॉन्फ़िगरेशन को स्थानीय-जानकारी वाले रूट्स के साथ सेट करें:
+
+```typescript fileName="app/routes.ts"
+typescript;
+import { layout, route, type RouteConfig } from "@react-router/dev/routes";
+
+export default [
+  layout("routes/layout.tsx", [
+    route("/:lang?", "routes/page.tsx"), // स्थानीयकृत होम पेज
+    route("/:lang?/about", "routes/about/page.tsx"), // स्थानीयकृत अबाउट पेज
+  ]),
+] satisfies RouteConfig;
+```
 
-### चरण 5: लेआउट कॉम्पोनेंट बनाएं
+### चरण 5: लेआउट कंपोनेंट बनाएं
 
 अपने रूट लेआउट और स्थानीय-विशिष्ट लेआउट सेट करें:
 
 #### रूट लेआउट
 
-```tsx fileName="app/routes/layout.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
-import { Outlet } from "react-router";
+```tsx fileName="app/routes/layout.tsx"
 import { IntlayerProvider } from "react-intlayer";
+import { Outlet } from "react-router";
+
+import type { Route } from "./+types/layout";
+
+export default function RootLayout({ params }: Route.ComponentProps) {
+  const { locale } = params;
 
-export default function RootLayout() {
   return (
-    <IntlayerProvider>
+    <IntlayerProvider locale={locale}>
       <Outlet />
     </IntlayerProvider>
   );
@@ -183,9 +170,9 @@ export default function RootLayout() {
 
 ### चरण 6: अपनी सामग्री घोषित करें
 
-अपने अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
+अपनी अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:
 
-```tsx fileName="app/routes/[lang]/page.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="app/routes/[lang]/page.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 const pageContent = {
@@ -193,19 +180,23 @@ const pageContent = {
   content: {
     title: t({
       en: "Welcome to React Router v7 + Intlayer",
-      tr: "React Router v7 + Intlayer'a Hoş Geldiniz",
+      es: "Bienvenido a React Router v7 + Intlayer",
+      fr: "Bienvenue sur React Router v7 + Intlayer",
     }),
     description: t({
       en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
-      tr: "React Router v7 ve Intlayer kullanarak kolayca çok dilli uygulamalar geliştirin.",
+      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
+      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
     }),
     aboutLink: t({
       en: "हमारे बारे में जानें",
-      tr: "Hakkımızda Öğrenin",
+      es: "Aprender Sobre Nosotros",
+      fr: "En savoir plus sur nous",
     }),
     homeLink: t({
       en: "होम",
-      tr: "Ana Sayfa",
+      es: "Inicio",
+      fr: "Accueil",
     }),
   },
 } satisfies Dictionary;
@@ -217,159 +208,162 @@ export default pageContent;
 
 > अधिक विवरण के लिए, [सामग्री घोषणा प्रलेखन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md) देखें।
 
-### चरण 7: लोकल-एवेयर कंपोनेंट बनाएं
+### चरण 7: स्थानीय-जानकारी वाले घटक बनाएँ
 
-`LocalizedLink` कंपोनेंट बनाएं जो स्थानीय-ज्ञान नेविगेशन के लिए हो:
-
-```tsx fileName="app/components/localized-link.tsx" codeFormat="typescript"
-// app/components/localized-link.tsx
-import { getLocalizedUrl } from "intlayer";
-import { useLocale } from "react-intlayer";
-import React from "react";
-import { Link, useLocation } from "react-router";
+स्थानीय-जानकारी वाले नेविगेशन के लिए `LocalizedLink` घटक बनाएँ:
 
-type RouterLinkProps = React.ComponentProps<typeof Link>;
+```tsx fileName="app/components/localized-link.tsx"
+import type { FC } from "react";
 
-export default function LocalizedLink({ to, ...props }: RouterLinkProps) {
-  const { locale } = useLocale(); // वर्तमान स्थानीय भाषा प्राप्त करें
-  const location = useLocation(); // वर्तमान स्थान प्राप्त करें
+import { getLocalizedUrl, type LocalesValues } from "intlayer";
+import { useLocale } from "react-intlayer";
+import { Link, type LinkProps, type To } from "react-router";
 
-  const isExternal = (path: string) =>
-    /^([a-z][a-z0-9+.-]*:)?\/\//i.test(path) || path.startsWith("mailto:"); // जांचें कि पथ बाहरी है या नहीं
+// यह फ़ंक्शन जांचता है कि लिंक बाहरी है या नहीं
+const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
 
+// यह फ़ंक्शन दिए गए पते को स्थानीयकृत URL में परिवर्तित करता है
+export const locacalizeTo = (to: To, locale: LocalesValues): To => {
   if (typeof to === "string") {
-    if (to.startsWith("/") && !isExternal(to)) {
-      return <Link to={getLocalizedUrl(to, locale)} {...props} />;
+    if (isExternalLink(to)) {
+      return to;
     }
-    return <Link to={to} {...props} />;
+
+    return getLocalizedUrl(to, locale);
   }
 
-  if (to && typeof to === "object") {
-    const pathname = (to as { pathname?: string }).pathname;
-    if (pathname && pathname.startsWith("/") && !isExternal(pathname)) {
-      return (
-        <Link
-          to={{ ...to, pathname: getLocalizedUrl(pathname, locale) }}
-          {...props}
-        />
-      );
-    }
-    return <Link to={to} {...props} />;
+  if (isExternalLink(to.pathname ?? "")) {
+    return to;
   }
 
-  return (
-    <Link
-      to={getLocalizedUrl(location.pathname + location.search, locale)}
-      {...props}
-    />
-  );
-}
-```
+  return {
+    ...to,
+    pathname: getLocalizedUrl(to.pathname ?? "", locale),
+  };
+};
 
-### चरण 8: अपने पृष्ठों में Intlayer का उपयोग करें
+// यह स्थानीयकृत लिंक के लिए एक React functional component है
+export const LocalizedLink: FC<LinkProps> = (props) => {
+  const { locale } = useLocale();
 
-अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ तक पहुँचें:
+  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
+};
+```
 
-#### रूट रीडायरेक्ट पेज
+यदि आप स्थानीयकृत मार्गों पर नेविगेट करना चाहते हैं, तो आप `useLocalizedNavigate` हुक का उपयोग कर सकते हैं:
 
-```tsx fileName="app/routes/page.tsx" codeFormat="typescript"
-// app/routes/page.tsx
-import { useLocale } from "react.intlayer";
-import { Navigate } from "react-router";
+```tsx fileName="app/hooks/useLocalizedNavigate.ts"
+import { useLocale } from "intlayer";
+import { type NavigateOptions, type To, useNavigate } from "react-router";
 
-export default function Page() {
+import { locacalizeTo } from "~/components/localized-link";
+
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
   const { locale } = useLocale();
 
-  return <Navigate replace to={locale} />;
-}
+  const localizedNavigate = (to: To, options?: NavigateOptions) => {
+    const localedTo = locacalizeTo(to, locale);
+
+    navigate(localedTo, options);
+  };
+
+  return localizedNavigate;
+};
 ```
 
+### चरण 8: अपने पृष्ठों में Intlayer का उपयोग करें
+
+अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ तक पहुँचें:
+
 #### स्थानीयकृत होम पेज
 
-```tsx fileName="app/routes/[lang]/page.tsx" codeFormat="typescript"
-import { useIntlayer } from "react.intlayer";
-import LocalizedLink from "~/components/localized-link";
+```tsx fileName="app/routes/[lang]/page.tsx"
+import { useIntlayer } from "react-intlayer";
+import { LocalizedLink } from "~/components/localized-link";
 
 export default function Page() {
-  const content = useIntlayer("page");
+  const { title, description, aboutLink } = useIntlayer("page");
 
   return (
-    <div style={{ padding: "2rem", textAlign: "center" }}>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-      <nav style={{ marginTop: "2rem" }}>
-        <LocalizedLink
-          to="/about"
-          style={{
-            display: "inline-block",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#007bff",
-            color: "white",
-            textDecoration: "none",
-            borderRadius: "4px",
-          }}
-        >
-          {content.aboutLink}
-        </LocalizedLink>
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
       </nav>
     </div>
   );
 }
 ```
 
-> `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md) देखें।
+> `useIntlayer` हुक के बारे में अधिक जानने के लिए, [डॉक्यूमेंटेशन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md) देखें।
 
-### चरण 9: एक लोकल स्विचर कॉम्पोनेंट बनाएं
+### चरण 9: एक लोकल स्विचर कंपोनेंट बनाएं
 
 उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए एक कॉम्पोनेंट बनाएं:
 
-```tsx fileName="app/components/locale-switcher.tsx" codeFormat="typescript"
-import { getLocalizedUrl, getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
-import { useLocation, useNavigate } from "react-router";
+```tsx fileName="app/components/locale-switcher.tsx"
+import type { FC } from "react";
 
-export default function LocaleSwitcher() {
-  const { locale, availableLocales, setLocale } = useLocale();
-  const location = useLocation();
-  const navigate = useNavigate();
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  getPathWithoutLocale,
+} from "intlayer";
+import { setLocaleCookie, useIntlayer, useLocale } from "react-intlayer";
+import { Link, useLocation } from "react-router";
 
-  const handleLocaleChange = (newLocale: string) => {
-    const localizedUrl = getLocalizedUrl(
-      location.pathname + location.search,
-      newLocale
-    );
-    setLocale(newLocale);
-    navigate(localizedUrl);
-  };
+export const LocaleSwitcher: FC = () => {
+  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
 
   return (
-    <div style={{ margin: "1rem 0" }}>
-      <label htmlFor="locale-select">भाषा चुनें: </label>
-      <select
-        id="locale-select"
-        value={locale}
-        onChange={(e) => handleLocaleChange(e.target.value)}
-        style={{ padding: "0.25rem", marginLeft: "0.5rem" }}
-      >
-        {availableLocales.map((availableLocale) => (
-          <option key={availableLocale} value={availableLocale}>
-            {getLocaleName(availableLocale)}
-          </option>
-        ))}
-      </select>
-    </div>
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <Link
+            aria-current={localeItem === locale ? "page" : undefined}
+            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
+            onClick={() => setLocaleCookie(localeItem)}
+            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
+          >
+            <span>
+              {/* लोकल - उदाहरण के लिए FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* अपनी लोकल में भाषा - उदाहरण के लिए Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* वर्तमान लोकल में भाषा - उदाहरण के लिए Francés जब वर्तमान लोकल Locales.SPANISH सेट हो */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* अंग्रेज़ी में भाषा - उदाहरण के लिए French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </Link>
+        </li>
+      ))}
+    </ol>
   );
-}
+};
 ```
 
-> `useLocale` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md) देखें।
+> `useLocale` हुक के बारे में अधिक जानने के लिए, कृपया [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.md) देखें।
 
 ### चरण 10: HTML एट्रिब्यूट्स प्रबंधन जोड़ें (वैकल्पिक)
 
 HTML lang और dir एट्रिब्यूट्स को प्रबंधित करने के लिए एक हुक बनाएं:
 
-```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
-// app/hooks/useI18nHTMLAttributes.tsx
+```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
 import { getHTMLTextDir } from "intlayer";
 import { useEffect } from "react";
 import { useLocale } from "react-intlayer";
@@ -386,8 +380,7 @@ export const useI18nHTMLAttributes = () => {
 
 फिर इसे अपने रूट कॉम्पोनेंट में उपयोग करें:
 
-```tsx fileName="app/root.tsx" codeFormat="typescript"
-// app/routes/layout.tsx
+```tsx fileName="app/routes/layout.tsx"
 import { Outlet } from "react-router";
 import { IntlayerProvider } from "react-intlayer";
 
@@ -404,94 +397,56 @@ export default function RootLayout() {
 }
 ```
 
-### चरण 11: अपना एप्लिकेशन बनाएं और चलाएं
-
-सामग्री शब्दकोश बनाएं और अपने एप्लिकेशन को चलाएं:
+### चरण 11: मिडलवेयर जोड़ें (वैकल्पिक)
 
-```bash packageManager="npm"
-# Intlayer शब्दकोश बनाएं
-npm run intlayer:build
+आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए `intlayerMiddleware` का भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकल का स्वचालित रूप से पता लगाएगा और उपयुक्त लोकल कुकी सेट करेगा। यदि कोई लोकल निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकल निर्धारित करेगा। यदि कोई लोकल पता नहीं चलता है, तो यह डिफ़ॉल्ट लोकल पर पुनः निर्देशित करेगा।
 
-# विकास सर्वर शुरू करें
-npm run dev
-```
+> ध्यान दें कि उत्पादन में `intlayerMiddleware` का उपयोग करने के लिए, आपको `vite-intlayer` पैकेज को `devDependencies` से `dependencies` में स्विच करना होगा।
 
-```bash packageManager="pnpm"
-# Intlayer शब्दकोश बनाएं
-pnpm intlayer:build
+```typescript {3,7} fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
-# विकास सर्वर शुरू करें
-pnpm dev
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), intlayer(), intlayerMiddleware()],
+});
 ```
 
-```bash packageManager="yarn"
-# Intlayer शब्दकोश बनाएं
-yarn intlayer:build
-
-# विकास सर्वर शुरू करें
-yarn dev
-```
+---
 
-### चरण 12: TypeScript कॉन्फ़िगर करें (वैकल्पिक)
+## टाइपस्क्रिप्ट कॉन्फ़िगर करें
 
-Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
+Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
 
-सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से जनरेट किए गए प्रकार शामिल हैं:
+सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में स्वचालित रूप से उत्पन्न प्रकार शामिल हैं:
 
 ```json5 fileName="tsconfig.json"
 {
-  compilerOptions: {
-    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन
-  },
+  // ... आपके मौजूदा कॉन्फ़िगरेशन
   include: [
-    // ... your existing includes
-    ".intlayer/**/*.ts", // ऑटो-जनरेटेड टाइप्स शामिल करें
+    // ... आपके मौजूदा शामिल
+    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें
   ],
 }
 ```
 
-### गिट कॉन्फ़िगरेशन
+---
+
+## गिट कॉन्फ़िगरेशन
 
-यह अनुशंसित है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप उन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
+यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा किया जाए। इससे आप उन्हें अपने गिट रिपॉजिटरी में कमिट करने से बच सकते हैं।
 
-इसके लिए, आप अपनी `.gitignore` फाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
+ऐसा करने के लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
 
 ```plaintext fileName=".gitignore"
-# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
 .intlayer
 ```
 
 ---
 
-## प्रोडक्शन डिप्लॉयमेंट
-
-जब आप अपना एप्लिकेशन डिप्लॉय करें:
-
-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`
-- ब्राउज़र प्राथमिकताओं के आधार पर **स्वचालित लोकल डिटेक्शन**
-- React Router v7 के साथ **लोकल-अवेयर राउटिंग**
-- ऑटो-जनरेटेड टाइप्स के साथ **TypeScript समर्थन**
-- उचित लोकल हैंडलिंग के साथ **सर्वर-साइड रेंडरिंग**
-
 ## VS कोड एक्सटेंशन
 
 Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS कोड एक्सटेंशन** इंस्टॉल कर सकते हैं।
@@ -500,18 +455,18 @@ Intlayer के साथ अपने विकास अनुभव को
 
 यह एक्सटेंशन प्रदान करता है:
 
-- अनुवाद कुंजियों के लिए **ऑटोकंप्लीशन**
-- गायब अनुवादों के लिए **रियल-टाइम त्रुटि पहचान**
-- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**
-- **त्वरित क्रियाएं** जो अनुवादों को आसानी से बनाने और अपडेट करने में मदद करती हैं।
+- अनुवाद कुंजियों के लिए **ऑटोकंप्लीशन**।
+- गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
+- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
+- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएँ**।
 
-एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक जानकारी के लिए देखें [Intlayer VS कोड एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)।
+एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक विवरण के लिए देखें [Intlayer VS कोड एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)।
 
 ---
 
 ## आगे बढ़ें
 
-आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](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) का उपयोग करके बाहरी कर सकते हैं।
+आगे बढ़ने के लिए, आप [विज़ुअल एडिटर](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) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।
 
 ---
 
@@ -520,14 +475,15 @@ Intlayer के साथ अपने विकास अनुभव को
 - [Intlayer दस्तावेज़](https://intlayer.org)
 - [React Router v7 दस्तावेज़](https://reactrouter.com/)
 - [useIntlayer हुक](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/packages/react-intlayer/useLocale.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 को React Router v7 के साथ पूरी तरह से अंतरराष्ट्रीयकृत एप्लिकेशन के लिए एकीकृत करने में आवश्यक सभी जानकारी प्रदान करती है, जिसमें स्थानीय-जानकारी वाले रूटिंग और TypeScript समर्थन शामिल हैं।
+यह व्यापक मार्गदर्शिका आपको Intlayer को React Router v7 के साथ पूरी तरह से अंतरराष्ट्रीयकृत एप्लिकेशन के लिए एकीकृत करने के लिए आवश्यक सभी जानकारी प्रदान करती है, जिसमें स्थानीय-जानकारी वाले रूटिंग और TypeScript समर्थन शामिल हैं।
 
 ## दस्तावेज़ इतिहास
 
-| संस्करण | तिथि      | परिवर्तन                         |
-| ------- | --------- | -------------------------------- |
-| 5.8.2   | 2025-09-4 | React Router v7 के लिए जोड़ा गया |
+| संस्करण | तिथि       | परिवर्तन                     |
+| ------- | ---------- | ---------------------------- |
+| 6.1.5   | 2025-10-03 | दस्तावेज़ अपडेट किया गया     |
+| 5.8.2   | 2025-09-04 | React Router v7 के लिए जोड़ा |