Author:
    Aymeric PINEAU
    Creation:2025-09-09Last update:2026-08-25

    Intlayer का उपयोग करके अपनी TanStack Start वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

    विषय-सूची

    यह गाइड दिखाता है कि लोकेल-जागरूक रूटिंग, TypeScript समर्थन और आधुनिक विकास प्रथाओं के साथ TanStack Start प्रोजेक्ट्स में निर्बाध अंतर्राष्ट्रीयकरण के लिए Intlayer को कैसे एकीकृत किया जाए।

    विकल्पों पर इन्टलेयर क्यों?

    react-i18next या use-intl, या paraglide जैसे मुख्य समाधानों की तुलना में, Intlayer एक समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

    पूर्ण टैनस्टैक प्रारंभ कवरेज

    इंटलेयर टैनस्टैक स्टार्ट के लिए पूरी तरह से अनुकूलित है, जो बहुभाषी रूटिंग, कुकी प्रबंधन, साइटमैप जेनरेशन, डायनामिक कंटेंट लोडिंग और आपके अंतर्राष्ट्रीयकरण (i18n) प्रयासों को बढ़ाने के लिए आवश्यक सभी सुविधाएँ प्रदान करता है।

    बंडल का आकार

    अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

    रखरखाव

    आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।

    एआई एजेंट

    सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और agent skills, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

    स्वचालन

    अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

    प्रदर्शन

    बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।

    किसी भी देव के साथ स्केलिंग

    सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

    TanStack Start एप्लिकेशन में Intlayer सेट अप करने के लिए चरण-दर-चरण मार्गदर्शिका

    www.youtube.com
    ide.intlayer.org
    intlayer-tanstack-start-template.vercel.app

    GitHub पर एप्लिकेशन टेम्पलेट देखें।

    1. प्रोजेक्ट बनाएं

      TanStack Start वेबसाइट पर नया प्रोजेक्ट शुरू करें गाइड का पालन करके एक नया TanStack Start प्रोजेक्ट बनाना शुरू करें।

    2. Intlayer पैकेज इंस्टॉल करें

      अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

      bash
      npx intlayer init --interactive
      --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।
      यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
      bash
      npm install intlayer react-intlayer
npm install vite-intlayer --save-dev

      • intlayer

        कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन और CLI कमांड के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।

      • react-intlayer वह पैकेज जो Intlayer को React एप्लिकेशन के साथ एकीकृत करता है। यह React अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है।

      • vite-intlayer इसमें Intlayer को Vite बंडलर के साथ एकीकृत करने के लिए Vite प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधित करने और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर शामिल है।

    3. अपने प्रोजेक्ट का कॉन्फ़िगरेशन

      अपनी एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:

      intlayer.config.ts
      import type { IntlayerConfig } from "intlayer";

import { Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    defaultLocale: Locales.ENGLISH,
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;
      इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और विस्तार सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध पैरामीटर की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

    4. अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

      अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें:

      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

const config = defineConfig({
  plugins: [
    nitro(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
    tanstackStart({
      router: {
        routeFileIgnorePattern:
          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
      },
    }),
    viteReact(),
  ],
});

export default config;
      intlayer() Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।

    5. रूट लेआउट बनाएं

      वर्तमान लोकेल का पता लगाने के लिए useParams का उपयोग करके और html टैग पर lang और dir विशेषताओं को सेट करके अंतर्राष्ट्रीयकरण का समर्थन करने के लिए अपने रूट लेआउट को कॉन्फ़िगर करें।

      src/routes/__root.tsx
      import {
  createRootRouteWithContext,
  getRouteApi,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";
import { defaultLocale, getHTMLTextDir } from "intlayer";
import { type ReactNode } from "react";
import { IntlayerProvider } from "react-intlayer";

const localeRoute = getRouteApi("/{-$locale}");

export const Route = createRootRouteWithContext<{}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        content: "width=device-width, initial-scale=1",
        name: "viewport",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
  }),

  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: ReactNode }) {
  const params = localeRoute.useParams();
  const locale = params?.locale ?? defaultLocale;

  return (
    <html dir={getHTMLTextDir(locale)} lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
        <Scripts />
      </body>
    </html>
  );
}

    6. लोकेल लेआउट बनाएं

      एक लेआउट बनाएं जो लोकेल उपसर्ग को संभालता है और सत्यापन करता है।

      src/routes/{-$locale}/route.tsx
      import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { validatePrefix } from "intlayer";

export const Route = createFileRoute("/{-$locale}")({
  beforeLoad: ({ params }) => {
    const localeParam = params.locale;

    // लोकेल उपसर्ग सत्यापित करें
    const { isValid, localePrefix } = validatePrefix(localeParam);

    if (!isValid) {
      throw redirect({
        to: "/{-$locale}/404",
        params: { locale: localePrefix },
      });
    }
  },
  component: Outlet,
});
      यहाँ, {-$locale} एक गतिशील रूट पैरामीटर है जो वर्तमान लोकेल से बदल दिया जाता है। यह नोटेशन स्लॉट को वैकल्पिक बनाता है, जिससे यह 'prefix-no-default' आदि जैसे रूटिंग मोड के साथ काम करने की अनुमति देता है।

      ध्यान रखें कि यदि आप एक ही रूट में कई गतिशील खंडों का उपयोग करते हैं (जैसे, /{-$locale}/other-path/$anotherDynamicPath/...), तो यह स्लॉट समस्याएँ पैदा कर सकता है। 'prefix-all' मोड के लिए, आप इसके बजाय स्लॉट को $locale में बदलना पसंद कर सकते हैं। 'no-prefix' या 'search-params' मोड के लिए, आप स्लॉट को पूरी तरह से हटा सकते हैं।

    7. अपनी सामग्री घोषित करें

      अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएं बनाएं और प्रबंधित करें:

      src/contents/page.content.ts
      import type { Dictionary } from "intlayer";

import { t } from "intlayer";

const appContent = {
  content: {
    links: {
      about: t({
        en: "About",
        es: "Acerca de",
        fr: "À propos",
      }),
      home: t({
        en: "Home",
        es: "Inicio",
        fr: "Accueil",
      }),
    },
    meta: {
      title: t({
        en: "Welcome to Intlayer + TanStack Router",
        es: "Bienvenido a Intlayer + TanStack Router",
        fr: "Bienvenue à Intlayer + TanStack Router",
      }),
      description: t({
        en: "This is an example of using Intlayer with TanStack Router",
        es: "Este es un उदाहरण de uso de Intlayer con TanStack Router",
        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
      }),
    },
  },
  key: "app",
} satisfies Dictionary;

export default appContent;
      आपकी सामग्री घोषणाएं आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जैसे ही वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./app) में शामिल होती हैं। और सामग्री घोषणा फ़ाइल विस्तार (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) से मेल खाती हैं।
      अधिक विवरण के लिए, सामग्री घोषणा दस्तावेज़ देखें।

    8. लोकेल-जागरूक घटक और हुक बनाएं

      लोकेल-जागरूक नेविगेशन के लिए एक LocalizedLink घटक बनाएं:

      src/components/localized-link.tsx
      import type { FC } from "react";

import { Link, type LinkComponentProps } from "@tanstack/react-router";
import { useLocale } from "react-intlayer";
import { getPrefix } from "intlayer";

export const LOCALE_ROUTE = "{-$locale}" as const;

export type To = StripLocalePrefix<LinkComponentProps["to"]>;

export type StripLocalePrefix<T extends string | undefined> = T extends
  `/${typeof LOCALE_ROUTE}/` | `/${typeof LOCALE_ROUTE}`
  ? "/"
  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
    ? `/${Rest}`
    : T;

type LocalizedLinkProps = {
  to?: To;
} & Omit<LinkComponentProps, "to">;

export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
  const { locale } = useLocale();
  const { localePrefix } = getPrefix(locale);

  return (
    <Link
      {...props}
      params={{
        locale: localePrefix,
        ...(typeof props?.params === "object" ? props?.params : {}),
      }}
      to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
    />
  );
};

      इस घटक के दो उद्देश्य हैं:

      • URL से अनावश्यक {-$locale} उपसर्ग को हटाना।
      • URL में लोकेल पैरामीटर इंजेक्ट करना ताकि यह सुनिश्चित हो सके कि उपयोगकर्ता सीधे स्थानीयकृत रूट पर निर्देशित हो।

      फिर हम प्रोग्रामेटिक नेविगेशन के लिए एक useLocalizedNavigate हुक बना सकते हैं:

      src/hooks/useLocalizedNavigate.tsx
      import { useNavigate } from "@tanstack/react-router";
import { getPrefix } from "intlayer";
import { useLocale } from "react-intlayer";
import type { StripLocalePrefix } from "@/components/localized-link";
import type { FileRouteTypes } from "@/routeTree.gen";

type NavigateFn = ReturnType<typeof useNavigate>;
type BaseNavigateOptions = Parameters<NavigateFn>[0];

type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;

export type LocalizedNavigateOptions = Omit<
  BaseNavigateOptions,
  "to" | "params"
> & {
  to: LocalizedTo;
  params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;
};

type LocalizedNavigate = (
  options: LocalizedNavigateOptions
) => ReturnType<NavigateFn>;

export const useLocalizedNavigate = () => {
  const navigate = useNavigate();

  const { locale } = useLocale();

  const localizedNavigate: LocalizedNavigate = (args: any) => {
    const { localePrefix } = getPrefix(locale);

    if (typeof args === "string") {
      return navigate({
        to: `/${LOCALE_ROUTE}${args}`,
        params: { locale: localePrefix },
      });
    }

    const { to, ...rest } = args;

    const localizedTo = `/${LOCALE_ROUTE}${to}` as any;

    return navigate({
      to: localizedTo,
      params: { locale: localePrefix, ...rest } as any,
    });
  };

  return localizedNavigate;
};

    9. अपने पृष्ठों में Intlayer का उपयोग करें

      कंपोनेंट के भीतर डिफ़ॉल्ट रूप से useIntlayer का उपयोग करें: यह कंटेंट पढ़ने का अनुशंसित तरीका है, और कंपाइलर इसे रेंडर हो रहे लोकेल पर हल कर देता है। getIntlayer / getIntlayerAsync का उपयोग केवल React ट्री के बाहर करें: रूट के head, लोडर और सर्वर फ़ंक्शन में।

      अपने एप्लिकेशन में अपने सामग्री शब्दकोशों तक पहुंचें:

      स्थानीयकृत होम पेज

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import { useIntlayer } from "react-intlayer";

import LocaleSwitcher from "@/components/locale-switcher";
import { LocalizedLink } from "@/components/localized-link";
import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
});

function RouteComponent() {
  const content = useIntlayer("app");
  const navigate = useLocalizedNavigate();

  return (
    <div>
      <div>
        {content.title}
        <LocaleSwitcher />
        <div>
          <LocalizedLink to="/">{content.links.home}</LocalizedLink>
          <LocalizedLink to="/about">{content.links.about}</LocalizedLink>
        </div>
        <div>
          <button onClick={() => navigate({ to: "/" })}>
            {content.links.home}
          </button>
          <button onClick={() => navigate({ to: "/about" })}>
            {content.links.about}
          </button>
        </div>
      </div>
    </div>
  );
}

      यदि आप अपने कंटेंट को string attribute में उपयोग करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आप फ़ंक्शन का मान उपयोग कर सकते हैं:

      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      useIntlayer hook के बारे में अधिक जानने के लिए, दस्तावेज़ देखें।

    10. एक लोकेल स्विचर कंपोनेंट बनाएं

      उपयोगकर्ताओं को भाषा बदलने की अनुमति देने के लिए एक कंपोनेंट बनाएं:

      src/components/locale-switcher.tsx
      import { useLocation } from "@tanstack/react-router";
import {
  getHTMLTextDir,
  getLocaleName,
  getPathWithoutLocale,
  getPrefix,
  Locales,
} from "intlayer";
import type { FC } from "react";
import { useLocale } from "react-intlayer";

import { LocalizedLink, type To } from "./localized-link";

export const LocaleSwitcher: FC = () => {
  const { pathname } = useLocation();

  const { availableLocales, locale, setLocale } = useLocale();

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeEl) => (
        <li key={localeEl}>
          <LocalizedLink
            aria-current={localeEl === locale ? "page" : undefined}
            onClick={() => setLocale(localeEl)}
            params={{ locale: getPrefix(localeEl).localePrefix }}
            to={pathWithoutLocale as To}
          >
            <span>
              {/* लोकेल - जैसे FR */}
              {localeEl}
            </span>
            <span>
              {/* अपने स्वयं के लोकेल में भाषा - जैसे Français */}
              {getLocaleName(localeEl, locale)}
            </span>
            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
              {/* वर्तमान लोकेल में भाषा - जैसे Francés वर्तमान लोकेल को Locales.SPANISH पर सेट करके */}
              {getLocaleName(localeEl)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* अंग्रेजी में भाषा - जैसे French */}
              {getLocaleName(localeEl, Locales.ENGLISH)}
            </span>
          </LocalizedLink>
        </li>
      ))}
    </ol>
  );
};
      useLocale hook के बारे में अधिक जानने के लिए, दस्तावेज़ देखें।

    11. HTML विशेषताएं प्रबंधन

      जैसा कि स्टेप 5 में देखा गया है, आप अपने रूट कंपोनेंट में useParams का उपयोग करके html टैग की lang और dir विशेषताओं को प्रबंधित कर सकते हैं। यह सुनिश्चित करता है कि सही विशेषताएं सर्वर और क्लाइंट दोनों पर सेट हों।

      src/routes/__root.tsx
      const localeRoute = getRouteApi("/{-$locale}");

function RootDocument({ children }: { children: ReactNode }) {
  const params = localeRoute.useParams();
  const locale = params?.locale ?? defaultLocale;

  return (
    <html dir={getHTMLTextDir(locale)} lang={locale}>
      {/* ... */}
    </html>
  );
}

    12. मिडलवेयर जोड़ें

      आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए intlayerProxy का भी उपयोग कर सकते हैं। यह plugin स्वचालित रूप से URL के आधार पर वर्तमान लोकेल का पता लगाएगा और उपयुक्त लोकेल कुकी सेट करेगा। यदि कोई लोकेल निर्दिष्ट नहीं है, तो plugin उपयोगकर्ता की ब्राउज़र भाषा वरीयताओं के आधार पर सबसे उपयुक्त लोकेल निर्धारित करेगा। यदि कोई लोकेल नहीं मिलता है, तो यह डिफ़ॉल्ट लोकेल पर रीडायरेक्ट करेगा।

      ध्यान दें कि production में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer package को devDependencies से dependencies में स्विच करना होगा।
      Intlayer v9 के बाद से, intlayerProxy() को सीधे intlayer() plugin में bundled किया गया है और routing.enableProxy विकल्प (true by default) के माध्यम से डिफ़ॉल्ट रूप से सक्षम है। नीचे दिखाए गए अनुसार इसे अलग से पंजीकृत करना अब वैकल्पिक है: यह backward compatibility के लिए रखा गया है और उन सेटअप के लिए जिन्हें plugin order को नियंत्रित करने की आवश्यकता है। opt out करने के लिए routing.enableProxy: false सेट करें। v9 release notes देखें।
      vite.config.ts
      import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    nitro(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
    tanstackStart({
      router: {
        routeFileIgnorePattern:
          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
      },
    }),
    viteReact(),
  ],
});

    13. अपने मेटाडेटा को अंतर्राष्ट्रीयकृत करें

      getIntlayer merged dictionary के विरुद्ध synchronously resolve करता है, वह जो प्रत्येक घोषित लोकेल को रखता है। head synchronous रहता है और कुछ भी await नहीं किया जाता है, लेकिन संपूर्ण बहुभाषी dictionary ब्राउज़र को भेजे गए route chunk में pull की जाती है।

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayer,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  head: ({ params }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // इस route के लिए पथ

    const metaContent = getIntlayer("app", locale);

    return {
      links: [
        // Canonical link: वर्तमान स्थानीयकृत पृष्ठ की ओर इशारा करता है
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Google को सभी स्थानीयकृत संस्करणों के बारे में बताएं
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: अमेलित भाषाओं में उपयोगकर्ताओं के लिए
        // डिफ़ॉल्ट fallback लोकेल परिभाषित करें (आमतौर पर आपकी प्राथमिक भाषा)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: metaContent.title },
        { name: "description", content: metaContent.meta.description },
      ],
    };
  },
});

      छोटे मेटाडेटा dictionaries, कुछ लोकेल के लिए, या prototyping के दौरान सर्वोत्तम है।

      getIntlayerAsync (v9.4 से उपलब्ध) getIntlayer की तरह व्यवहार करता है, लेकिन build plugin इसे merged dictionary के बजाय .intlayer/dynamic_dictionaries/ में per-locale chunk की ओर इंगित करता है। एक पृष्ठ इसलिए केवल उस लोकेल को जहाज करता है जिसे यह render करता है। चूंकि वह chunk on demand लोड होता है, head async बन जाता है:

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayerAsync,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  head: async ({ params }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // इस route के लिए पथ

    const metaContent = await getIntlayerAsync("app", locale);

    return {
      links: [
        // Canonical link: वर्तमान स्थानीयकृत पृष्ठ की ओर इशारा करता है
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Google को सभी स्थानीयकृत संस्करणों के बारे में बताएं
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: अमेलित भाषाओं में उपयोगकर्ताओं के लिए
        // डिफ़ॉल्ट fallback लोकेल परिभाषित करें (आमतौर पर आपकी प्राथमिक भाषा)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: metaContent.title },
        { name: "description", content: metaContent.meta.description },
      ],
    };
  },
});
      यदि एक head कई dictionaries को पढ़ता है, तो उन्हें Promise.all के साथ resolve करें: प्रत्येक getIntlayerAsync को अपनी line पर await करने से requests को chain किया जाता है न कि समानांतर में चलाया जाता है।

      trade-off: गतिशील import को head चलते समय resolve किया जाता है, document render के critical path पर। एक cold route पर यह head को कुछ मिलीसेकंड से देरी करता है और LCP को थोड़ा degrade कर सकता है।

      route loader में dictionary को resolve करें और head में loaderData से इसे वापस पढ़ें। matched routes के loaders समानांतर में चलते हैं, और staleTime: Infinity TanStack Router को बताता है कि परिणाम कभी भी stale नहीं होते हैं, इसलिए per-locale chunk एक बार resolve होता है और router cache से बाद में served होता है, head को synchronous छोड़ता है।

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";
import {
  defaultLocale,
  getIntlayerAsync,
  getLocalizedUrl,
  localeMap,
} from "intlayer";

export const Route = createFileRoute("/{-$locale}/")({
  component: RouteComponent,
  // अन्य matched routes के साथ समानांतर में resolved, head critical path से बाहर
  loader: async ({ params }) => {
    const { locale = defaultLocale } = params;

    return { metaContent: await getIntlayerAsync("app", locale) };
  },
  // दिए गए लोकेल के लिए dictionary कभी नहीं बदलता है: chunk को एक बार resolve करें
  staleTime: Infinity,
  head: ({ params, loaderData }) => {
    const { locale = defaultLocale } = params;
    const path = "/"; // इस route के लिए पथ

    return {
      links: [
        // Canonical link: वर्तमान स्थानीयकृत पृष्ठ की ओर इशारा करता है
        { rel: "canonical", href: getLocalizedUrl(path, locale) },

        // Hreflang: Google को सभी स्थानीयकृत संस्करणों के बारे में बताएं
        ...localeMap(({ locale: mapLocale }) => ({
          rel: "alternate",
          hrefLang: mapLocale,
          href: getLocalizedUrl(path, mapLocale),
        })),

        // x-default: अमेलित भाषाओं में उपयोगकर्ताओं के लिए
        // डिफ़ॉल्ट fallback लोकेल परिभाषित करें (आमतौर पर आपकी प्राथमिक भाषा)
        {
          rel: "alternate",
          hrefLang: "x-default",
          href: getLocalizedUrl(path, defaultLocale),
        },
      ],
      meta: [
        { title: loaderData?.metaContent.title },
        {
          name: "description",
          content: loaderData?.metaContent.meta.description,
        },
      ],
    };
  },
});
      head को loader settle होने से पहले call किया जा सकता है, इसलिए loaderData को संभवतः undefined के रूप में typed किया जाता है। optional chaining रखें, या एक fallback title return करें।

      आप head critical path पर इसकी cost दिए बिना per-locale chunk रखते हैं। कीमत developer experience है: content को explicitly loader से head में loaderData के माध्यम से threaded होना पड़ता है।

      किस resolution को चुनना चाहिए?

      Static resolution Dynamic resolution Cached dynamic resolution
      API getIntlayer getIntlayerAsync (v9.4+) getIntlayerAsync in loader (v9.4+)
      head signature synchronous async synchronous, reads loaderData
      Locales shipped every declared locale requested locale only requested locale only
      Client navigations nothing to resolve re-entered on every match served from the router cache
      Developer experience simplest one await content threaded through loaderData

    14. अपने server actions में locale को प्राप्त करें

      आप अपने server actions या API endpoints के अंदर से current locale को access करना चाह सकते हैं। आप इसे intlayer से getLocale helper का उपयोग करके कर सकते हैं।

      यहाँ TanStack Start के server functions का उपयोग करके एक उदाहरण दिया गया है:

      src/routes/{-$locale}/index.tsx
      import { createServerFn } from "@tanstack/react-start";
import {
  getRequestHeader,
  getRequestHeaders,
} from "@tanstack/react-start/server";
import { getCookie, getIntlayer, getLocale } from "intlayer";

export const getLocaleServer = createServerFn().handler(async () => {
  const locale = await getLocale({
    // अनुरोध से cookie प्राप्त करें (डिफ़ॉल्ट: 'INTLAYER_LOCALE')
    getCookie: (name) => {
      const cookieString = getRequestHeader("cookie");

      return getCookie(name, cookieString);
    },
    // अनुरोध से header प्राप्त करें (डिफ़ॉल्ट: 'x-intlayer-locale')
    // Accept-Language negotiation का उपयोग करके fallback
    getHeader: (name) => getRequestHeader(name),
  });

  // getIntlayerAsync() का उपयोग करके कुछ content प्राप्त करें
  const content = getIntlayer("app", locale);

  return { locale, content };
});

    15. Not found pages को manage करें

      जब कोई user एक non-existing page पर जाता है, तो आप एक custom not found page display कर सकते हैं और locale prefix इस बात को प्रभावित कर सकता है कि not found page कैसे triggered होता है।

      स्थानीयकृत होम पेज

      अगर आप अपनी content को string attribute में use करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आप function के value को इस तरह use कर सकते हैं:

      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      useIntlayer हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।
      16. src/components/locale-switcher.tsx
      import { useLocation } from "@tanstack/react-router";
import {
  getHTMLTextDir,
  getLocaleName,
  getPathWithoutLocale,
  getPrefix,
  Locales,
} from "intlayer";
import type { FC } from "react";
import { useLocale } from "react-intlayer";

import { LocalizedLink, type To } from "./localized-link";

export const LocaleSwitcher: FC = () => {
  const { pathname } = useLocation();

  const { availableLocales, locale, setLocale } = useLocale();

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeEl) => (
        <li key={localeEl}>
          <LocalizedLink
            aria-current={localeEl === locale ? "page" : undefined}
            onClick={() => setLocale(localeEl)}
            params={{ locale: getPrefix(localeEl).localePrefix }}
            to={pathWithoutLocale as To}
          >
            <span>
              {/* लोकेल - उदा. FR */}
              {localeEl}
            </span>
            <span>
              {/* अपनी लोकेल में भाषा - उदा. Français */}
              {getLocaleName(localeEl, locale)}
            </span>
            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
              {/* वर्तमान लोकेल में भाषा - उदा. Francés जब वर्तमान लोकेल Locales.SPANISH पर सेट हो */}
              {getLocaleName(localeEl)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* अंग्रेज़ी में भाषा - उदा. French */}
              {getLocaleName(localeEl, Locales.ENGLISH)}
            </span>
          </LocalizedLink>
        </li>
      ))}
    </ol>
  );
};
      useLocale हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।

      </Step>

    16. HTML विशेषताओं का प्रबंधन

      return ( {/* ... _/} ); } {/_ ... */} </html> ); }

      export const Route = createFileRoute("/{-$locale}/")({ component: RouteComponent, head: async ({ params }) => { const { locale = defaultLocale } = params; const path = "/"; // The path for this route

      plaintext
      const metaContent = await getIntlayerAsync("app", locale);
      plaintext
      
> यदि कोई `head` कई डिक्शनरी पढ़ता है, तो उन्हें `Promise.all` से हल करें, क्योंकि हर `getIntlayerAsync` को अलग पंक्ति में await करने से अनुरोध समानांतर चलने के बजाय एक-दूसरे से जुड़कर क्रमबद्ध हो जाते हैं।

समझौता यह है: डायनामिक import तब हल होता है जब `head` चल रहा होता है, यानी डॉक्यूमेंट रेंडर के क्रिटिकल पाथ पर। कोल्ड रूट पर इससे `head` कुछ मिलीसेकंड देर से तैयार होता है और **LCP** थोड़ा बिगड़ सकता है।

</Tab>

<Tab label="कैश्ड डायनामिक रिज़ॉल्यूशन" value="cached">

डिक्शनरी को रूट के `loader` में हल करें और `head` में `loaderData` से वापस पढ़ें। मैच हुए रूट के लोडर समानांतर चलते हैं, और `staleTime: Infinity` TanStack Router को बताता है कि परिणाम कभी बासी नहीं होता, इसलिए प्रति-लोकेल चंक एक ही बार हल होता है और उसके बाद राउटर कैश से मिलता है, जिससे `head` सिंक्रोनस बना रहता है।

```tsx fileName="src/routes/{-$locale}/index.tsx"

<Tabs>
 <Tab value='Extract command'>

  return { locale, content };
});
import { createFileRoute } from "@tanstack/react-router";
      src/routes/{-$locale}/route.tsx
      src/routes/{-$locale}/$.tsx
      import { NotFoundComponent } from "./404";

    17. अपने घटकों की सामग्री निकालें

      वैकल्पिक

      18. यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

      इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

      इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

    /**
     * आउटपुट फ़ाइलों का पथ परिभाषित करता है
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * शब्दकोश कुंजी उपसर्ग
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ

      bash

      bun x intlayer extract import { defineConfig } from "vite"; import { intlayer } from "vite-intlayer";

      export default defineConfig({ plugins: [

      plaintext
      intlayer({
  proxy: {
    ignore: (req) => req.url?.startsWith("/api"),
  },
}),

      ], });

      plaintext

      bash packageManager="npm" npm run build # या npm run dev

      plaintext

      bash packageManager="pnpm" pnpm run build # Or pnpm run dev

      plaintext

      bash packageManager="yarn" yarn build # Or yarn dev

      plaintext

      bash packageManager="bun"

      Please provide:

      1. The English source content (base block to reference)
      2. The current Hindi translation (to be audited)

      Once you share these blocks, I will:

      • Compare them thoroughly
      • Insert any missing content
      • Correct spelling, grammar, and Markdown syntax errors
      • Ensure code blocks are properly formatted with translated comments
      • Update documentation links to the Hindi locale (/hi/ instead of /en/)
      • Return the fully updated Hindi content

      Please paste the content between the and markers for both blocks.---

      bun run build # Or bun run dev import { localeFlatMap } from "intlayer"; // ... अन्य imports

      plaintext
      
फिर, एक `src/routes/sitemap[.]xml.ts` route बनाएं जो `generateSitemap` function का उपयोग करता है:

      `typescript fileName="src/routes/sitemap[.]xml.ts"

      export const Route = createFileRoute("/sitemap.xml")({ server: {

      plaintext
      handlers: {
  GET: async () => {
    const sitemap = generateSitemap(
      [
        { path: "/", changefreq: "daily", priority: 1.0 },
        { path: "/about", changefreq: "monthly", priority: 0.8 },
      ],
      { siteUrl: SITE_URL }
    );

    return new Response(sitemap, {
      headers: { "Content-Type": "application/xml" },
    });
  },
},

      }, }); { // ... आपकी मौजूदा कॉन्फ़िगरेशन include: [

      plaintext
      // ... आपकी मौजूदा includes
".intlayer/**/*.ts", // ऑटो-जेनरेट किए गए types को शामिल करें

      ], }

      Git कॉन्फ़िगरेशन

      Intlayer द्वारा उत्पन्न फाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपनी Git रिपॉजिटरी में कमिट करने से बचने देता है।

      ऐसा करने के लिए, आप अपनी .gitignore फाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

      .gitignore
      # Intlayer द्वारा उत्पन्न फाइलों को अनदेखा करें
.intlayer

      `

      VS Code Extension

      Intlayer के साथ अपने development experience को बेहतर बनाने के लिए, आप official Intlayer VS Code Extension को install कर सकते हैं।

      VS Code Marketplace से Install करें

      यह extension निम्नलिखित प्रदान करता है:

      • Autocompletion translation keys के लिए।
      • Real-time error detection missing translations के लिए।
      • Inline previews translated content का।
      • Quick actions आसानी से translations बनाने और update करने के लिए।

      Extension के उपयोग के बारे में अधिक विवरण के लिए, Intlayer VS Code Extension documentation देखें।

      आगे बढ़ें

      आगे बढ़ने के लिए, आप visual editor को लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरीकृत कर सकते हैं।

      दस्तावेज़ संदर्भ

      कंपाइलरTanstack Start Solid