البدء السريع - 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 استخدام محرك Lingo.dev كمحرك الترجمة بالذكاء الاصطناعي الخاص بك.

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

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

npx lingo.dev@latest login

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

LINGODOTDEV_API_KEY=...

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

الخيار 2. مزود LLM بديل

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

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


# .env

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

ملاحظة: تأكد من تفعيل حسابك مع مزود LLM وقبول شروط الخدمة الخاصة بهم قبل استخدامه في Compiler.

الخطوة 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
كيف يعمل: فهم المعالجة في وقت البناء
التكوين المتقدم: خيارات التخصيص