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

विषय सूची

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

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

रिएक्ट-आई18नेक्स्ट या आई18नेक्स्ट जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

Tanstack Start एप्लिकेशन में Intlayer सेटअप करने के लिए स्टेप-बाय-स्टेप गाइड

वीडियोकोडडेमो

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-tanstack-start-solid.vercel.app

Open embedded page in fullscreen

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 solid-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

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

   • solid-intlayer वह पैकेज जो Intlayer को Solid एप्लिकेशन में एकीकृत करता है। यह Solid अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता (context providers) और हुक प्रदान करता है।

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

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

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

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

   vite.config.ts

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

   कोड कॉपी करें

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

   import { intlayer } from "vite-intlayer";
   import { defineConfig } from "vite";
   import { devtools } from "@tanstack/devtools-vite";
   import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
   import solidPlugin from "vite-plugin-solid";
   
   export default defineConfig({
     plugins: [
       devtools(),
       tanstackStart({
         router: {
           routeFileIgnorePattern:
             ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
         },
       }),
       solidPlugin({ ssr: true }),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

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

5. 5

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

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

   src/routes/__root.tsx

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

   कोड कॉपी करें

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

   import {
     HeadContent,
     Scripts,
     createRootRouteWithContext,
     getRouteApi,
   } from "@tanstack/solid-router";
   import { HydrationScript } from "solid-js/web";
   import { Suspense, type ParentComponent } from "solid-js";
   import { IntlayerProvider } from "solid-intlayer";
   import { defaultLocale, getHTMLTextDir } from "intlayer";
   
   const localeRoute = getRouteApi("/{-$locale}");
   
   export const Route = createRootRouteWithContext()({
     shellComponent: RootComponent,
   });
   
   const RootComponent: ParentComponent = (props) => {
     const params = localeRoute.useParams();
     const locale = params()?.locale ?? defaultLocale;
   
     return (
       <html dir={getHTMLTextDir(locale)} lang={locale}>
         <head>
           <HydrationScript />
           <HeadContent />
         </head>
         <body>
           <IntlayerProvider locale={locale}>
             <Suspense>{props.children}</Suspense>
           </IntlayerProvider>
           <Scripts />
         </body>
       </html>
     );
   };
   

6. 6

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

   एक लेआउट बनाएं जो लोकेल उपसर्ग को संभालता है और सत्यापन करता है। यह लेआउट सुनिश्चित करेगा कि केवल वैध लोकेल ही संसाधित हों।

   यदि आपको रूट स्तर पर लोकेल उपसर्ग को मान्य करने की आवश्यकता नहीं है, तो यह चरण वैकल्पिक है।

   src/routes/{-$locale}/route.tsx

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

   कोड कॉपी करें

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

   import { createFileRoute, Outlet, redirect } from "@tanstack/solid-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 },
           replace: true,
         });
       }
     },
     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 ejemplo 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/LocalizedLink.tsx

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

   कोड कॉपी करें

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

   import { Link, type LinkProps } from "@tanstack/solid-router";
   import { getPrefix } from "intlayer";
   import { useLocale } from "solid-intlayer";
   import type { JSX } from "solid-js";
   
   export const LOCALE_ROUTE = "{-$locale}" as const;
   
   export type RemoveLocaleParam<TVal> = TVal extends string
     ? RemoveLocaleFromString<TVal>
     : TVal;
   
   export type To = RemoveLocaleParam<LinkProps["to"]>;
   
   type CollapseDoubleSlashes<TString extends string> =
     TString extends `${infer THead}//${infer TTail}`
       ? CollapseDoubleSlashes<`${THead}/${TTail}`>
       : TString;
   
   export type LocalizedLinkProps = Omit<LinkProps, "to"> & {
     to?: To;
   } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;
   
   type RemoveAll<
     TString extends string,
     TSub extends string,
   > = TString extends `${infer THead}${TSub}${infer TTail}`
     ? RemoveAll<`${THead}${TTail}`, TSub>
     : TString;
   
   type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<
     RemoveAll<TString, typeof LOCALE_ROUTE>
   >;
   
   export const LocalizedLink = (props: LocalizedLinkProps) => {
     const { locale } = useLocale();
   
     return (
       <Link
         {...props}
         params={{
           locale: getPrefix(locale()).localePrefix,
           ...(typeof props.params === "object" ? props.params : {}),
         }}
         to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}
       />
     );
   };
   

   यह घटक दो उद्देश्यों की पूर्ति करता है:

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

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

   src/hooks/useLocalizedNavigate.tsx

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

   कोड कॉपी करें

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

   import { useNavigate } from "@tanstack/solid-router";
   import { getLocalizedUrl } from "intlayer";
   import { useLocale } from "solid-intlayer";
   
   export const useLocalizedNavigate = () => {
     const navigate = useNavigate();
     const { locale } = useLocale();
   
     const localizedNavigate = (to: string) => {
       const localizedTo = getLocalizedUrl(to, locale());
       return navigate({ to: localizedTo });
     };
   
     return localizedNavigate;
   };
   

9. 9

   अपने पेजों में Intlayer का उपयोग करें

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

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

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

   src/routes/{-$locale}/index.tsx

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

   कोड कॉपी करें

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

   import { createFileRoute } from "@tanstack/solid-router";
   import { useIntlayer } from "solid-intlayer";
   import { LocalizedLink } from "@/components/LocalizedLink";
   
   export const Route = createFileRoute("/{-$locale}/")({
     component: RouteComponent,
   });
   
   function RouteComponent() {
     const content = useIntlayer("index-page");
   
     return (
       <main>
         <h1>{content.heroTitle}</h1>
         <p>{content.heroDesc}</p>
         <div>
           <LocalizedLink to="/">{content.navHome}</LocalizedLink>
           <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>
         </div>
       </main>
     );
   }
   

   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)}" />
   

   In Solid, useIntlayer returns reactive content (e.g., content). You can access its properties directly.

   useIntlayer हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।

10. 10

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

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

    src/components/LocaleSwitcher.tsx

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

    कोड कॉपी करें

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

    import { useLocation } from "@tanstack/solid-router";
    import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";
    import { For } from "solid-js";
    import { useIntlayer, useLocale } from "solid-intlayer";
    import { LocalizedLink, type To } from "./LocalizedLink";
    
    export const LocaleSwitcher = () => {
      const content = useIntlayer("locale-switcher");
      const location = useLocation();
    
      const { availableLocales, locale, setLocale } = useLocale();
    
      const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);
    
      return (
        <div class="flex flex-row gap-2">
          <For each={availableLocales}>
            {(localeEl) => (
              <LocalizedLink
                aria-current={localeEl === locale() ? "page" : undefined}
                onClick={() => setLocale(localeEl)}
                params={{ locale: getPrefix(localeEl).localePrefix }}
                to={pathWithoutLocale() as To}
              >
                {getLocaleName(localeEl)}
              </LocalizedLink>
            )}
          </For>
        </div>
      );
    };
    
    export default LocaleSwitcher;
    

    Solid में, useLocale से locale एक सिग्नल एक्सेसॉर है। इसके वर्तमान मान को प्रतिक्रियाशील रूप से पढ़ने के लिए locale() (कोष्ठक के साथ) का उपयोग करें।

    useLocale हुक के बारे में अधिक जानने के लिए, दस्तावेज़ीकरण देखें।

11. 11

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

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

    src/routes/__root.tsx

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

    कोड कॉपी करें

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

    const RootComponent: ParentComponent = (props) => {
      const params = localeRoute.useParams();
      const locale = params()?.locale ?? defaultLocale;
    
      return (
        <html dir={getHTMLTextDir(locale)} lang={locale}>
          {/* ... */}
        </html>
      );
    };
    

    ---

12. 12

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

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

    ध्यान दें कि उत्पादन में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer पैकेज को devDependencies से dependencies में बदलना होगा।

    Intlayer v9 के बाद से, intlayerProxy() को सीधे intlayer() प्लगइन में बंडल किया गया है और routing.enableProxy विकल्प (true डिफ़ॉल्ट रूप से) के माध्यम से डिफ़ॉल्ट रूप से सक्षम किया गया है। इसे अलग से पंजीकृत करना जैसा कि नीचे दिखाया गया है अब वैकल्पिक है, और इसे पिछड़े संगतता के लिए और उन सेटअप के लिए रखा गया है जिन्हें प्लगइन ऑर्डर को नियंत्रित करने की आवश्यकता है। routing.enableProxy: false सेट करें ऑप्ट आउट करने के लिए। v9 रिलीज़ नोट्स देखें।

    vite.config.ts

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

    कोड कॉपी करें

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

    import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
    import solid from "vite-plugin-solid";
    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)$",
          },
        }),
        solid(),
      ],
    });
    

    ---

13. 13

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

    स्टैटिक रिज़ॉल्यूशनडायनामिक रिज़ॉल्यूशनकैश्ड डायनामिक रिज़ॉल्यूशन

    getIntlayer मर्ज की गई डिक्शनरी (जिसमें सभी घोषित लोकेल होते हैं) के विरुद्ध सिंक्रोनस रूप से हल होता है। head सिंक्रोनस रहता है और कुछ भी await नहीं किया जाता, लेकिन पूरी बहुभाषी डिक्शनरी ब्राउज़र को भेजे जाने वाले रूट चंक में शामिल हो जाती है।

    src/routes/{-$locale}/index.tsx

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

    कोड कॉपी करें

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

    import { createFileRoute } from "@tanstack/solid-router";
    import {
      defaultLocale,
      getIntlayer,
      getLocalizedUrl,
      localeMap,
    } from "intlayer";
    
    export const Route = createFileRoute("/{-$locale}/")({
      component: RouteComponent,
      head: ({ params }) => {
        const { locale = defaultLocale } = 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 },
          ],
        };
      },
    });
    

    छोटी मेटाडेटा डिक्शनरी, कुछ ही लोकेल, या प्रोटोटाइपिंग के दौरान सबसे उपयुक्त।

    getIntlayerAsync (v9.4 से उपलब्ध) getIntlayer की तरह ही व्यवहार करता है, लेकिन बिल्ड प्लगइन इसे मर्ज की गई डिक्शनरी के बजाय .intlayer/dynamic_dictionaries/ में मौजूद प्रति-लोकेल चंक की ओर इंगित करता है। इसलिए पेज केवल उसी लोकेल को भेजता है जिसे वह रेंडर करता है। चूँकि वह चंक माँग पर लोड होता है, head async बन जाता है:

    src/routes/{-$locale}/index.tsx

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

    कोड कॉपी करें

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

    import { createFileRoute } from "@tanstack/solid-router";
    import {
      defaultLocale,
      getIntlayerAsync,
      getLocalizedUrl,
      localeMap,
    } from "intlayer";
    
    export const Route = createFileRoute("/{-$locale}/")({
      component: RouteComponent,
      head: async ({ params }) => {
        const { locale = defaultLocale } = params;
        const path = "/"; // The path for this route
    
        const metaContent = await getIntlayerAsync("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 },
          ],
        };
      },
    });
    

    यदि कोई head कई डिक्शनरी पढ़ता है, तो उन्हें Promise.all से हल करें, क्योंकि हर getIntlayerAsync को अलग पंक्ति में await करने से अनुरोध समानांतर चलने के बजाय एक-दूसरे से जुड़कर क्रमबद्ध हो जाते हैं।

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

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

    src/routes/{-$locale}/index.tsx

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

    कोड कॉपी करें

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

    import { createFileRoute } from "@tanstack/solid-router";
    import {
      defaultLocale,
      getIntlayerAsync,
      getLocalizedUrl,
      localeMap,
    } from "intlayer";
    
    export const Route = createFileRoute("/{-$locale}/")({
      component: RouteComponent,
      // Resolved in parallel with the other matched routes, off the head critical path
      loader: async ({ params }) => {
        const { locale = defaultLocale } = params;
    
        return { metaContent: await getIntlayerAsync("app", locale) };
      },
      // The dictionary never changes for a given locale: resolve the chunk once
      staleTime: Infinity,
      head: ({ params, loaderData }) => {
        const { locale = defaultLocale } = params;
        const path = "/"; // The path for this route
    
        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: loaderData?.metaContent.title },
            {
              name: "description",
              content: loaderData?.metaContent.meta.description,
            },
          ],
        };
      },
    });
    

    लोडर पूरा होने से पहले भी head कॉल हो सकता है, इसलिए loaderData का टाइप संभावित रूप से undefined है। ऑप्शनल चेनिंग बनाए रखें, या कोई फ़ॉलबैक टाइटल लौटाएँ।

    आप प्रति-लोकेल चंक का लाभ बनाए रखते हैं, बिना उसकी लागत head के क्रिटिकल पाथ पर चुकाए। कीमत डेवलपर अनुभव की है: कंटेंट को लोडर से head तक loaderData के ज़रिए स्पष्ट रूप से पहुँचाना पड़ता है।

    कौन-सा रिज़ॉल्यूशन चुनें?

    सभी तालिका सामग्री दिखाएं

    सभी तालिका सामग्री दिखाएं

    सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें

    	स्टैटिक रिज़ॉल्यूशन	डायनामिक रिज़ॉल्यूशन	कैश्ड डायनामिक रिज़ॉल्यूशन
    API	getIntlayer	getIntlayerAsync (v9.4+)	loader में getIntlayerAsync (v9.4+)
    head सिग्नेचर	सिंक्रोनस	async	सिंक्रोनस, loaderData पढ़ता है
    भेजे गए लोकेल	सभी घोषित लोकेल	केवल अनुरोधित लोकेल	केवल अनुरोधित लोकेल
    क्लाइंट नेविगेशन	हल करने को कुछ नहीं	हर मैच पर दोबारा चलता है	राउटर कैश से मिलता है
    डेवलपर अनुभव	सबसे सरल	एक await	कंटेंट loaderData से पास होता है

    ---

14. 14

    अपने सर्वर कार्यों में लोकेल प्राप्त करें

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

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

    src/routes/{-$locale}/index.tsx

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

    कोड कॉपी करें

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

    import { createServerFn } from "@tanstack/solid-start";
    import {
      getRequestHeader,
      getRequestHeaders,
    } from "@tanstack/solid-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),
      });
    
      // some content retrieved with getIntlayer()
      const content = getIntlayer("app", locale);
    
      return { locale, content };
    });
    

    ---

15. 15

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

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

    लोकेल उपसर्गों के साथ TanStack Router के 404 प्रबंधन को समझना

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

    1. समर्पित 404 रूट: 404 UI प्रदर्शित करने के लिए एक विशिष्ट रूट
    2. रूट-स्तरीय सत्यापन: लोकेल उपसर्गों को मान्य करता है और अमान्य उपसर्गों को 404 पर रीडायरेक्ट करता है
    3. कैच-ऑल रूट: लोकेल खंड के भीतर किसी भी गैर-मिलान वाले पथ को कैप्चर करता है

    src/routes/{-$locale}/404.tsx

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

    कोड कॉपी करें

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

    import { createFileRoute } from "@tanstack/solid-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/solid-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/solid-router";
    
    import { NotFoundComponent } from "./404";
    
    // $ (स्प्लैट/कैच-ऑल) रूट किसी भी पथ से मेल खाता है जो अन्य रूट से मेल नहीं खाता है
    // उदा: /en/some/deeply/nested/invalid/path
    // यह सुनिश्चित करता है कि लोकेल के भीतर सभी गैर-मिलान पथ 404 पेज दिखाएं
    // इसके बिना, गहरे गैर-मिलान पथ एक खाली पेज या त्रुटि दिखा सकते हैं
    export const Route = createFileRoute("/{-$locale}/$")({
      component: NotFoundComponent,
    });
    

16. 16

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

    वैकल्पिक

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

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

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

    intlayer.config.ts

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

    कोड कॉपी करें

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

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... आपकी कॉन्फ़िगरेशन का शेष भाग
      compiler: {
        /**
         * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
         */
        enabled: true,
    
        /**
         * आउटपुट फ़ाइलों का पथ परिभाषित करता है
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए।
         *
         * - यदि `true` है, तो कंपाइलर डिस्क पर घटक फ़ाइल को फिर से लिखेगा। इस प्रकार, परिवर्तन स्थायी होगा, और कंपाइलर अगली प्रक्रिया के लिए परिवर्तन को छोड़ देगा। इस तरह, कंपाइलर ऐप को बदल सकता है और फिर इसे हटाया जा सकता है।
         *
         * - यदि `false` है, तो कंपाइलर कोड में `useIntlayer()` फ़ंक्शन कॉल को केवल बिल्ड आउटपुट में इंजेक्ट करेगा, जिससे मूल कोडबेस बरकरार रहेगा। परिवर्तन केवल मेमोरी में किया जाएगा।
         */
        saveComponents: false,
    
        /**
         * डिक्शनरी की प्रिफिक्स
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    एक्सट्रैक्ट कमांडBabel कंपाइलर

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

    bash

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

    कोड कॉपी करें

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

    npx intlayer extract
    

    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 { intlayer, intlayerCompiler } from "vite-intlayer";
    import { defineConfig } from "vite";
    import { devtools } from "@tanstack/devtools-vite";
    import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
    import solidPlugin from "vite-plugin-solid";
    
    export default defineConfig({
      plugins: [
        devtools(),
        tanstackStart({
          router: {
            routeFileIgnorePattern:
              ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$",
          },
        }),
        solidPlugin({ ssr: true }),
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

    bash

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

    कोड कॉपी करें

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

    npm run build # या npm run dev
    

    ---

17. 16

    Pre-render & Generate Sitemap

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

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

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

    vite.config.ts

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

    कोड कॉपी करें

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

    import { localeMap, 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/solid-router";
    import { generateSitemap } from "intlayer";
    
    // साइट का URL
    const SITE_URL = "http://localhost:3000";
    
    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: SITE_URL }
            );
    
            // XML प्रतिक्रिया लौटाएं
            return new Response(sitemap, {
              headers: { "Content-Type": "application/xml" },
            });
          },
        },
      },
    });
    

    ---

18. 17

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

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

    सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड प्रकार शामिल हैं:

    tsconfig.json

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

    कोड कॉपी करें

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

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

    ---

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

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

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

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

VS Code एक्सटेंशन

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

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

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

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

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

आगे बढ़ना

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

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

• Intlayer दस्तावेज़ीकरण
• Tanstack Start दस्तावेज़ीकरण
• useIntlayer हुक
• useLocale हुक
• सामग्री घोषणा
• कॉन्फ़िगरेशन