Intlayer का उपयोग करके अपनी TanStack Start वेबसाइट का अनुवाद करें

विषय-सूची

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

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

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

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

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

1. 1

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

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

2. 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. 3

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

   आर्किटेक्चर

   इस आर्किटेक्चर में, सभी स्थानीयकृत रूट्स {-$locale} रूट सेगमेंट के तहत नेस्ट किए गए हैं। यह दृष्टिकोण सुनिश्चित करता है कि प्रत्येक भाषा का एक समर्पित URL हो, साथ ही स्वचालित लोकेल प्रीफ़िक्स, सत्यापन और SEO अनुकूलन सक्षम करता है।

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   .
   ├── src
   │   ├── components
   │   │   ├── Header.tsx
   │   │   ├── locale-switcher.content.ts
   │   │   ├── locale-switcher.tsx
   │   │   └── localized-link.tsx
   │   ├── hooks
   │   │   ├── useI18nHTMLAttributes.tsx
   │   │   └── useLocalizedNavigate.ts
   │   ├── routes
   │   │   ├── {-$locale}
   │   │   │   ├── 404.content.ts
   │   │   │   ├── 404.tsx
   │   │   │   ├── about.content.ts
   │   │   │   ├── about.tsx
   │   │   │   ├── index.content.tsx
   │   │   │   ├── index.tsx
   │   │   │   └── route.tsx             # Locale layout & prefix validation
   │   │   ├── __root.tsx                # Root route with IntlayerProvider
   │   │   └── sitemap[.]xml.ts
   │   ├── router.tsx
   │   └── styles.css
   ├── intlayer.config.ts
   ├── package.json
   ├── tsconfig.json
   └── vite.config.ts
   

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

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

   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. 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. 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. 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. 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. 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. 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, आदि, तो आप फ़ंक्शन का मान उपयोग कर सकते हैं:

   tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

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

   useIntlayer हुक दस्तावेज़ | react-intlayer
10. 9

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

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

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

    useLocale हुक दस्तावेज़ | react-intlayer
11. 10

    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. 11

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

    आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए 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 देखें।

    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. 12

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

    स्थिर समाधानगतिशील समाधानकैश्ड गतिशील समाधान

    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. 13

    अपने 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. 14

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

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

    लोकेल उपसर्गों के साथ 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. 15

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

    वैकल्पिक

    isOptional={true}>

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

    इस प्रक्रिया को आसान बनाने के लिए, 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
    

    intlayer >= 9intlayer < 9

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    intlayerCompiler प्लगइन शामिल करने के लिए अपना vite.config.ts अपडेट करें:

    vite.config.ts

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

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

    bash

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    npm run build # या npm run dev
    

17. 16

    पूर्व-प्रस्तुत करें और साइटमैप जनरेट करें

    Intlayer में एक built-in sitemap generator है जो आपको अपने एप्लिकेशन के लिए आसानी से sitemap बनाने में मदद करता है। यह localized routes को handle करता है और search engines के लिए आवश्यक metadata जोड़ता है।

    Intlayer द्वारा generated sitemap xhtml:link namespace (Hreflang XML Extensions) को support करता है। Default sitemap generators के विपरीत जो केवल raw URLs list करते हैं, Intlayer automatically एक page के सभी language versions के बीच required bidirectional links create करता है (उदाहरण के लिए, /about, /about?lang=fr, और /about?lang=es)। यह सुनिश्चित करता है कि search engines सही language version को सही audience को correctly index और serve करें।

    इसे उपयोग करने के लिए, आपको पहले अपनी vite.config.ts को कॉन्फ़िगर करना होगा ताकि आपके स्थानीयकृत routes के लिए प्री-रेंडरिंग सक्षम हो सके और डिफ़ॉल्ट TanStack Start sitemap जनरेशन को अक्षम किया जा सके।

    vite.config.ts

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    import { localeFlatMap } from "intlayer";
    // ... अन्य imports
    
    export const pathList = ["", "/about", "/404"];
    
    const localizedPages = localeFlatMap(({ urlPrefix }) =>
      pathList.map((path) => ({
        path: `${urlPrefix}${path}`,
        prerender: {
          enabled: true,
        },
      }))
    );
    
    export default defineConfig({
      plugins: [
        // ... अन्य plugins
        tanstackStart({
          // ... अन्य config
          sitemap: {
            enabled: false,
          },
          prerender: {
            enabled: true,
            crawlLinks: false,
            concurrency: 10,
          },
          pages: localizedPages,
        }),
      ],
    });
    

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

    src/routes/sitemap[.]xml.ts

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    import { createFileRoute } from "@tanstack/react-router";
    import { generateSitemap } from "intlayer";
    
    export const Route = createFileRoute("/sitemap.xml")({
      server: {
        handlers: {
          GET: async () => {
            const sitemap = generateSitemap(
              [
                { path: "/", changefreq: "daily", priority: 1.0 },
                { path: "/about", changefreq: "monthly", priority: 0.8 },
              ],
              { siteUrl: "https://example.com" }
            );
    
            return new Response(sitemap, {
              headers: { "Content-Type": "application/xml" },
            });
          },
        },
      },
    });
    

18. 17

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

    Intlayer module augmentation का उपयोग करके TypeScript के लाभ प्राप्त करता है और आपके codebase को मजबूत बनाता है।

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

    tsconfig.json

    सामग्री कॉपी करें

    कोड कॉपी करें

    कोड को क्लिपबोर्ड पर कॉपी करें

    {
      // ... आपकी मौजूदा कॉन्फ़िगरेशन
      include: [
        // ... आपकी मौजूदा includes
        ".intlayer/**/*.ts", // ऑटो-जेनरेट किए गए types को शामिल करें
      ],
    }
    

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

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

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

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

VS Code Extension

Intlayer के साथ अपने development experience को बेहतर बनाने के लिए, आप official Intlayer VS Code Extension को 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 का उपयोग करके अपनी सामग्री को बाहरीकृत कर सकते हैं।

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

अक्सर पूछे जाने वाले प्रश्न