Author:
    Aymeric PINEAU
    Creation:2025-09-04Last update:2026-06-23

    Intlayer के साथ अपना React Router v7 अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

    यह गाइड दिखाता है कि कैसे Intlayer को React Router v7 प्रोजेक्ट्स में seamless अंतरराष्ट्रीयकरण के लिए एकीकृत किया जाए, जिसमें locale-aware रूटिंग, TypeScript समर्थन, और आधुनिक विकास प्रथाएँ शामिल हैं।

    यह गाइड फ्रंटएंड राउटिंग पर केंद्रित है। fs-routes राउटिंग के लिए, Intlayer with React Router v7 File-System Routes गाइड देखें।

    Table of Contents

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

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

    इंटलेयर को लोकेल-अवेयर रूटिंग, लोकेल डिटेक्शन के लिए मिडलवेयर, और स्केलिंग इंटरनेशनलाइजेशन (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके रिएक्ट राउटर के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।

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

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

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

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

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

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

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

    www.youtube.com
    ide.intlayer.org
    ide.intlayer.org
    intlayer-react-router-v7.vercel.app

    See the Config-Based Routing Template or File-System Routes Template on GitHub.

    1. निर्भरताएँ स्थापित करें

      अपनी पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:

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

      • intlayer

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

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

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

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

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

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

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

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

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

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

      vite.config.ts
      import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

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

    4. React Router v7 रूट्स कॉन्फ़िगर करें

      अपने रूटिंग कॉन्फ़िगरेशन को स्थानीय-जानकारी वाले रूट्स के साथ सेट करें:

      app/routes.ts
      import { layout, route, type RouteConfig } from "@react-router/dev/routes";

export default [
  route("/:locale?", "routes/page.tsx"), // स्थानीयकृत होम पेज
  route("/:locale?/about", "routes/about/page.tsx"), // स्थानीयकृत अबाउट पेज
] satisfies RouteConfig;

      Set up your routing configuration to use file-system based routes with flatRoutes:

      app/routes.ts
      import type { RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
import { configuration } from "intlayer";

const routes: RouteConfig = flatRoutes({
  // Ignore content declaration files from being treated as routes
  ignoredRouteFiles: configuration.content.fileExtensions.map(
    (fileExtension) => `**/*${fileExtension}`
  ),
});

export default routes;
      The flatRoutes function from @react-router/fs-routes enables file-system based routing, where the file structure in the routes/ directory determines your application's routes. The ignoredRouteFiles option ensures that Intlayer content declaration files (.content.ts, etc.) are not treated as route files.

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

      अपने रूट लेआउट और स्थानीय-विशिष्ट लेआउट सेट करें:

      रूट लेआउट

      app/root.tsx
      import { getLocaleFromPath } from "intlayer";
import { IntlayerProvider } from "react-intlayer";
import {
  data,
  Meta,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "react-router";
import type { Route } from "./+types/root";

// ... Unchanged App, links and ErrorBoundary code

export async function loader({ request }: Route.LoaderArgs) {
  const locale = getLocaleFromPath(request.url);

  if (!locale) {
    throw data("Language not supported", { status: 404 });
  }

  return { locale };
}

export function Layout({
  children,
}: { children: React.ReactNode } & Route.ComponentProps) {
  const data = useLoaderData<typeof loader>();
  const { locale } = data ?? {};

  return (
    <html lang={locale}>
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <Meta />
        <Links />
      </head>
      <body>
        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

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

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

      app/routes/[lang]/page.content.ts
      import { t, type Dictionary } from "intlayer";

const pageContent = {
  key: "page",
  content: {
    title: t({
      en: "Welcome to React Router v7 + Intlayer",
      es: "Bienvenido a React Router v7 + Intlayer",
      fr: "Bienvenue sur React Router v7 + Intlayer",
    }),
    description: t({
      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
    }),
    aboutLink: t({
      en: "हमारे बारे में जानें",
      es: "Aprender Sobre Nosotros",
      fr: "En savoir plus sur nous",
    }),
    homeLink: t({
      en: "होम",
      es: "Inicio",
      fr: "Accueil",
    }),
  },
} satisfies Dictionary;

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

    7. स्थानीय-जानकारी वाले घटक बनाएँ

      स्थानीय-जानकारी वाले नेविगेशन के लिए LocalizedLink घटक बनाएँ:

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

import { getLocalizedUrl, type LocalesValues } from "intlayer";
import { useLocale } from "react-intlayer";
import { Link, type LinkProps, type To } from "react-router";

// यह फ़ंक्शन जांचता है कि लिंक बाहरी है या नहीं
const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);

// यह फ़ंक्शन दिए गए पते को स्थानीयकृत URL में परिवर्तित करता है
export const locacalizeTo = (to: To, locale: LocalesValues): To => {
  if (typeof to === "string") {
    if (isExternalLink(to)) {
      return to;
    }

    return getLocalizedUrl(to, locale);
  }

  if (isExternalLink(to.pathname ?? "")) {
    return to;
  }

  return {
    ...to,
    pathname: getLocalizedUrl(to.pathname ?? "", locale),
  };
};

// यह स्थानीयकृत लिंक के लिए एक React functional component है
export const LocalizedLink: FC<LinkProps> = (props) => {
  const { locale } = useLocale();

  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
};

      यदि आप स्थानीयकृत मार्गों पर नेविगेट करना चाहते हैं, तो आप useLocalizedNavigate हुक का उपयोग कर सकते हैं:

      app/hooks/useLocalizedNavigate.ts
      import { useLocale } from "react-intlayer";
import { type NavigateOptions, type To, useNavigate } from "react-router";

import { locacalizeTo } from "~/components/localized-link";

export const useLocalizedNavigate = () => {
  const navigate = useNavigate();
  const { locale } = useLocale();

  const localizedNavigate = (to: To, options?: NavigateOptions) => {
    const localedTo = locacalizeTo(to, locale);

    navigate(localedTo, options);
  };

  return localizedNavigate;
};

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

      अपने एप्लिकेशन में अपने कंटेंट डिक्शनरीज़ तक पहुँचें:

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

      app/routes/page.tsx
      import { getIntlayer, validatePrefix } from "intlayer";
import { useIntlayer } from "react-intlayer";
import { data } from "react-router";

import { LocaleSwitcher } from "~/components/locale-switcher";

import { Navbar } from "~/components/navbar";
import type { Route } from "./+types/page";

export const loader = ({ params }: Route.LoaderArgs) => {
  const { locale } = params;

  const { isValid } = validatePrefix(locale);

  if (!isValid) {
    throw data("Locale not supported", { status: 404 });
  }
};

export const meta: Route.MetaFunction = ({ params }) => {
  const content = getIntlayer("page", params.locale);

  return [
    { title: content.title },
    { content: content.description, name: "description" },
  ];
};

export default function Page() {
  const { title, description, aboutLink } = useIntlayer("page");

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <nav>
        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
      </nav>
    </div>
  );
}
      app/routes/($locale)._index.tsx
      import { getIntlayer, validatePrefix } from "intlayer";
import { useIntlayer } from "react-intlayer";
import { data } from "react-router";

import { LocaleSwitcher } from "~/components/locale-switcher";

import { Navbar } from "~/components/navbar";
import type { Route } from "./+types/($locale)._index";

export const loader = ({ params }: Route.LoaderArgs) => {
  const { locale } = params;

  const { isValid } = validatePrefix(locale);

  if (!isValid) {
    throw data("Locale not supported", { status: 404 });
  }
};

export const meta: Route.MetaFunction = ({ params }) => {
  const content = getIntlayer("page", params.locale);

  return [
    { title: content.title },
    { content: content.description, name: "description" },
  ];
};

export default function Page() {
  const { title, description, aboutLink } = useIntlayer("page");

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <nav>
        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
      </nav>
    </div>
  );
}
      useIntlayer हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।
      यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए Intlayer कंपाइलर को एक्सट्रैक्ट कमांड के साथ उपयोग कर सकते हैं।

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

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

      app/components/locale-switcher.tsx
      import type { FC } from "react";

import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
  defaultLocale,
} from "intlayer";
import { useIntlayer, useLocale } from "react-intlayer";
import { Link, useLocation } from "react-router";

export const LocaleSwitcher: FC = () => {
  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
  const { pathname } = useLocation();

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

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <Link
            aria-current={localeItem === locale ? "page" : undefined}
            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
            onClick={() => setLocale(localeItem)}
            reloadDocument // Reload the page to apply the new locale
            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
          >
            <span>
              {/* लोकल - उदाहरण के लिए FR */}
              {localeItem}
            </span>
            <span>
              {/* अपनी लोकल में भाषा - उदाहरण के लिए Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* वर्तमान लोकल में भाषा - उदाहरण के लिए Francés जब वर्तमान लोकल Locales.SPANISH सेट हो */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={defaultLocale}>
              {/* अंग्रेज़ी में भाषा - उदाहरण के लिए French */}
              {getLocaleName(localeItem, defaultLocale)}
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
};
      app/components/locale-switcher.tsx
      import type { FC } from "react";

import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
  defaultLocale,
} from "intlayer";
import { useIntlayer, useLocale } from "react-intlayer";
import { Link, useLocation } from "react-router";

export const LocaleSwitcher: FC = () => {
  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
  const { pathname } = useLocation();

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

  const pathWithoutLocale = getPathWithoutLocale(pathname);

  return (
    <ol>
      {availableLocales.map((localeItem) => (
        <li key={localeItem}>
          <Link
            aria-current={localeItem === locale ? "page" : undefined}
            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
            onClick={() => setLocale(localeItem)}
            reloadDocument // Reload the page to apply the new locale
            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
          >
            <span>
              {/* Locale - e.g. FR */}
              {localeItem}
            </span>
            <span>
              {/* Language in its own Locale - e.g. Français */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
              {getLocaleName(localeItem)}
            </span>
            <span dir="ltr" lang={defaultLocale}>
              {/* Language in English - e.g. French */}
              {getLocaleName(localeItem, defaultLocale)}
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
};
      useLocale हुक के बारे में अधिक जानने के लिए, कृपया दस्तावेज़ देखें।

    10. HTML एट्रिब्यूट्स प्रबंधन जोड़ें

      HTML lang और dir एट्रिब्यूट्स को प्रबंधित करने के लिए एक हुक बनाएं:

      app/hooks/useI18nHTMLAttributes.tsx
      import { getHTMLTextDir } from "intlayer";
import { useEffect } from "react";
import { useLocale } from "react-intlayer";

export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      फिर इसे अपने रूट कॉम्पोनेंट में उपयोग करें:

      app/routes/layout.tsx
      import { Outlet } from "react-router";
import { IntlayerProvider } from "react-intlayer";

import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // हुक को इम्पोर्ट करें

export default function RootLayout() {
  useI18nHTMLAttributes(); // हुक को कॉल करें

  return (
    <IntlayerProvider>
      <Outlet />
    </IntlayerProvider>
  );
}

    11. Middleware जोड़ें

      आप अपने एप्लिकेशन में server-side routing जोड़ने के लिए intlayerProxy का उपयोग भी कर सकते हैं। यह plugin URL के आधार पर current locale को automatically detect करेगा और appropriate locale cookie सेट करेगा। यदि कोई locale निर्दिष्ट नहीं है, तो plugin उपयोगकर्ता की browser language preferences के आधार पर सबसे उपयुक्त locale निर्धारित करेगा। यदि कोई locale detect नहीं होता है, तो यह default locale पर redirect कर देगा।

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

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

      वैकल्पिक

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

      इस प्रक्रिया को आसान बनाने के लिए, 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
      v9 के बाद से, intlayerCompiler को intlayer plugin में शामिल किया गया है। इसलिए आपको इसे manually जोड़ने की आवश्यकता नहीं है।

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

      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});
      bash
      npm run build # या npm run dev

    Configure TypeScript

    Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.

    Ensure your TypeScript configuration includes the autogenerated types:

    tsconfig.json
    {
  // ... your existing configurations
  include: [
    // ... your existing includes
    ".intlayer/**/*.ts", // Include the auto-generated types
  ],
}

    Git Configuration

    It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.

    To do this, you can add the following instructions to your .gitignore file:

    .gitignore
    # Ignore the files generated by Intlayer
.intlayer

    VS Code Extension

    To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.

    Install from the VS Code Marketplace

    This extension provides:

    • Autocompletion for translation keys.
    • Real-time error detection for missing translations.
    • Inline previews of translated content.
    • Quick actions to easily create and update translations.

    For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.

    Go Further

    To go further, you can implement the visual editor or externalize your content using the CMS.

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

    यह व्यापक मार्गदर्शिका आपको Intlayer को React Router v7 के साथ पूरी तरह से अंतरराष्ट्रीयकृत एप्लिकेशन के लिए एकीकृत करने के लिए आवश्यक सभी जानकारी प्रदान करती है, जिसमें स्थानीय-जानकारी वाले रूटिंग और TypeScript समर्थन शामिल हैं।

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

    React Router v7 कोई संदेश परत प्रदान नहीं करता है, इसलिए आप इसे i18n लाइब्रेरी के साथ जोड़ते हैं:

    • react-i18next: सामान्य लाइब्रेरी जो रनटाइम पर JSON नेमस्पेस लोड करती है।
    • react-intl: ICU प्रारूप पर आधारित समाधान।
    • Intlayer: घटक के बगल में सामग्री घोषणा, बिल्ड समय पर संकलन, SSR और लोडर्स समर्थन, पूर्ण TypeScript प्रकार, AI अनुवाद और विज़ुअल एडिटर।

    Intlayer क्यों चुनें और बेंचमार्क देखें।

    पारंपरिक नेमस्पेस प्रणालियों की तुलना में बहुत कम। कंपाइलर अप्रयुक्त कुंजियों को छोड़ देता है और गतिशील शब्दकोश भाषाओं को विभाजित करते हैं, जिससे बंडल 50% तक कम हो जाता है। बंडल अनुकूलन देखें।

    हाँ। react-i18next माइग्रेशन गाइड का पालन करें या मौजूदा API को बनाए रखने के लिए संगतता एडेप्टर का उपयोग करें।

    हाँ। sync JSON plugin आपकी /messages/{locale}/{namespace}.json फ़ाइलों को सत्य का स्रोत बनाए रखता है और दोनों दिशाओं में उनसे Intlayer dictionaries बनाता है। sync PO plugin gettext catalogs के लिए भी ऐसा ही करता है, और per locale files आपको locales को एक फ़ाइल में समूहीकृत करने के बजाय भाषा के अनुसार content को विभाजित करने देते हैं।

    नहीं। npx intlayer extract चलाएं और Intlayer आपके घटकों को पढ़ता है, उपयोगकर्ता के अनुकूल स्ट्रिंग्स निकालता है, और प्रत्येक के बगल में एक .content फ़ाइल लिखता है, जिससे आप कैटलॉग में मैन्युअल रूप से कॉपी करने के बजाय एक diff की समीक्षा करते हैं। इस गाइड का चरण 12 इसे समझाता है।

    पूर्ण स्वचालन के लिए, Intlayer Compiler बिल्ड समय पर यही काम करता है: यह प्रत्येक परिवर्तन पर आपके JSX, TSX, Vue और Svelte स्रोत को स्कैन करता है, शब्दकोश उत्पन्न करता है और हॉट मॉड्यूल प्रतिस्थापन (HMR) के माध्यम से उन्हें सिंक में रखता है, ताकि हाथ से बनाए रखने के लिए कोई कुंजी न हो।

    कंपाइलर को चालू करने से पहले दो सीमाएं जानने योग्य हैं। यह स्थिर विश्लेषण द्वारा काम करता है, इसलिए जो स्ट्रिंग्स केवल रनटाइम पर मौजूद होती हैं, जैसे कि API त्रुटि कोड या CMS फ़ील्ड, वे पहुंच से बाहर रहती हैं। और इसे className="active" या स्थिति कोड जैसे एप्लिकेशन लॉजिक से उपयोगकर्ता के सामने आने वाले टेक्स्ट को अलग करना होगा, जिसके लिए एक बड़े कोडबेस में कुछ एनोटेशन की आवश्यकता होती है। extract command आपको लूप में रखकर दोनों से बचाता है।

    पाँच उपकरण, सभी वैकल्पिक:

    • VS Code extension: useIntlayer कुंजी से उसे घोषित करने वाली सामग्री फ़ाइल पर जाएं, घटकों से सामग्री निकालें, और कमांड पैलेट या Intlayer टैब से build, fill, test, push और pull चलाएं।
    • LSP server: LSP का समर्थन करने वाले किसी भी संपादक में समान सुविधा, परिभाषा पर जाएं, अनुवादित मान का पूर्वावलोकन देखें, और कुंजी पूर्णता प्राप्त करें। i18next, react-i18next, next-intl और use-intl कॉल का भी समर्थन करता है।
    • MCP server: Cursor, VS Code, Claude Desktop, Claude Code और ChatGPT के लिए Intlayer दस्तावेज़ और CLI प्रदान करता है।
    • Agent skills: केंद्रित कौशल जैसे intlayer-config, intlayer-cli और intlayer-content।
    • ESLint plugin: no-raw-text नियम हार्डकोडेड स्ट्रिंग्स को चिह्नित करता है।
    Vite और ReactVite और Vue