"use i18n";

يتيح توجيه "use i18n" ترجمة مكونات React ملفًا تلو الآخر دون الحاجة إلى إعادة هيكلة الشفرة البرمجية الحالية. تمامًا مثل "use client" أو "use server"، ما عليك سوى إضافته في أعلى الملف لترجمة جميع المحتويات القابلة للترجمة في ذلك المكون تلقائيًا.

هذا النهج مثالي لإضافة دعم متعدد اللغات تدريجيًا إلى قواعد الشفرة البرمجية الكبيرة بأقل مخاطرة وأقصى مرونة.

كيف يعمل

عندما تضيف "use i18n" إلى أعلى ملف React، يقوم مترجم Lingo.dev تلقائيًا بما يلي:

  1. فحص الملف بأكمله بحثًا عن المحتوى القابل للترجمة
  2. استخراج نص JSX والسمات القابلة للترجمة
  3. إنشاء ترجمات باستخدام نموذج الذكاء الاصطناعي المُكوّن
  4. حقن النسخ المترجمة وقت البناء
  5. الحفاظ على استبدال الوحدات الساخنة (Hot Module Replacement) للتطوير السلس

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

تمكين التوجيه

لاستخدام توجيه "use i18n"، قم بتمكينه في تكوين المترجم الخاص بك:

{
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  useDirective: true, // تمكين توجيه "use i18n"
  models: {
    "*:*": "groq:mistral-saba-24b",
  }
}

ملاحظة: عندما يتم تعيين useDirective إلى false (الإعداد الافتراضي)، يعالج مترجم Lingo.dev جميع الملفات كما لو كانت تحتوي على "use i18n" في الأعلى. يمنحك تعيين useDirective: true تحكمًا دقيقًا لترجمة الملفات بشكل فردي.

الاستخدام الأساسي

أضف التوجيه في أعلى أي ملف مكون React:

"use i18n";

import React from "react";

export function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our app!</h2>
      <p>
        Get started by exploring our features and discovering what makes our
        platform special.
      </p>
      <button>Get Started</button>
    </div>
  );
}

هذا كل شيء! سيتم الآن عرض المكون تلقائيًا باللغة المحددة للمستخدم دون أي تغييرات في الشفرة البرمجية.

يعمل مع التوجيهات الحالية

توجيه "use i18n" يعمل بشكل طبيعي جنبًا إلى جنب مع توجيهات React الأخرى التي قد تستخدمها بالفعل:

"use client";
"use i18n";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>عداد النقرات</h1>
      <p>لقد نقرت {count} مرات</p>
      <button onClick={() => setCount(count + 1)}>انقر هنا!</button>
    </div>
  );
}

"use server";
"use i18n";

export async function ServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>محتوى مُقدم من الخادم</h1>
      <p>يتم عرض هذا المحتوى على الخادم وتوطينه في وقت البناء</p>
    </div>
  );
}

يقوم المُترجم بمعالجة جميع التوجيهات معًا بذكاء، مع الحفاظ على السلوك المقصود لمكوناتك مع إضافة التوطين.

سير عمل التطوير

1. الترحيل التدريجي

ابدأ بإضافة التوجيه إلى المكونات الفردية:

// قبل: مكون باللغة الإنجليزية فقط
export function Header() {
  return <h1>تطبيقي</h1>;
}

// بعد: مكون متعدد اللغات بسطر واحد
("use i18n");

export function Header() {
  return <h1>تطبيقي</h1>;
}

2. استبدال الوحدات الساخن

يعمل التوجيه بسلاسة مع HMR. عندما تقوم بتعديل النص في مكون يستخدم "use i18n"، يتم تحديث الترجمات فورًا في متصفحك:

"use i18n";

export function StatusMessage() {
  return (
    <div>
      {/* قم بتغيير هذا النص وشاهد تحديثه بجميع اللغات فورًا */}
      <p>تم حفظ تغييراتك بنجاح!</p>
    </div>
  );
}

3. نهج ملف تلو الآخر

مثالي لقواعد الشفرة الكبيرة حيث ترغب في التوطين بشكل تدريجي:

src/
├── components/
│   ├── Header.tsx          // ✅ "use i18n" - تمت الترجمة
│   ├── Navigation.tsx      // ✅ "use i18n" - تمت الترجمة
│   ├── ProductCard.tsx     // ✅ "use i18n" - تمت الترجمة
│   ├── Footer.tsx          // ⏳ لم تتم الترجمة بعد
│   └── Sidebar.tsx         // ⏳ لم تتم الترجمة بعد

الفوائد

توجيه "use i18n" يجعل التوطين بسيطًا مثل إضافة سطر واحد إلى مكونات React الخاصة بك، وهو مصمم للمشاريع الناضجة التي تتطلب توطينًا تدريجيًا.

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