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

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

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

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

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

// what your users see

आपने जो JSX कोड लिखा है, वह हर भाषा में उपलब्ध है।

पाठ को एक बार लिखें। Weglot यह बिल्ड टाइम पर इसका अनुवाद करता है।

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

एक ही बटन, पाँच भाषाएँ। चौड़ाई का माप लाइव किया जाता है।

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

कोई कुंजी नहीं, कोई t() नहीं। बस JSX में टेक्स्ट लिखें, इतना ही।

t() को जोड़ने के लिए 0 बार कॉल किया गया
0 अनुवाद फ़ाइलों का रखरखाव करना है
1 एनपीएम इंस्टॉल
2 कोड संपादन: प्लगइन और प्रदाता

// 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/

// under the hood

जब आप निर्माण करते हैं तो क्या होता है?

  1. 01 आपकी JSX फ़ाइल पढ़ता है
  2. 02 नया टेक्स्ट भेजता है
  3. 03 Weglot तब्दील हो
  4. 04 प्रत्येक भाषा के लिए एक फ़ाइल लिखता है

// every language of your project

एक ही बिल्ड, हर भाषा जिसे आप जोड़ते हैं

भाषाएँ चुनें Weglot अगले बैच में इन्हें शामिल किया जाएगा।

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Weglot में एक भाषा जोड़ें, फिर बिल्ड करें। अनुवाद फ़ाइलें आपके ऐप के साथ ही डिप्लॉय हो जाएंगी।

// built for coding agents

आपका एजेंट इसे सेट अप करता है

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

कोई भी कोडिंग एजेंट। आप जिस एजेंट का पहले से उपयोग कर रहे हैं, उसमें एक प्रॉम्प्ट पेस्ट करें।

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

दस्तावेज़ एजेंट पढ़ सकते हैं। प्रत्येक पृष्ठ के लिए एक llms.txt इंडेक्स और मार्कडाउन फ़ाइल उपलब्ध है।

✓पैकेज इंस्टॉल करता हैpackage.json
✓प्लगइन जोड़ता हैnext.config.ts
✓प्रदाता को जोड़ता हैlayout.tsx
✓जनरेट की गई फ़ाइलों को अनदेखा करता है.gitignore
?यह आपकी एपीआई कुंजी मांगता है.env

आप इस अंतर की समीक्षा कर सकते हैं। कोई स्ट्रिंग दोबारा नहीं लिखी गई है।

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

      

      
      
      
    

  

        

        
प्रॉम्प्ट को कॉपी करें। आरंभ करने के लिए दिए गए गाइड के समान चरणों का पालन करें।

      

    

  










  

    
// what gets translated

    
यह प्लगइन टेक्स्ट और कोड में अंतर पहचानता है।

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
पाठ का अनुवाद हो चुका है। JSX टेक्स्ट, लिटरल, कॉन्स्टेंट, ऑल्ट, टाइटल, प्लेसहोल्डर, एरिया-लेबल।

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
कोड को वैसे ही छोड़ दिया जाता है। क्लास के नाम, यूआरएल, लॉजिक।

      
translate="no"
यह आपका निर्णय है। किसी भी तत्व को यथावत रखें, या data- weglot -skip का उपयोग करें।

    

  











  

    
// for your team

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

    

      

      

        
my-next-app › जर्मन 2 की समीक्षा करें

        
स्रोत: जर्मन स्थिति

        
Save changesÄnderungen speichernसमीक्षित

        
Start your free trialKostenlos testenसंपादन

        
Cancel anytime.Jederzeit kündbar.समीक्षा करने के लिए

        
Choose your planWählen Sie Ihren Tarifसमीक्षा करने के लिए

      

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

      
Edit saved · Kostenlos testen
No code change
किसी शब्द को ठीक करने के लिए कोई पुल रिक्वेस्ट नहीं है।

      
समीक्षाधीन विषयों पर नज़र रखें। प्रत्येक भाषा के लिए प्रगति देखें।

    

  









  

    
// fit

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

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

    

      
Next.js ऐप राउटर
का समर्थन किया
Next.js 15 या 16.0.4+, React 19.

      
विटे
का समर्थन किया
React 19, Node 20.9 और उससे ऊपर के संस्करण के साथ काम करता है। Webpack भी काम करता है।

      
रिएक्ट सर्वर घटक
का समर्थन किया
भाषा बदलने से आपके सर्वर घटक रीफ़्रेश हो जाते हैं।

      
सीएमएस और एपीआई सामग्री
का समर्थन किया
साथ tDynamic Next.js सर्वर घटकों में।

      
गैर-डेवलपर्स द्वारा संपादन
का समर्थन किया
समीक्षा करें और संपादित करें Weglot डैशबोर्ड।

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

      
अनुवादों को रेपो फ़ाइलों के रूप में प्रस्तुत किया गया है।
अनुवाद क्रिया
Weglot यह GitHub Actions में आपकी JSON लोकेल फ़ाइलों का अनुवाद करता है और एक पुल रिक्वेस्ट खोलता है। दस्तावेज़ देखें →

      
रिएक्ट 18, पेज राउटर
समर्थित नहीं
साथ ही Next.js 14 या उससे पुराना संस्करण।

      
सीएमएस या वेबसाइट बिल्डर
यह पैकेज नहीं
आपकी साइट React में नहीं बनी है: कृपया इसका उपयोग करें Weglot 's CMS एकीकरण।

    

  











  

    
// compare

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

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


    
  










  

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

    

      

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

        

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

          
आप पेज के शीर्षक और विवरण का अनुवाद कर सकते हैं 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 पर पैकेज देखें।