البدء السريع - Lingo.dev Compiler

تم تصميم مُترجم Lingo.dev لجعل أي تطبيق React متعدد اللغات في وقت البناء دون الحاجة إلى إجراء تغييرات على مكونات React الحالية.

سيساعدك دليل البدء السريع هذا على إضافة دعم متعدد اللغات إلى تطبيق React الخاص بك في أقل من 5 دقائق.

عند الانتهاء من هذا الدليل، ستتمكن من:

تثبيت وتكوين مُترجم Lingo.dev في تطبيق React الخاص بك
إعداد استخراج وحقن الترجمات الآلي
الحصول على تطبيق متعدد اللغات يعمل بترجمات محسّنة

لنبدأ!

المتطلبات الأساسية

مُجمّع Lingo.dev يعمل مع أطر عمل React الحديثة. قبل البدء، تأكد من أن لديك إحدى الإعدادات المدعومة:

Next.js (موجه التطبيق)
React Router / Remix
Vite + React

أو استكشف تطبيقاتنا التجريبية: Next.js، React Router، وVite.

الخطوة 1. تثبيت الحزمة

قم بتثبيت حزمة lingo.dev في مشروعك:

npm install lingo.dev

الخطوة 2. تكوين إطار العمل الخاص بك

اختر إطار العمل الخاص بك واتبع الإعداد المحدد:

Next.js

قم بتحديث ملف next.config.js الخاص بك:

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev", // الخيار 1: محرك Lingo.dev
  // models: {
  //   "*:*": "groq:qwen/qwen3-32b", // الخيار 2: GROQ
  //   "*:*": "google:gemini-2.0-flash", // الخيار 2: Google AI
  //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // الخيار 2: OpenRouter
  //   "*:*": "ollama:mistral-small3.1", // الخيار 2: Ollama
  //   "*:*": "mistral:mistral-small-latest", // Mistral
  // },
})(nextConfig);

React Router / Remix

قم بتحديث ملف vite.config.ts الخاص بك:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // الخيار 1: محرك Lingo.dev
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // الخيار 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // الخيار 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // الخيار 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // الخيار 2: Ollama
    // },
  })(viteConfig),
);

Vite

قم بتحديث ملف vite.config.ts الخاص بك:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // الخيار 1: محرك Lingo.dev
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // الخيار 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // الخيار 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // الخيار 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // الخيار 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

الخطوة 3. إعداد المصادقة

يقوم مُجمِّع Lingo.dev بإرسال المحتوى الخاص بك إلى محركات الترجمة بالذكاء الاصطناعي للتوطين، لذلك نحتاج إلى المصادقة أولاً.

الخيار 1. محرك Lingo.dev

يمكن لـ Lingo.dev Compiler استخدام محرك Lingo.dev كمحرك الترجمة الذكي الخاص بك.

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

للمصادقة، قم بتشغيل:

npx lingo.dev@latest login

تفصيل مهم. إذا كنت تستخدم متصفح Brave، أو كانت إضافات المتصفح الخاصة بك تحظر تدفق المصادقة، يمكنك المصادقة يدويًا عن طريق إضافة متغير بيئة LINGODOTDEV_API_KEY إلى ملف .env الخاص بك:

LINGODOTDEV_API_KEY=...

ستجد الرمز المميز في إعدادات مشروع محرك Lingo.dev.

الخيار 2. مزود نماذج لغوية بديل

بدلاً من ذلك، يمكنك استخدام نماذج من أحد مزودي نماذج اللغة الكبيرة المدعومين:

أضف مفتاح API الخاص بمزود نموذج اللغة الكبيرة المُكوّن إلى بيئتك:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

ملاحظة: تأكد من تفعيل حسابك مع مزود نموذج اللغة الكبيرة وقبول شروط الخدمة الخاصة بهم قبل استخدامه في المُجمّع.

الخطوة 4. إضافة المزود

قم بتغليف تطبيقك بـ LingoProvider لتمكين الترجمات:

Next.js

في ملف layout.tsx الخاص بك:

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

في ملف root.tsx الخاص بك:

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

في ملف main.tsx الخاص بك:

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

الخطوة 5. البناء والاختبار

قم بتشغيل خادم التطوير الخاص بك:

npm run dev

سيقوم المترجم تلقائيًا بما يلي:

فحص مكونات React الخاصة بك للنصوص القابلة للترجمة
استخراج مفاتيح الترجمة
إنشاء ترجمات باستخدام الذكاء الاصطناعي
إنشاء ملفات ترجمة محسّنة في دليل lingo/

أصبح تطبيقك الآن متعدد اللغات! ينشئ المترجم قواميس مُصدرة تتتبع تغييرات المحتوى وتعيد ترجمة المحتوى المعدل فقط.

اختياري: إضافة مبدل اللغة

أضف مبدل لغة للسماح للمستخدمين بتغيير اللغات:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

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

أدلة خاصة بالإطارات البرمجية: Next.js، React Router، Vite
كيف يعمل: فهم المعالجة في وقت البناء
الإعدادات المتقدمة: خيارات التخصيص