@weglot/translate-react

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

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

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

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

يتطلب React 19 Next.js 15 / 16.0.4+ (App Router) أو Vite Node 20.9+

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

// compare

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

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

استنادًا إلى الوثائق العامة لكل مشروع (Weglot، next-intl، Paraglide JS، Contentful، Sanity، Strapi)، نوفمبر 2026.
المعايير Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS التوطين الأصلي لنظام إدارة المحتوى (CMS)
قم بتغليف السلاسل في دالة t() أو دالات الرسائل لاتم الكشف عن النص في JSX أثناء عملية البناء. نعمt("key") لكل سلسلة. نعمm.key() وظائف الرسائل. المحتوى فقطلا تزال السلاسل في الكود الخاص بك تحتاج إلى مكتبة.
ملفات الترجمة لكل لغة لا يوجد ما يجب صيانتهتم إنشاؤها عند البناء، وتم تجاهلها بواسطة git. نعمعادةً ما يكون هناك ملف JSON واحد لكل لغة. نعمملف رسالة واحد لكل لغة. لامخزنة في نظام إدارة المحتوى (CMS).
متعدد اللغات التوجيه وتحسين محركات البحث (عنوان URL لكل لغة، hreflang) ليس بعداللغة مخزنة في ملف تعريف ارتباط. عناوين URL واحدة لجميع اللغات، واللغة المصدر مفهرسة. next-intl: نعمتوجيه الإعدادات المحلية مدمج. i18next: من خلال إعدادات إطار العمل الخاص بك. نعمعناوين URL مترجمة مدمجة: بادئات الإعدادات الإقليمية، والمسارات أو النطاقات المترجمة. أضف علامات hreflang بنفسك. الواجهة الأماميةيقوم نظام إدارة المحتوى (CMS) بدون واجهة بتخزين المحتوى حسب الإعدادات اللغوية. وتأتي عناوين URL وhreflang من الواجهة الأمامية.
الترجمات التي تم إنشاؤها من أجلك نعمWeglot يتم الترجمة باستخدام نموذج اللغة الكبير (LLM) أثناء عملية البناء. لاأحضر ترجماتك الخاصة أو نظام إدارة الترجمة (TMS). باستخدام أدواتالترجمة الآلية عبر واجهة inlang CLI، أو وكيل البرمجة الخاص بك. إضافة مدفوعةالترجمة بالذكاء الاصطناعي في الباقات المدفوعة: Contentful AI Actions، Sanity AI Assist، Strapi AI Translations.
تحرير الترجمات دون الحاجة إلى مطور نعمقم بالمراجعة والتحرير في Weglot لوحة التحكم. لاقم بتحرير ملفات JSON، أو أضف نظام إدارة النقل (TMS) منفصلاً. باستخدام Finkمحرر الويب الخاص بـ inlang، باستخدام حساب GitHub. نعمفي محرر CMS.
تم إنشاؤها بواسطة وكيل برمجة في موجه واحد نعمتثبيت واحد، تعديلان في الإعدادات. يمكنك نسخ الأوامر الواردة أدناه. مهمة طويلةيقوم الوكيل بإعادة كتابة كل سلسلة إلى مفاتيح وملفات. مهمة طويلةinit يعمل دون مطالبة بتحديد الوكلاء، وعندئذٍ تصبح كل سلسلة m.key() رسالة. غير متوفرتم تكوينه في نظام إدارة المحتوى (CMS).

// built for coding agents

مصمم خصيصًا لوكلاء البرمجة المعتمدين على الذكاء الاصطناعي

إذا كنت تستخدم «Claude Code» أو «Cursor» أو «Codex» في عملية البرمجة، فيمكن لوكيلك إضافة Weglot من تلقاء نفسه. لا توجد سلاسل تحتاج إلى إعادة كتابة، لذا فإن التغيير بسيط وسهل المراجعة.

01 · الإعداد

يقوم الوكيل بتثبيته وتهيئته

واحد npm install، مكون إضافي واحد، مزود واحد، سطر واحد في .gitignore. لا يطلب منك الوكيل سوى مفتاح واجهة برمجة التطبيقات (API).

02 · المستندات

المستندات التي يمكن لنماذج اللغة الكبيرة (LLMs) قراءتها

تحتوي الوثائق على llms.txt الفهرس، وتحتوي كل صفحة على نسخة بتنسيق Markdown: أضف .md إلى عنوان URL الخاص به.

03 · المطالبة

نص جاهز للنسخ

تتوافق كل خطوة من خطوات التعليمات مع دليل البدء، مع مسارات الاستيراد الفعلية. انسخها أدناه.

الصق في «Claude Code»

      

      
      
      
    

  

  







  

    
// for your team

    
التحرير والمراجعة دون لمس الكود

    
تظهر كل ترجمة في Weglot مشروعك. ويقوم فريق المنتج والتسويق والمترجمون بمراجعة الصياغة وتحريرها هناك، دون الحاجة إلى فتح طلب سحب.

    
    
      
  • راجع الترجمات Weglot التي يتم إنشاؤها لتطبيقك.
    • 
      
  • يمكنك تعديل أي ترجمة في Weglot لوحة التحكم.
    • 
      
  • استبعاد أي شيء من الكود الذي يحتوي على translate="no" أو data-weglot-skip.
    • 
    

  







  

    
// fit

    
متى تستخدمها Weglot، ومتى لا يستخدم

    
الحزمة في مرحلة العرض المسبق. وإليكم المكان الذي تتواجد فيه حاليًا.

    

      

        
استخدم @weglot/translate-react إذا

        
    
          
  • يعمل تطبيقك باستخدام React 19 على Next.js (App Router) أو Vite.
    • 
          
  • لا تريد تضمين السلاسل في d() أو الاحتفاظ بملف واحد لكل لغة.
    • 
          
  • يقوم وكيل البرمجة الخاص بك بكتابة معظم الكود، وتريد أن تواكب عملية الترجمة وتيرة ذلك.
    • 
          
  • يحتاج الأشخاص الذين لا يجيدون البرمجة إلى مراجعة الترجمات وتحريرها.
    • 
          
  • يوجد نص واجهة المستخدم الخاصة بك في الكود، أما محتوى نظام إدارة المحتوى (CMS) فيمكنك ترجمته من جانب الخادم.
    • 
        

      

      

        
استخدم شيئًا آخر إذا

        
    
          
  • تحتاج إلى عنوان URL واحد لكل لغة، وإلى أن يتم فهرسة الصفحات المترجمة من قِبل محركات البحث في الوقت الحالي. استخدم next-intl أو Paraglide JS.
    • 
          
  • تريد أن تكون الترجمات ملفات موجودة في مستودعك، ويتم مراجعتها في طلبات السحب. استخدم inlang مع Paraglide JS أو i18next.
    • 
          
  • تعمل تطبيقك على React 18، أو Next.js Pages Router، أو Next.js 14 أو إصدار أقدم.
    • 
          
  • تم إنشاء موقعك باستخدام نظام إدارة المحتوى (CMS) أو أداة إنشاء المواقع، وليس باستخدام React. استخدم Weglotنظام إدارة المحتوى (CMS) التكاملات.
    • 
        

      

    

  







  

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

    

      

        
هل يدعم تحسين محركات البحث (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