@ weglot /अनुवाद-प्रतिक्रिया

अपने अनुवाद करें
प्रतिक्रिया, Next.js या विटे अनुप्रयोग

कोई t() रैपर नहीं, कोई JSON फ़ाइलें नहीं। एक बिल्ड प्लगइन और एक जोड़ें। Weglot API कुंजी: आपके JSX में मौजूद टेक्स्ट का अनुवाद आपके ऐप के बिल्ड होने पर किया जाता है, और आपकी टीम अनुवादों को संपादित करती है। Weglot कोड को छुए बिना।

अपनी एपीआई कुंजी प्राप्त करें

प्रॉम्प्ट को कॉपी करें · · · दस्तावेज़ पढ़ें · एनपीएम पर देखें

इसके लिए React 19, Next.js 15 / 16.0.4+ (ऐप राउटर) या Vite Node 20.9+ की आवश्यकता है ।

// how it works

चार चरण। आपके घटक यथावत रहेंगे।

स्रोत और लक्ष्य भाषाएँ आपके स्रोत से आती हैं। Weglot यह प्लगइन आपके कोड से नहीं, बल्कि प्रोजेक्ट से संबंधित है। यह प्लगइन बिल्ड टाइम पर आपके JSX में मौजूद टेक्स्ट को पढ़ता है और उसका अनुवाद प्राप्त करता है।

  1. पैकेज इंस्टॉल करें और अपनी एपीआई कुंजी जोड़ें

    एक बनाने के Weglot 2.0 प्रोजेक्ट खोलें, फिर प्रोजेक्ट सेटिंग्स से इसकी API कुंजी कॉपी करें। यह इससे शुरू होता है। pk_। रखना .env वर्जन कंट्रोल से बाहर।

    टर्मिनल · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. प्लगइन जोड़ें

    अपनी Next.js कॉन्फ़िगरेशन को इससे रैप करें withWeglot। बिंदु sourceRoot उस फ़ोल्डर में जहाँ आपके पेज और कंपोनेंट मौजूद हैं।

    next.config.ts
    import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

  3. प्रदाता जोड़ें

    अपने रूट लेआउट को इससे लपेटें WeglotProvider Next.js एंट्री पॉइंट से, ताकि भाषा बदलने पर आपके सर्वर कंपोनेंट्स रीफ्रेश हो जाएं।

    app/layout.tsx
    import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

  4. अपने प्रोजेक्ट की हर भाषा में निर्माण करें और उसे प्रकाशित करें।

    प्रत्येक बिल्ड अनुपलब्ध अनुवादों को प्राप्त करता है Weglot और लिखता है public/translations/<locale>.jsonउस फ़ोल्डर को अनदेखा करें। एक भाषा स्विचर जोड़ें। LocaleSwitcher या useWeglotContext.

    .gitignore
    public/translations/

// compare

क्लासिक i18n लाइब्रेरी क्यों नहीं?

i18n लाइब्रेरी आपसे प्रत्येक स्ट्रिंग को एक कुंजी से बदलने और प्रति भाषा एक फ़ाइल रखने के लिए कहती है। Weglot यह आपके द्वारा पहले से लिखी गई स्ट्रिंग्स को पढ़ता है। विकल्पों की तुलना इस प्रकार है।

प्रत्येक परियोजना के सार्वजनिक दस्तावेज़ के आधार पर ( Weglot (नेक्स्ट-इंटल, पैराग्लाइड जेएस, कंटेंटफुल, सैनिटी, स्ट्रैपी), नवंबर 2026।
मानदंड Weglot
@weglot/translate-react		 नेक्स्ट-इंटल / i18नेक्स्ट पैराग्लाइड जेएस सीएमएस मूल स्थानीयकरण
स्ट्रिंग को t() या संदेश फ़ंक्शन में लपेटें बिल्ड टाइम पर JSX में कोई टेक्स्ट डिटेक्ट नहीं हुआ है। हाँt("key") प्रत्येक स्ट्रिंग के लिए। हाँm.key() संदेश फ़ंक्शन। आपके कोड में मौजूद कंटेंट-ओनली स्ट्रिंग्स के लिए भी लाइब्रेरी की आवश्यकता होती है।
प्रत्येक भाषा के लिए अनुवाद फ़ाइलें रखरखाव के लिए कुछ भी नहीं। बिल्ड के समय उत्पन्न, गिट द्वारा अनदेखा। हां, आमतौर पर प्रत्येक स्थान के लिए एक JSON फ़ाइल होती है। हां, प्रति स्थान एक संदेश फ़ाइल। CMS में संग्रहीत नहीं है ।
बहुभाषी रूटिंग और एसईओ (प्रत्येक भाषा के लिए यूआरएल, hreflang) अभी तक नहीं। भाषा कुकी में संग्रहीत है। सभी भाषाओं के लिए समान यूआरएल, स्रोत भाषा अनुक्रमित। next-intl: हाँ , लोकेल रूटिंग अंतर्निहित है। i18next: आपके फ्रेमवर्क सेटअप के माध्यम से। जी हां, स्थानीयकृत यूआरएल अंतर्निहित हैं: लोकेल उपसर्ग, अनुवादित पथ या डोमेन। आप स्वयं hreflang टैग जोड़ सकते हैं। फ्रंट एंड: एक हेडलेस सीएमएस सामग्री को स्थानीय भाषा के अनुसार संग्रहीत करता है। यूआरएल और एचआरईएफएलएनजी आपके फ्रंट एंड से आते हैं।
आपके लिए अनुवाद तैयार किए गए हैं हां Weglot निर्माण के दौरान एलएलएम का उपयोग करके अनुवाद करता है। नहीं, अपने स्वयं के अनुवाद या टीएमएस लाएँ। आप इनलैंग सीएलआई मशीन ट्रांसलेशन टूलिंग या अपने कोडिंग एजेंट का उपयोग कर सकते हैं। सशुल्क योजनाओं पर सशुल्क ऐड-ऑन एआई अनुवाद: कंटेंटफुल एआई एक्शन, सैनिटी एआई असिस्ट, स्ट्रैपी एआई ट्रांसलेशन।
डेवलपर की सहायता के बिना अनुवाद संपादित करें हां, Weglot डैशबोर्ड में समीक्षा और संपादन करें। JSON फ़ाइलों को संपादित न करें, या अलग से TMS न जोड़ें। Fink inlang के वेब एडिटर का उपयोग करके, GitHub खाते के साथ। हां, सीएमएस संपादक में।
एक प्रॉम्प्ट में कोडिंग एजेंट द्वारा स्थापित किया गया जी हां, एक बार इंस्टॉल करें, दो बार कॉन्फ़िगरेशन में बदलाव करें। नीचे कॉपी करने योग्य प्रॉम्प्ट दिया गया है । लंबा कार्य: एजेंट प्रत्येक स्ट्रिंग को कुंजियों और फाइलों में पुनः लिखता है। लंबा कार्यinit एजेंटों के लिए संकेत दिए बिना चलता है, फिर प्रत्येक स्ट्रिंग एक बन जाती है m.key() संदेश। CMS में कॉन्फ़िगर किया गया ( लागू नहीं) ।

// built for coding agents

एआई कोडिंग एजेंटों के लिए निर्मित

यदि आप क्लाउड कोड, कर्सर या कोडक्स के साथ बिल्ड करते हैं, तो आपका एजेंट जोड़ सकता है Weglot अपने आप में। इसमें दोबारा लिखने की कोई जरूरत नहीं है, इसलिए बदलाव छोटा है और समीक्षा करना आसान है।

01 · सेटअप

एजेंट इसे इंस्टॉल और कॉन्फ़िगर करता है।

एक npm installएक प्लगइन, एक प्रदाता, एक पंक्ति में .gitignoreएजेंट आपसे केवल एपीआई कुंजी मांगता है।

02 · दस्तावेज़

एलएलएम के छात्र भी इन दस्तावेज़ों को पढ़ सकते हैं।

दस्तावेज़ में एक है llms.txt इंडेक्स, और हर पेज का एक मार्कडाउन संस्करण है: जोड़ें .md इसके यूआरएल पर।

03 · प्रॉम्प्ट

कॉपी करने के लिए तैयार एक प्रॉम्प्ट

निर्देश के प्रत्येक चरण में वास्तविक आयात पथों के साथ आरंभिक मार्गदर्शिका का मिलान किया गया है। इसे नीचे कॉपी करें ।

क्लाउड कोड में पेस्ट करें

      

      
      
      
    

  

  







  

    
// for your team

    
कोड को छुए बिना संपादन और समीक्षा करें

    
हर अनुवाद आपके में दिखाई देता है Weglot प्रोजेक्ट। उत्पाद, विपणन और अनुवादक पुल रिक्वेस्ट खोले बिना ही वहां शब्दों की समीक्षा और संपादन करते हैं।

    
    
      
  • अनुवादों की समीक्षा करें Weglot आपके ऐप के लिए जनरेट करता है।
    • 
      
  • किसी भी अनुवाद को संपादित करें Weglot डैशबोर्ड।
    • 
      
  • बाहर रखें कोड से लेकर किसी भी चीज़ तक translate="no" या data-weglot-skip.
    • 
    

  







  

    
// fit

    
कब उपयोग करें Weglot और कब नहीं करना चाहिए

    
यह पैकेज अभी पूर्वावलोकन चरण में है। आज यह इस प्रकार है।

    

      

        
उपयोग @ weglot /translate-react if

        
    
          
  • आपका ऐप Next.js (ऐप राउटर) या Vite पर React 19 चलाता है।
    • 
          
  • आप स्ट्रिंग्स को t() में रैप नहीं करना चाहते या प्रत्येक भाषा के लिए एक अलग फ़ाइल बनाए रखना नहीं चाहते।
    • 
          
  • आपका कोडिंग एजेंट अधिकांश कोड लिखता है, और आप चाहते हैं कि अनुवाद भी इसके साथ तालमेल बनाए रखे।
    • 
          
  • जिन लोगों को कोडिंग का ज्ञान नहीं है, उन्हें अनुवादों की समीक्षा और संपादन करने की आवश्यकता है।
    • 
          
  • आपके यूआई का टेक्स्ट कोड में रहता है, जबकि सीएमएस की सामग्री को आप सर्वर-साइड पर अनुवादित कर सकते हैं।
    • 
        

      

      

        
यदि आवश्यक हो तो किसी और चीज़ का उपयोग करें

        
    
          
  • आज के समय में आपको प्रत्येक भाषा के लिए एक URL और खोज इंजनों द्वारा अनुक्रमित अनुवादित पृष्ठों की आवश्यकता होती है। इसके लिए next-intl या Paraglide JS का उपयोग करें।
    • 
          
  • आप अनुवादों को अपने रिपॉजिटरी में फ़ाइलों के रूप में रखना चाहते हैं, जिनकी समीक्षा पुल रिक्वेस्ट के माध्यम से की जाएगी। Paraglide JS या i18next के साथ inlang का उपयोग करें।
    • 
          
  • आपका ऐप React 18, Next.js Pages Router, या Next.js 14 या उससे पुराने संस्करण पर चल रहा है।
    • 
          
  • आपकी साइट CMS या वेबसाइट बिल्डर में बनी है, React में नहीं। कृपया इसका उपयोग करें। Weglot 's CMS एकीकरण।
    • 
        

      

    

  







  

    
सामान्य प्रश्न

    

      

        
क्या यह एसईओ को संभालता है: प्रति भाषा एक यूआरएल और एचआरईएफएलएनजी?

        

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

          
आप पेज के शीर्षक और विवरण का अनुवाद कर सकते हैं tDynamicAll में generateMetadataयदि आपको अभी प्रत्येक भाषा के लिए अनुक्रमित यूआरएल की आवश्यकता है, तो लोकेल रूटिंग वाली लाइब्रेरी का उपयोग करें, जैसे कि next-intl या Paraglide JS।

        

      

      

        
मैं CMS, API या उपयोगकर्ताओं से गतिशील सामग्री का अनुवाद कैसे करूँ?

        

          
यह प्लगइन केवल आपके कोड में लिखे टेक्स्ट का अनुवाद करता है। उस सामग्री के लिए जिसे आपका कोड कभी नहीं देखता, अलग से कॉल करें। tDynamic, tDynamicAll या tDynamicHtml से @weglot/translate-react/dynamic Next.js सर्वर घटकों में।

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

        

      

      

        
Next.js या Vite: क्या बदलाव होते हैं?

        

          
Next.js का उपयोग करता है withWeglot से @weglot/translate-react/next और WeglotProvider से @weglot/translate-react/react/nextवाइट का उपयोग करता है weglotPlugin से @weglot/translate-react/vite और WeglotProvider से @weglot/translate-react/reactवेबपैक उपयोग करता है weglotPlugin से @weglot/translate-react/webpack.

          
डायनामिक कंटेंट फ़ंक्शन केवल Next.js सर्वर कंपोनेंट्स में ही चलते हैं।

        

      

      

        
क्या यह रिएक्ट सर्वर कंपोनेंट्स के साथ काम करता है?

        
हां, Next.js ऐप राउटर के साथ। आयात करें WeglotProvider से @weglot/translate-react/react/next ताकि भाषा बदलने से आपके सर्वर घटक रीफ्रेश हो जाएं। tDynamic, tDynamicAll और tDynamicHtml सर्वर घटकों में, सर्वर-साइड पर चलाएँ।

      

      

        
जब मैं निर्माण करता हूँ तो क्या होता है?

        

          
यह प्लगइन JSX फ़ाइल में मौजूद टेक्स्ट को ढूंढता है। sourceRoot और पूछता है Weglot इसमें अनुवाद के लिए एपीआई की कमी है। Weglot यह उन्हें एलएलएम के साथ उत्पन्न करता है, और बिल्ड तब तक प्रतीक्षा करता है जब तक कि... translationTimeout (डिफ़ॉल्ट रूप से 300 सेकंड)। फिर यह लिखता है public/translations/<locale>.json.

          
यदि अनुवाद विफल हो जाता है, तो बिल्ड विफल हो जाता है और जो कुछ भी प्राप्त हुआ है उसे स्थानीय कैश में रखता है: जारी रखने के लिए फिर से बिल्ड करें। buildMode: "cache-only"इस बिल्ड में कोई नेटवर्क कॉल नहीं की जाती है।

        

      

      

        
अनुवाद कहाँ संग्रहित किए जाते हैं?

        
आपके Weglot प्रोजेक्ट, जहां आप उनकी समीक्षा और संपादन करते हैं। प्रत्येक बिल्ड में प्राप्त अनुवाद भी सुरक्षित रहते हैं। <sourceRoot>/weglot/cache/<locale>.jsonउस फोल्डर को API को कॉल किए बिना बिल्ड में कमिट करें, या उसे अनदेखा करें। public/translations/ उत्पन्न होता है और अंदर जाता है .gitignore.

      

      

        
क्या-क्या अनुवादित होता है, और मैं किसी चीज को कैसे बाहर कर सकता हूँ?

        
JSX में टेक्स्ट, JSX एक्सप्रेशन के अंदर स्ट्रिंग लिटरल, कॉन्स्टेंट से पढ़ी गई स्ट्रिंग और एट्रिब्यूट जैसे title, alt, placeholder और aria-labelJSX के बाहर के कोड, URL, क्लास नाम और स्ट्रिंग्स को अपरिवर्तित रखा जाता है। जोड़ें translate="no" या data-weglot-skip किसी तत्व को मूल भाषा में रखने के लिए। अपने स्वयं के टेक्स्ट प्रॉप्स घोषित करें। translatableAttributes.

      

    

  







  

    
बिना कोड बदले अपने React ऐप को बहुभाषी बनाएं

    
पैकेज इंस्टॉल करें, अपनी एपीआई कुंजी डालें और बिल्ड करें।

    

      
टर्मिनल

      
$ npm install @weglot/translate-react

    

    

      
      अपनी एपीआई कुंजी प्राप्त करें
    

    
क्या आप इसे स्वयं करना पसंद करते हैं? दस्तावेज़ पढ़ें या npm पर पैकेज देखें।