البدء السريع

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

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

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

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

لنبدأ!

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

مُجمّع 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: {
    "*:*": "groq:mistral-saba-24b",
  },
})(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Vite

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

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

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

يستخدم مُجمّع Lingo.dev تقنية GROQ للترجمات المدعومة بالذكاء الاصطناعي. قم بإنشاء حساب مجاني على groq.com واحصل على مفتاح API الخاص بك.

أضف مفتاح API الخاص بك إلى بيئتك:


# .env

GROQ_API_KEY=gsk_...

الخطوة 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

سيقوم المُصنّف تلقائيًا بما يلي:

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

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

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

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

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

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

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