@weglot/translate-react

ترجم
React, Next.js أو Vite تطبيق

لا توجد أغلفة t()، ولا ملفات JSON. أضف مكونًا إضافيًّا للبناء ومفتاح Weglot مفتاح API: يتم ترجمة النص الموجود في JSX الخاص بك عند بناء التطبيق، ويقوم فريقك بتحرير الترجمات Weglot دون المساس بالكود.

احصل على مفتاح API الخاص بك

انسخ المطالبة الخاصة بـ · · · اقرأ الوثائق · عرض على npm

// what your users see

كود JSX الذي كتبته، في كل لغة

اكتب النص مرة واحدة. Weglot ويتم ترجمته أثناء عملية البناء.

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

نفس الزر، خمس لغات. قياس العرض في الوقت الفعلي.

app/الإعدادات/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

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

لا حاجة لمفاتيح، ولا حاجة لـ t(). اكتب النص بلغة JSX، وهذا كل شيء.

0استدعاءات t() لإضافة
0ملفات الترجمة التي يجب صيانتها
1npm install
2تعديلات على الكود: المكون الإضافي والمزود

// how it works

أربع خطوات. تظل مكوناتك كما هي.

اللغات المصدر والهدف مستمدة من Weglot مشروعك، وليس من الكود الخاص بك. يقوم المكون الإضافي بقراءة النص الموجود في JSX الخاص بك أثناء عملية البناء ويحضر ترجماته.

  1. قم بتثبيت الحزمة وأضف مفتاح API الخاص بك

    قم بإنشاء Weglot مشروع 2.0، ثم انسخ مفتاح واجهة برمجة التطبيقات (API) الخاص به من صفحة المشروع الإعدادات. يبدأ المفتاح بـ pk_. احتفظ بـ .env خارج نطاق التحكم في الإصدارات.

    terminal · .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. 03Weglot ترجمات
  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

الملفات التي يمكن لوكلاء Docs قراءتها. ملف فهرس llms.txt وملف Markdown لكل صفحة.

✓يقوم بتثبيت الحزمةpackage.json
✓يُضيف المكون الإضافيnext.config.ts
✓يضيف المزودlayout.tsx
✓يتجاهل الملفات التي تم إنشاؤها.gitignore
?يطلب منك إدخال مفتاح API الخاص بك.env

تغيير يمكنك مراجعته. لم تتم إعادة كتابة أي سلاسل.

الصق في «Claude Code»

      

      
      
      
    

  

        

        
انسخ المطالبة. اتبع نفس الخطوات الواردة في دليل البدء.

      

    

  










  

    
// 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، القيم الثابتة، الثوابت، alt، title، العنصر النائب، aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
يُترك الكود كما هو. أسماء الفئات، وعناوين URL، والمنطق.

      
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.

      
Vite
مدعومة
React 19، Node 20.9 أو أحدث. كما يعمل Webpack أيضًا.

      
مكونات خادم React
مدعومة
يؤدي تغيير اللغة إلى تحديث مكونات الخادم.

      
محتوى CMS و API
مدعومة
مع tDynamic في مكونات الخادم في Next.js.

      
التحرير من قبل غير المطورين
مدعومة
المراجعة والتحرير في Weglot لوحة التحكم.

      
رابط واحد لكل لغة
ليس بعد
يتم تخزين اللغة حاليًا في ملف كوكي. نحتاج الآن إلى عناوين URL مفهرسة لكل لغة: استخدم next-intl أو Paraglide JS.

      
الترجمات كملفات ريبو
ترجمة الإجراء
Weglot يقوم بترجمة ملفات الإعدادات المحلية بتنسيق JSON في GitHub Actions ويفتح طلب سحب. راجع الوثائق →

      
React 18، موجه الصفحات
غير مدعوم
وكذلك Next.js 14 أو إصدارات أقدم.

      
نظام إدارة المحتوى (CMS) أو أداة إنشاء المواقع الإلكترونية
ليس هذا الطرد
موقعك لم يتم إنشاؤه باستخدام React: استخدم Weglotنظام إدارة المحتوى (CMS) الخاص بـ التكاملات.

    

  











  

    
// compare

    
لماذا لا نستخدم مكتبة i18n كلاسيكية؟

    
تطلب منك مكتبات i18n استبدال كل سلسلة نصية بمفتاح، والاحتفاظ بملف واحد لكل لغة. Weglot تقوم بقراءة السلاسل التي كتبتها بالفعل. وفيما يلي مقارنة بين الخيارات.


    
  










  

    
الأسئلة الشائعة

    

      

        
هل يدعم تحسين محركات البحث (SEO): عنوان URL واحد لكل لغة وسمة hreflang؟

        

          
ليس اليوم. يتم تخزين لغة الزائر في ملف كوكي، ويتم عرض كل لغة على نفس عناوين URL، لذا فإن محركات البحث تقوم بفهرسة اللغة الأصلية فقط.

          
يمكنك ترجمة عناوين الصفحات وأوصافها باستخدام tDynamicAll في generateMetadata. إذا كنت بحاجة الآن إلى عناوين URL مفهرسة حسب اللغة، فاستخدم مكتبة تدعم التوجيه حسب الإعدادات المحلية، مثل 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. تستخدم Vite weglotPlugin من @weglot/translate-react/vite و WeglotProvider من @weglot/translate-react/react. يستخدم Webpack weglotPlugin من @weglot/translate-react/webpack.

          
لا تعمل وظائف المحتوى الديناميكي إلا في مكونات الخادم في Next.js.

        

      

      

        
هل يعمل مع مكونات خادم React؟

        
نعم، باستخدام «Next.js App Router». استيراد WeglotProvider من @weglot/translate-react/react/next بحيث يؤدي تغيير اللغة إلى تحديث مكونات الخادم. tDynamic, tDynamicAll و tDynamicHtml تُشغَّل من جانب الخادم، ضمن مكونات الخادم.

      

      

        
ماذا يحدث عندما أقوم بالبناء؟

        

          
يبحث المكون الإضافي عن النص الموجود في JSX تحت sourceRoot ويطلب من Weglot واجهة برمجة التطبيقات (API) عن الترجمات التي تفتقر إليها. Weglot ويقوم بإنشائها باستخدام نموذج لغة كبير (LLM)، وتنتظر عملية البناء لمدة تصل إلى 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-label. يتم ترك الكود وعناوين URL وأسماء الفئات والسلاسل خارج JSX دون تغيير. أضف translate="no" أو data-weglot-skip للاحتفاظ بعنصر باللغة الأصلية. قم بتعريف خصائص النص الخاصة بك باستخدام translatableAttributes.

      

    

  







  

    
اجعل تطبيق React الخاص بك متوافقًا مع متعدد اللغات دون الحاجة إلى إعادة كتابته

    
قم بتثبيت الحزمة، وأضف مفتاح واجهة برمجة التطبيقات (API) الخاص بك، ثم قم بالبناء.

    

      
المحطة

      
$ npm install @weglot/translate-react

    

    

      
      احصل على مفتاح API الخاص بك
    

    
هل تفضل القيام بذلك بنفسك؟ اقرأ الوثائق أو اطلع على الحزمة على npm