React i18n بدون مفاتيح الترجمة

تعمل معظم مكتبات React i18n مع مفاتيح الترجمة. يمكنك استبدال كل جزء من النص في تطبيقك بمفتاح، والاحتفاظ بملف ترجمة لكل لغة، والبحث عن النص الصحيح في وقت التشغيل. باستخدام Magic Translate، يمكنك كتابة النص بلغتك الخاصة، ويقوم الذكاء الاصطناعي بترجمته عند عرض الصفحة.

كيف يعمل i18n مع مفاتيح الترجمة

في المكتبة القائمة على المفاتيح، يبدو الزر البسيط كما يلي:

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

يحتاج كل نص جديد إلى مفتاح وترجمة في كل ملف لغة. عندما تقوم بتغيير النص الإنجليزي، تكون اللغات الأخرى قديمة حتى يقوم شخص ما بتحديث الترجمات.

نفس الزر بدون مفاتيح

باستخدام Magic Translate، يبقى النص في مكانه:

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

لا توجد ملفات لغة يجب صيانتها. عندما تقوم بتغيير النص، تتم ترجمة الإصدار الجديد في المرة التالية التي يظهر فيها، ويتم تخزين الترجمة مؤقتًا من الآن فصاعدًا.

الشروع في العمل

1. اشترك في Magic Translate واحصل على مفتاح API الخاص بك. تتضمن الخطة المجانية 5000 حرف شهريًا.
2. ثبّت العميل وأغلق تطبيقك في MagicTranslateProvider، كما هو موضح في دليل React.
3. لف النص الخاص بك في <T>. بالنسبة إلى props والسمات، استخدم useT hook.

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

إذا قمت بالعرض على الخادم، فاستخدم React SSR بدلاً من ذلك، حتى تحصل محركات البحث والمستخدمين على HTML مترجم بالكامل.

عندما لا تزال مفاتيح الترجمة هي الخيار الأفضل

ترجمة الذكاء الاصطناعي جيدة، ولكن لا تتم مراجعتها من قبل أي شخص. إذا كان يجب الموافقة على كل كلمة في تطبيقك من قبل مترجم، على سبيل المثال للنصوص القانونية أو الطبية، فإن المكتبة القائمة على المفاتيح مع الترجمات البشرية تمنحك هذا التحكم. تجمع العديد من التطبيقات بين: Magic Translate لمعظم الواجهة والنصوص التي تمت مراجعتها حيثما كان ذلك مهمًا.

أسئلة متكررة

هل الترجمة سريعة بما فيه الكفاية؟

يمكن أن تستغرق الترجمة الأولى بضع ثوانٍ. بعد ذلك، يتم تخزينها مؤقتًا وتستغرق من 100 إلى 300 مللي ثانية. باستخدام React SSR، تتم الترجمات على الخادم، بحيث يتلقى المستخدمون صفحة مترجمة بالفعل.

ما هي التكلفة؟

يتم احتساب الاستخدام بالأحرف المترجمة شهريًا، والنص الذي تمت ترجمته بالفعل لا يتم احتسابه مرة أخرى. تعرف على كيفية حساب الاستخدام والتسعير.

ما اللغات المدعومة؟

أكثر من 70. راجع القائمة الكاملة للغات المدعومة.