مترجم Lingo.dev

مترجم Lingo.dev هو نظام ترجمة مجاني ومفتوح المصدر يعمل في وقت البناء ويجعل تطبيقات React متعددة اللغات دون تعديل المكونات الخاصة بك.

لرؤية المترجم أثناء العمل، تحقق من هذا العرض التوضيحي المباشر: https://x.com/MaxPrilutskiy/status/1929946504216932746

مثال سريع

قبل إضافة المترجم:

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

بعد إضافة المترجم (لا حاجة لتغييرات في الكود):

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

كيف يعمل

يكتشف المترجم تلقائياً النصوص القابلة للترجمة في JSX الخاص بك، ويولد ترجمات مدعومة بالذكاء الاصطناعي، ويدمجها في وقت البناء. يبقى الكود المصدري الخاص بك دون تغيير—تحدث الترجمات بشكل شفاف أثناء عملية البناء.

المبدأ الأساسي: يتم تحديد الترجمات في وقت الترجمة، مما يؤدي إلى إنشاء حزم محسّنة تحتوي فقط على الترجمات التي تحتاجها. وهذا يعني أوقات تحميل أسرع، وحزم أصغر، وتحسين أفضل لمحركات البحث.

كيف يختلف

على عكس مكتبات الترجمة في وقت التشغيل (i18next، react-intl)، مترجم Lingo.dev:

  • يعمل في وقت البناء، وليس وقت التشغيل
  • لا يتطلب إدارة يدوية لمفاتيح الترجمة
  • يولد الترجمات تلقائياً باستخدام الذكاء الاصطناعي
  • لا يضيف أي عبء على وقت التشغيل
  • يحافظ على نظافة كود React الخاص بك—لا توجد استدعاءات لدالة t()

الميزات الرئيسية

  • تلقائي افتراضياً - لا حاجة لتوجيه "use i18n" (اختياري إذا كنت تريد سلوك الاشتراك)
  • لا عبء على وقت التشغيل - يتم ترجمة الترجمات مسبقاً في البناء الخاص بك
  • أوضاع البناء - استخدم المترجم الزائف في التطوير، والترجمات الحقيقية في CI، والذاكرة المؤقتة فقط في الإنتاج
  • آمن من حيث الأنواع - دعم كامل لـ TypeScript مع إنشاء تلقائي للأنواع
  • تجاوزات يدوية - استخدم سمة data-lingo-override للتحكم الدقيق في ترجمات محددة
  • محللات لغة مخصصة - قم بتنفيذ منطق الكشف عن اللغة والاستمرارية الخاص بك
  • جمع تلقائي - دعم ICU MessageFormat لصيغ الجمع
  • أداة التطوير - محرر ترجمة داخل المتصفح للتحرير في الوقت الفعلي

الأطر المدعومة

  • Next.js (App Router مع React Server Components)
  • Vite + React (SPA وSSR)

المزيد من الأطر قريباً.

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

هل أحتاج إلى مفاتيح API في الإنتاج؟ لا. استخدم buildMode: "cache-only" في الإنتاج—يتم إنشاء الترجمات مسبقاً في CI، ولا حاجة لاستدعاءات API.

هل يمكنني التحكم في الملفات التي تتم ترجمتها؟ نعم. قم بتعيين useDirective: true لطلب توجيه 'use i18n' في أعلى الملفات التي تريد ترجمتها. الإعداد الافتراضي هو تلقائي (جميع الملفات).

ماذا لو كانت ترجمة AI خاطئة؟ استخدم خاصية data-lingo-override لتحديد ترجمات دقيقة للغات محددة. تعمل مع أي عنصر JSX.

كيف أختبر بدون استدعاءات API؟ قم بتفعيل usePseudotranslator: true في التطوير—ينشئ ترجمات وهمية فورياً حتى تتمكن من رؤية ما يتم ترجمته دون تكاليف API.

الخطوات التالية