\n \n

Welcome to our app

This content is automatically translated

\n );\n}\n\nexport default App;\n```\n\n## الخطوة 6. البناء والاختبار\n\nابدأ خادم التطوير الخاص بك:\n\n```bash\nnpm run dev\n```\n\nسيقوم المُصنّف تلقائيًا بما يلي:\n\n1. فحص مكونات React الخاصة بك للمحتوى القابل للترجمة\n2. استخراج مفاتيح الترجمة\n3. إنشاء ترجمات مدعومة بالذكاء الاصطناعي\n4. إنشاء ملفات ترجمة محسّنة في دليل `lingo/`\n\nقم بزيارة `http://localhost:5173` لمشاهدة تطبيقك متعدد اللغات قيد التشغيل.\n\n## خيارات التكوين\n\nيمكنك تخصيص سلوك المُصنّف:\n\n```ts\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\", \"ja\"],\n lingoDir: \"lingo\",\n debug: false,\n })(viteConfig),\n);\n```\n\n## ميزات التطوير\n\n### استبدال الوحدة الساخن (HMR)\n\nيدعم المُصنّف ميزة HMR الخاصة بـ Vite لتحديثات الترجمة:\n\n```tsx\n// src/components/Welcome.tsx\nexport function Welcome() {\n return (\n

Welcome to our app

Edit this text and see translations update automatically

\n );\n}\n```\n\n### تحسين البناء\n\nيعمل تحسين بناء Vite بسلاسة مع المُصنّف:\n\n- **تقسيم الكود** يتضمن حزم الترجمة\n- **تحسين الأصول** يتعامل مع ملفات الترجمة بكفاءة\n- **هز الشجرة** يزيل الترجمات غير المستخدمة\n\n## هيكل المشروع النموذجي\n\n```\nmy-vite-app/\n├── src/\n│ ├── components/\n│ │ └── Welcome.tsx\n│ ├── App.tsx\n│ ├── main.tsx\n│ └── lingo/ # ملفات الترجمة المُنشأة\n│ ├── meta.json\n│ └── dictionary.js\n├── vite.config.ts\n├── package.json\n└── .env\n```\n\n## نشر الإنتاج\n\n1. **بناء التطبيق الخاص بك**:\n\n ```bash\n npm run build\n ```\n\n2. **التزام ملفات الترجمة**:\n\n ```bash\n git add src/lingo/\n git commit -m \"Add translations\"\n ```\n\n3. **النشر** باستخدام المنصة المفضلة لديك (Vercel، Netlify، إلخ)\n\nسيقدم تطبيق Vite الخاص بك المحتوى المترجم تلقائيًا بناءً على تفضيلات المستخدم.\n\n## استكشاف الأخطاء وإصلاحها\n\n### المشكلات الشائعة\n\n**عدم إنشاء الترجمات**: تأكد من تعيين `GROQ_API_KEY` بشكل صحيح في ملف `.env` الخاص بك.\n\n**أخطاء البناء**: تأكد من تضمين دليل `lingo/` في نظام التحكم بالإصدارات الخاص بك.\n\n**عدم عمل HMR**: أعد تشغيل خادم التطوير بعد إضافة محتوى جديد قابل للترجمة.\n\n## الخطوات التالية\n\n- **الإعدادات المتقدمة**: [خيارات التخصيص](../configuration/advanced)\n- **الأسئلة الشائعة**: [الأسئلة الشائعة واستكشاف الأخطاء وإصلاحها](../guides/faq)\n- **كيف يعمل**: [فهم عملية البناء](../how-it-works)\n","content","\nيتكامل **مُترجم Lingo.dev** مباشرة مع Vite لتوفير الترجمة وقت البناء لتطبيقات React.\n\nاتبع هذه الخطوات لإضافة دعم متعدد اللغات إلى تطبيق Vite + React الخاص بك.\n\nأو استكشف [مشروع Vite التجريبي](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project) لتجربة المُترجم قيد التشغيل.\n\n## المتطلبات الأساسية\n\n- **Vite 4+**\n- **React 18+**\n- Node.js 18 أو أعلى\n\n## الخطوة 1. تثبيت الحزمة\n\nقم بتثبيت حزمة **lingo.dev**:\n\n```bash\nnpm install lingo.dev\n```\n\n## الخطوة 2. تكوين Vite\n\nقم باستيراد وتكوين المُترجم في ملف `vite.config.ts` الخاص بك:\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nconst viteConfig = {\n plugins: [react()],\n // تكوين Vite الحالي الخاص بك\n};\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n })(viteConfig),\n);\n```\n\n## الخطوة 3. إعداد المصادقة\n\n**مُجمّع Lingo.dev** يرسل المحتوى الخاص بك إلى محركات الترجمة بالذكاء الاصطناعي للتوطين، لذلك تحتاج إلى المصادقة أولاً.\n\n### الخيار 1. محرك Lingo.dev\n\nيمكن لمُجمّع Lingo.dev استخدام **محرك Lingo.dev** كمحرك الترجمة بالذكاء الاصطناعي. يوفر اختيار النموذج الديناميكي، والتوجيه التلقائي، وذاكرة الترجمة، ودعم المصطلحات. تتوفر خيارات مجانية ومدفوعة.\n\nللمصادقة، قم بتشغيل:\n\n```bash\nnpx lingo.dev@latest login\n```\n\nإذا واجهت مشكلات في تدفق المتصفح، يمكنك إضافة `LINGODOTDEV_API_KEY` يدويًا إلى ملف `.env` الخاص بك:\n\n```bash\n\n# .env\n\nLINGODOTDEV_API_KEY=...\n```\n\nستجد الرمز المميز في إعدادات مشروع محرك Lingo.dev.\n\n### الخيار 2. مزود LLM بديل\n\nبدلاً من ذلك، يمكنك استخدام نماذج من مزودي نماذج اللغة الكبيرة (LLM) المدعومين:\n\n- [GROQ](https://groq.com/)\n- [Google AI](https://aistudio.google.com/)\n- [OpenRouter](https://openrouter.ai/)\n- [Ollama](https://ollama.com/)\n- [Mistral](http://mistral.ai)\n\nأضف مفتاح (مفاتيح) API الخاص بك إلى ملف `.env` الخاص بك:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**ملاحظة:** تأكد من تفعيل حسابك مع مزود نماذج اللغة الكبيرة وقبول شروط الخدمة الخاصة بهم قبل استخدامه في المُجمّع.\n\n## الخطوة 4. إضافة المزود\n\nقم باستيراد المزود في ملف الإدخال الرئيسي (`src/main.tsx`):\n\n```tsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport { LingoProviderWrapper, loadDictionary } from \"lingo.dev/react/client\";\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n \n loadDictionary(locale)}>\n \n \n ,\n);\n```\n\n## الخطوة 5. اختياري: إضافة مبدل اللغة\n\nقم بإنشاء مكون مبدل اللغة في التطبيق أو الترويسة الخاصة بك:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nfunction App() {\n return (\n

\n \n

Welcome to our app

This content is automatically translated

Welcome to our app

Edit this text and see translations update automatically

تكامل Vite