Author:
    Aymeric PINEAU
    Creation:2024-08-11Last update:2026-05-31

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

    ide.intlayer.org

    एप्लेट टेम्पलेट को जाँचें.

    इंटलेयर क्या है?

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

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

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

    अपने एप्लिकेशन की content को scope करना बड़े पैमाने पर एप्लिकेशन के लिए रखरखाव को सुविधाजनक बनाता है। आप अपने पूरे content codebase की समीक्षा करने के मानसिक भार के बिना एक एकल feature folder को duplicate या delete कर सकते हैं। इसके अलावा, Intlayer पूरी तरह से typed है ताकि आपकी content की सटीकता सुनिश्चित की जा सके।

    कंटेंट को एक साथ रखने से Large Language Models (LLMs) को आवश्यक context कम हो जाता है। Intlayer के साथ एक suite of tools भी आता है, जैसे CLI missing translations को test करने के लिए, LSP, MCP, और agent skills, ताकि AI agents के लिए developer experience (DX) को और भी smooth बनाया जा सके।

    अपनी CI/CD पाइपलाइन में अपनी पसंद के LLM का उपयोग करके अपने AI प्रदाता की लागत पर अनुवाद को स्वचालित करें। Intlayer एक compiler भी प्रदान करता है जो सामग्री निष्कर्षण को स्वचालित करता है, साथ ही एक web platform जो पृष्ठभूमि में अनुवाद करने में सहायता करता है।

    इंटलेयर के साथ, आप कर सकते हैं:

    बड़ी JSON फ़ाइलों को components से जोड़ने से performance और reactivity की समस्याएं हो सकती हैं। Intlayer आपकी content loading को build time पर optimize करता है।

    </Accordion>

    • आसानी से अनुवाद प्रबंधित करें घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
    • मेटाडेटा, रूट्स और सामग्री को गतिशील रूप से स्थानीयकृत करें।
    • टाइपस्क्रिप्ट समर्थन सुनिश्चित करें स्वचालित रूप से उत्पन्न प्रकारों के साथ, जो ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करता है।
    • उन्नत सुविधाओं का लाभ उठाएं, जैसे गतिशील लोकेल पहचान और स्विचिंग।

    रिएक्ट एप्लिकेशन में इंटलेयर सेट अप करने के लिए चरण-दर-चरण गाइड

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

      npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

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

      • intlayer

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

      • react-intlayer

        पैकेज जो इंटलेयर को रिएक्ट एप्लिकेशन के साथ एकीकृत करता है। यह रिएक्ट अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है।

      • react-scripts-intlayer

        react-scripts-intlayer कमांड्स और प्लगइन्स को इंटलेयर के साथ क्रिएट रिएक्ट ऐप आधारित एप्लिकेशन में एकीकृत करता है। ये प्लगइन्स क्राको पर आधारित हैं और वेबपैक बंडलर के लिए अतिरिक्त कॉन्फ़िगरेशन शामिल करते हैं।

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

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

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // आपकी अन्य भाषाएँ
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

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

    3. अपने CRA कॉन्फ़िगरेशन में इंटलेयर को एकीकृत करें

      अपने स्क्रिप्ट्स को react-intlayer का उपयोग करने के लिए बदलें

      package.json
        "scripts": {
    "build": "react-scripts-intlayer build",
    "start": "react-scripts-intlayer start",
    "transpile": "intlayer build"
  },
      react-scripts-intlayer स्क्रिप्ट्स CRACO पर आधारित हैं। आप इंटलेयर क्राको प्लगइन पर आधारित अपना सेटअप भी लागू कर सकते हैं। यहाँ उदाहरण देखें।

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

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

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";
import React, { type ReactNode } from "react";

const appContent = {
  key: "app",
  content: {
    getStarted: t<ReactNode>({
      hi: (
        <>
          <code>src/App.tsx</code> संपादित करें और पुनः लोड करने के लिए सहेजें
        </>
      ),
      en: (
        <>
          Edit <code>src/App.tsx</code> and save to reload
        </>
      ),
      fr: (
        <>
          Éditez <code>src/App.tsx</code> et enregistrez pour recharger
        </>
      ),
      es: (
        <>
          Edita <code>src/App.tsx</code> y guarda para recargar
        </>
      ),
    }),
    reactLink: {
      href: "https://reactjs.org",
      content: t({
        hi: "रिएक्ट सीखें",
        en: "Learn React",
        fr: "Apprendre React",
        es: "Aprender React",
      }),
    },
  },
} satisfies Dictionary;

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

    5. अपने कोड में इंटलेयर का उपयोग करें

      अपने एप्लिकेशन में अपनी सामग्री शब्दकोशों का उपयोग करें:

      src/App.tsx
      import logo from "./logo.svg";
import "./App.css";
import type { FC } from "react";
import { IntlayerProvider, useIntlayer } from "react-intlayer";

const AppContent: FC = () => {
  const content = useIntlayer("app");

  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />

      {content.getStarted}
      <a
        className="App-link"
        href={content.reactLink.href.value}
        target="_blank"
        rel="noopener noreferrer"
      >
        {content.reactLink.content}
      </a>
    </div>
  );
};

const App: FC = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;
      नोट: यदि आप अपने कंटेंट को string एट्रिब्यूट जैसे alt, title, href, aria-label, आदि में उपयोग करना चाहते हैं, तो आपको फ़ंक्शन के वैल्यू को कॉल करना होगा, जैसे:
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" />
<img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
<img src="{String(content.image.src)}" alt="{String(content.image)}" />
      useIntlayer हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।

    6. अपनी सामग्री की भाषा बदलें

      वैकल्पिक

      अपनी सामग्री की भाषा बदलने के लिए, आप useLocale हुक द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको एप्लिकेशन की लोकेल सेट करने और सामग्री को अपडेट करने की अनुमति देता है।

      src/components/LocaleSwitcher.tsx
      // आवश्यक मॉड्यूल आयात करें
import { Locales } from "intlayer";
import { useLocale } from "react-intlayer";

const LocaleSwitcher = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.English)}>
      भाषा को अंग्रेज़ी में बदलें
    </button>
  );
};
      useLocale हुक के बारे में अधिक जानने के लिए, डॉक्यूमेंटेशन देखें।

    7. अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें

      वैकल्पिक

      इस चरण का उद्देश्य प्रत्येक भाषा के लिए अद्वितीय रूट बनाना है। यह SEO और SEO-अनुकूल URL के लिए उपयोगी है। उदाहरण:

      plaintext
      - https://example.com/about
- https://example.com/es/about
- https://example.com/fr/about
      डिफ़ॉल्ट रूप से, डिफ़ॉल्ट लोकेल के लिए रूट्स प्रीफिक्स नहीं होते हैं। यदि आप डिफ़ॉल्ट लोकेल को प्रीफिक्स करना चाहते हैं, तो आप अपनी कॉन्फ़िगरेशन में middleware.prefixDefault विकल्प को true पर सेट कर सकते हैं। अधिक जानकारी के लिए कॉन्फ़िगरेशन डॉक्यूमेंटेशन देखें।

      अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ने के लिए, आप एक LocaleRouter कंपोनेंट बना सकते हैं जो आपके एप्लिकेशन के रूट्स को रैप करता है और लोकेल-आधारित रूटिंग को संभालता है। यहां React Router का उपयोग करते हुए एक उदाहरण है:

      फिर, आप अपने एप्लिकेशन में LocaleRouter घटक का उपयोग कर सकते हैं:

      src/App.tsx
      import { LocaleRouter } from "./components/LocaleRouter";
import type { FC } from "react";

// ... आपका AppContent घटक

const App: FC = () => (
  <LocaleRouter>
    <AppContent />
  </LocaleRouter>
);

    8. जब स्थानीय बदलता है तो URL बदलें

      वैकल्पिक

      लोकेल परिवर्तन के समय URL को बदलने के लिए, आप useLocale hook द्वारा प्रदान किए गए onLocaleChange prop का उपयोग कर सकते हैं। समानांतर में, आप react-router-dom से useLocation और useNavigate hooks का उपयोग करके URL पाथ को अपडेट कर सकते हैं।

      src/components/LocaleSwitcher.tsx
      import { useLocation, useNavigate } from "react-router-dom";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "react-intlayer";
import { type FC } from "react";

const LocaleSwitcher: FC = () => {
  const { pathname, search } = useLocation(); // वर्तमान URL पथ प्राप्त करें। उदाहरण: /fr/about?foo=bar
  const navigate = useNavigate();

  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: (locale) => {
      // अपडेटेड स्थानीय भाषा के साथ URL बनाएं
      // उदाहरण: /es/about?foo=bar
      const pathWithLocale = getLocalizedUrl(`${pathname}${search}`, locale);

      // URL पथ को अपडेट करें
      navigate(pathWithLocale);
    },
  });

  return (
    <div>
      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <a
            href={getLocalizedUrl(location.pathname, localeItem)}
            hrefLang={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
            }}
            key={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={Locales.ENGLISH}>
              {/* अंग्रेजी में भाषा - जैसे French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </a>
        ))}
      </div>
    </div>
  );
};

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

    9. HTML भाषा और दिशा विशेषताओं को स्विच करें

      वैकल्पिक

      जब आपका एप्लिकेशन कई भाषाओं का समर्थन करता है, तो <html> टैग की lang और dir विशेषताओं को वर्तमान स्थानीय भाषा के अनुसार अपडेट करना महत्वपूर्ण है। ऐसा करने से सुनिश्चित होता है:

      • सुलभता: स्क्रीन रीडर और सहायक तकनीकें सही lang विशेषता पर निर्भर करती हैं ताकि सामग्री को सही ढंग से उच्चारित और व्याख्या किया जा सके।
      • पाठ रेंडरिंग: dir (दिशा) विशेषता यह सुनिश्चित करती है कि पाठ सही क्रम में प्रस्तुत किया गया है (जैसे, अंग्रेजी के लिए बाएं से दाएं, अरबी या हिब्रू के लिए दाएं से बाएं), जो पठनीयता के लिए आवश्यक है।

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

      हुक को लागू करना

      HTML एट्रिब्यूट्स को प्रबंधित करने के लिए एक कस्टम हुक बनाएं। यह हुक लोकेल परिवर्तनों को सुनता है और एट्रिब्यूट्स को तदनुसार अपडेट करता है:

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

/**
 * वर्तमान लोकेल के आधार पर HTML <html> तत्व के `lang` और `dir` एट्रिब्यूट्स को अपडेट करता है।
 * - `lang`: ब्राउज़रों और सर्च इंजनों को पेज की भाषा की जानकारी देता है।
 * - `dir`: सही पढ़ने के क्रम को सुनिश्चित करता है (जैसे, अंग्रेजी के लिए 'ltr', अरबी के लिए 'rtl')।
 *
 * यह डायनामिक अपडेट सही टेक्स्ट रेंडरिंग, सुलभता और एसईओ के लिए आवश्यक है।
 */
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    // भाषा एट्रिब्यूट को वर्तमान लोकेल में अपडेट करें।
    document.documentElement.lang = locale;

    // वर्तमान लोकेल के आधार पर टेक्स्ट दिशा सेट करें।
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      अपने एप्लिकेशन में हुक का उपयोग करना

      मुख्य घटक में हुक को एकीकृत करें ताकि लोकेल बदलने पर HTML एट्रिब्यूट्स अपडेट हो जाएं:

      src/App.tsx
      import type { FC } from "react";
import { IntlayerProvider, useIntlayer } from "react-intlayer";
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./App.css";

const AppContent: FC = () => {
  // लोकेल के आधार पर <html> टैग के lang और dir एट्रिब्यूट्स को अपडेट करने के लिए हुक लागू करें।
  useI18nHTMLAttributes();

  // ... आपके घटक का बाकी हिस्सा
};

const App: FC = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;

      इन परिवर्तनों को लागू करके, आपका एप्लिकेशन:

      • सुनिश्चित करेगा कि भाषा (lang) एट्रिब्यूट वर्तमान लोकेल को सही ढंग से प्रतिबिंबित करता है, जो एसईओ और ब्राउज़र व्यवहार के लिए महत्वपूर्ण है।
      • टेक्स्ट दिशा (dir) को लोकेल के अनुसार समायोजित करेगा, जिससे विभिन्न पढ़ने के क्रम वाली भाषाओं के लिए पठनीयता और उपयोगिता बढ़ेगी।
      • एक अधिक सुलभ अनुभव प्रदान करेगा, क्योंकि सहायक तकनीकें इन एट्रिब्यूट्स पर निर्भर करती हैं।

    टाइपस्क्रिप्ट कॉन्फ़िगरेशन

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

    Autocompletion

    Translation error

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

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

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

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

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

    .gitignore
    # Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
.intlayer

    VS Code Extension

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

    VS Code Marketplace से Install करें

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

    • Translation keys के लिए Autocompletion।
    • Missing translations के लिए Real-time error detection।
    • Translated content के Inline previews।
    • Translations को आसानी से create और update करने के लिए Quick actions।

    Extension का उपयोग कैसे करें, इसके बारे में अधिक जानकारी के लिए, Intlayer VS Code Extension documentation को देखें।

    आगे बढ़ें

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

    AnalogReact Native और Expo