Author:
    Creation:2025-09-09Last update:2026-05-31

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

    विषय-सूची

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

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

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

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

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

    बंडल का आकार

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

    रखरखाव

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

    एआई एजेंट

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

    स्वचालन

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

    प्रदर्शन

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

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

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

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

    www.youtube.com

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

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

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

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

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

      bash
      npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • 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(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    viteReact(),  ],});export default config;
      intlayer() Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।

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

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

      src/routes/__root.tsx
      import {  createRootRouteWithContext,  HeadContent,  Scripts,} from "@tanstack/react-router";import { defaultLocale, getHTMLTextDir } from "intlayer";import { type ReactNode } from "react";import { IntlayerProvider } from "react-intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";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>  );}
      यदि आप अपनी सामग्री को string एट्रिब्यूट में उपयोग करना चाहते हैं, जैसे 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)}" />

    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 का उपयोग करें

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

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

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";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>  );}
      useIntlayer हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।

    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 हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।

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

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

      src/routes/__root.tsx
      function RootDocument({ children }: { children: ReactNode }) {  const params = LocaleRoute.useParams();  const locale = params?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );}

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

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

      ध्यान दें कि उत्पादन में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer पैकेज को devDependencies से dependencies में स्विच करने की आवश्यकता है।
      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, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // यदि आप Nitro का उपयोग करते हैं तो प्रॉक्सी को सर्वर से पहले रखा जाना चाहिए    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    viteReact(),  ],});

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

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

      src/routes/{-$locale}/index.tsx
      import { createFileRoute } from "@tanstack/react-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

    14. अपने सर्वर एक्शन्स में लोकेल प्राप्त करें

      आप अपने सर्वर एक्शन्स या API एंडपॉइंट के अंदर से वर्तमान लोकेल तक पहुंचना चाह सकते हैं। आप इसे intlayer से getLocale हेल्पर का उपयोग करके कर सकते हैं।

      यहाँ TanStack Start के सर्वर फ़ंक्शंस का उपयोग करने वाला एक उदाहरण है:

      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({    // अनुरोध से कुकी प्राप्त करें (डिफ़ॉल्ट: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // अनुरोध से हेडर प्राप्त करें (डिफ़ॉल्ट: 'x-intlayer-locale')    // Accept-Language बातचीत का उपयोग करके फ़ालबैक    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer() का उपयोग करके कुछ सामग्री प्राप्त करें  const content = getIntlayer("app", locale);  return { locale, content };});

    15. नहीं मिले पृष्ठों का प्रबंधन करें

      जब कोई उपयोगकर्ता गैर-मौजूद पृष्ठ पर जाता है, तो आप एक कस्टम नहीं मिला पृष्ठ प्रदर्शित कर सकते हैं और लोकेल उपसर्ग नहीं मिला पृष्ठ के ट्रिगर होने के तरीके को प्रभावित कर सकता है।

      लोकेल उपसर्गों के साथ TanStack Router के 404 हैंडलिंग को समझना

      TanStack Router में, स्थानीयकृत रूट्स के साथ 404 पृष्ठों को संभालने के लिए एक बहु-स्तरीय दृष्टिकोण की आवश्यकता होती है:

      1. समर्पित 404 रूट: 404 UI प्रदर्शित करने के लिए एक विशिष्ट रूट
      2. रूट-स्तरीय सत्यापन: लोकेल उपसर्गों को मान्य करता है और अमान्य को 404 पर पुनर्निर्देशित करता है
      3. कैच-ऑल रूट: लोकेल खंड के भीतर किसी भी बेमेल पथ को कैप्चर करता है
      src/routes/{-$locale}/404.tsx
      import { createFileRoute } from "@tanstack/react-router";// यह एक समर्पित /[locale]/404 रूट बनाता है// इसका उपयोग प्रत्यक्ष रूट के रूप में और अन्य फ़ाइलों में घटक के रूप में आयात दोनों के लिए किया जाता हैexport const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// अलग से निर्यात किया गया ताकि इसे notFoundComponent और कैच-ऑल रूट्स में पुन: उपयोग किया जा सकेexport function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}
      src/routes/{-$locale}/route.tsx
      import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad रूट रेंडर होने से पहले चलता है (सर्वर और क्लाइंट दोनों पर)  // लोकेल उपसर्ग को मान्य करने के लिए यह आदर्श स्थान है  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix जाँचता है कि क्या लोकेल आपके intlayer कॉन्फ़िग के अनुसार मान्य है    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // अमान्य लोकेल उपसर्ग - मान्य लोकेल उपसर्ग के साथ 404 पृष्ठ पर पुनर्निर्देशित करें      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent तब कहा जाता है जब कोई चाइल्ड रूट मौजूद नहीं होता  // उदा., /en/non-existent-page /en लेआउट के भीतर इसे ट्रिगर करता है  notFoundComponent: NotFoundComponent,});
      src/routes/{-$locale}/$.tsx
      import { createFileRoute } from "@tanstack/react-router";import { NotFoundComponent } from "./404";// $ (स्प्लैट/कैच-ऑल) रूट किसी भी पथ से मेल खाता है जो अन्य रूट्स से मेल नहीं खाता// उदा., /en/some/deeply/nested/invalid/path// यह सुनिश्चित करता है कि लोकेल के भीतर सभी बेमेल पथ 404 पृष्ठ दिखाते हैं// इसके बिना, बेमेल गहरे पथ एक खाली पृष्ठ या त्रुटि दिखा सकते हैंexport const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

    16. TypeScript कॉन्फ़िगर करें

      Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।

      सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से उत्पन्न प्रकार शामिल हैं:

      tsconfig.json
      {  // ... आपके मौजूदा कॉन्फ़िगरेशन  include: [    // ... आपके मौजूदा शामिल    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें  ],}

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

      वैकल्पिक

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

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

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

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

const config: IntlayerConfig = {
  // ... आपका शेष कॉन्फ़िगरेशन
  compiler: {
    /**
     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
     */
    enabled: true,

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

    /**
     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
     */
    saveComponents: false,

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

export default config;

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

      bash
      npx intlayer extract

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

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

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

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

    VS Code एक्सटेंशन

    Intlayer के साथ अपने विकास के अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन इंस्टॉल कर सकते हैं।

    VS Code Marketplace से इंस्टॉल करें

    यह एक्सटेंशन प्रदान करता है:

    • अनुवाद कुंजियों के लिए ऑटोकम्प्लीशन।
    • गुम अनुवादों के लिए रीयल-टाइम त्रुटि पहचान।
    • अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
    • आसानी से अनुवाद बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

    एक्सटेंशन का उपयोग करने के तरीके के बारे में अधिक विवरण के लिए, Intlayer VS Code एक्सटेंशन दस्तावेज़ देखें।

    आगे बढ़ें

    आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरी रूप दे सकते हैं।

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

    कंपाइलरTanstack Start Solid