React Academy · पाठ

react-i18next सेट अप करना

भाषा पहचान और नेमस्पेस विभाजन के साथ i18next इंस्टॉल और कॉन्फ़िगर करें।

पाठ 1, कुल 4 में से13 चरण

react-i18next सेट अप करना, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत

इस पाठ में आप React ऐप में बहु-भाषा समर्थन जोड़ने के लिए भाषा पहचान और नेमस्पेस विभाजन के साथ react-i18next को स्थापित और कॉन्फ़िगर करेंगे।

निर्भरताएँ स्थापित करना

i18next और react-i18next स्थापित करें। स्वचालित लोकेल पहचान के लिए वैकल्पिक रूप से i18next-browser-languagedetector और HTTP के माध्यम से अनुवाद लोड करने के लिए i18next-http-backend जोड़ें।
npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

i18n.js बनाना

एक `i18n.js` फ़ाइल बनाएँ जो i18next को आरंभ करे। प्लगइन जोड़ने के लिए `i18n.use(...)` और अपने कॉन्फ़िगरेशन के साथ `.init({...})` कॉल करें।
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

main.jsx में i18n इम्पोर्ट करना

ऐप को रेंडर करने से BEFORE i18n आरंभीकरण फ़ाइल इम्पोर्ट करें। इससे यह सुनिश्चित होता है कि किसी भी घटक द्वारा useTranslation कॉल किए जाने से पहले i18n तैयार हो।
import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

नेमस्पेस

नेमस्पेस अनुवादों को तार्किक समूहों में बाँटते हैं, जैसे 'common', 'auth' और 'dashboard'। प्रत्येक नेमस्पेस एक अलग JSON फ़ाइल होती है, जिसे शुरुआती बंडल का आकार घटाने के लिए आवश्यकता पड़ने पर लोड किया जाता है।
resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

भाषा पहचान

LanguageDetector प्लगइन ब्राउज़र से उपयोगकर्ता की पसंदीदा भाषा पढ़ता है—navigator.language, localStorage या URL क्वेरी स्ट्रिंग से। यह पहली बार लोड होने पर सक्रिय भाषा अपने-आप सेट कर देता है।

पब्लिक फ़ोल्डर से अनुवाद लोड करना

अनुवादों को `public/locales/{lang}/{ns}.json` में JSON फ़ाइलों के रूप में रखें। बैकएंड प्लगइन को रनटाइम पर इन्हें लोड करने के लिए कॉन्फ़िगर करें, ताकि नई भाषा जोड़ने के लिए कोड में बदलाव न करना पड़े।
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (वैकल्पिक)

I18nextProvider आपके ऐप को रैप करके कॉन्टेक्स्ट के माध्यम से i18n इंस्टेंस उपलब्ध कराता है। react-i18next v11+ और initReactI18next प्लगइन के साथ यह वैकल्पिक है—हुक सीधे वैश्विक i18n इंस्टेंस को पढ़ता है।

घटकों में आरंभीकरण जाँचना

i18next अनुवादों को असिंक्रोनस रूप से लोड करता है। अनुवाद कुंजियाँ दिखने से बचने के लिए रेंडर करने से पहले `useTranslation` से प्राप्त `ready` प्रॉपर्टी का उपयोग करें या `i18n.isInitialized` जाँचें।
const { t, ready } = useTranslation();
if (!ready) return null;

DevTools और गुम कुंजी प्रबंधन

विकास के दौरान `saveMissing: true` सेट करके गुम अनुवाद कुंजियों को कंसोल में लॉग करें। इससे आपको बिना अनुवाद वाली स्ट्रिंग्स जल्दी खोजने में सहायता मिलेगी।
i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

त्वरित जाँच

React ऐप को रेंडर करने से पहले i18n आरंभीकरण फ़ाइल इम्पोर्ट करना क्यों आवश्यक है?

पुनरावलोकन

i18next और react-i18next स्थापित करें, प्लगइन्स और init कॉन्फ़िगरेशन के साथ i18n.js बनाएँ, रेंडर करने से पहले उसे इम्पोर्ट करें और अनुवादों को नेमस्पेस में व्यवस्थित करें। रनटाइम पर अनुवाद फ़ाइलें लोड करने के लिए http-backend का उपयोग करें।

आगे

अगला पाठ: **useTranslation हुक का उपयोग** — आप हार्डकोड की गई स्ट्रिंग्स को t() कॉल से बदलेंगे और JSON अनुवाद फ़ाइलों को व्यवस्थित करेंगे।
शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

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

क्या “react-i18next सेट अप करना” पाठ निःशुल्क है?

हाँ—“react-i18next सेट अप करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“react-i18next सेट अप करना” में मैं क्या सीखूँगा?

भाषा पहचान और नेमस्पेस विभाजन के साथ i18next इंस्टॉल और कॉन्फ़िगर करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“react-i18next सेट अप करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. react-i18next सेट अप करना
  2. useTranslation हुक का उपयोग
  3. बहुवचन और इंटरपोलेशन
  4. भाषा स्विचर और अनुवादों की लेज़ी लोडिंग
← React Academy पर वापस जाएँ