Deepseek ArtifactsDeepseek Artifacts
دليل v0

كيفية استخدام v0 من Vercel: دليل للمبتدئين بصور الشاشة

جولة كاملة في v0.dev أعيد بناؤها من مشروع حقيقي لمبتدئ — Enhanced Prompt، ومحدد العناصر، والإصدارات، والنشر على Vercel بضغطة، ومزامنة GitHub، وقاعدة بيانات Supabase مع تسجيل دخول. كل خطوة مرفقة بصورة شاشة.

اطّلع على الخطوات الثلاث عشرةأنشئ دون v0

v0 باختصار

  • v0.dev هو منشئ التطبيقات الذكي من Vercel: تصف التطبيق بلغة طبيعية (أو ترفق لقطة شاشة أو ملف Figma) فيولّد تطبيق Next.js عاملًا، بمعاينة وكود جنبًا إلى جنب.
  • استخدم Enhanced Prompt حين تكون فكرتك رقيقة، ومحدد العناصر لتعديل مكوّن محدد، وقائمة الإصدارات للتراجع عن أي تكرار فاشل.
  • النشر ضغطة واحدة نحو Vercel، ومزامنة GitHub تدفع كل تعديل إلى مستودعك — لن يبقى كودك حبيس v0 أبدًا.
  • البيانات الحقيقية تحتاج تكامل Supabase: أنشئ قاعدة البيانات من إعدادات v0، ودع v0 يشغّل سكربت SQL (احذف سطر JWT أولًا)، فيحصل تطبيقك على دخول بالبريد وبيانات لكل مستخدم.

How to use v0.dev by Vercel For Beginners

الفيديو المصدر من:Code with Nathan12:28

شاهد على YouTube

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

هذا الدليل ملخّص مصوّر مستقل لمن يفضّل القراءة. لدعم صاحب المحتوى، شاهد الفيديو الأصلي على قناة Code with Nathan عبر الرابط أعلاه.

أنشئ تطبيقًا في v0 خطوة بخطوة

  1. 1

    ابدأ من v0.dev

    أنشئ حسابًا مجانيًا على v0.dev. في الشريط الجانبي محادثاتك ومشاريعك؛ وصندوق الأوامر الكبير في المنتصف هو نقطة الانطلاق. حوله إجراءات سريعة — استنساخ لقطة شاشة، استيراد من Figma، صفحات هبوط — وزر المرفقات يقبل الصور وملفات Figma كمدخلات تصميم.

    v0.dev home screen with the What can I help you build prompt box, the v0-1.5-md model chip, and Clone a Screenshot quick action buttons
    صندوق الأوامر في v0.dev مع الإجراءات السريعة ومحدد النموذج.شاهد عند 2:00
  2. 2

    وسّع فكرتك عبر Enhanced Prompt

    «تطبيق ملاحظات» وحدها معلومة قليلة على v0. يعيد زر Enhanced Prompt صياغتها بمنظومة وظائف أساسية ومصادقة مستخدمين وتصميم متجاوب. تجاَزه إن كان أمرك مفصلًا فعلًا — فقد ينحرف التوسيع بالتطبيق عن صورتك الذهنية. لواجهات العمل اليومية، النموذج medium هو الخيار الاقتصادي الافتراضي؛ واترك large للبناءات المعقدة.

    v0 Enhanced Prompt example expanding a short note app idea into a detailed Next.js prompt with authentication and responsive design requirements
    Enhanced Prompt يحوّل سطرًا واحدًا إلى مواصفة حقيقية.شاهد عند 2:15
  3. 3

    تجوّل في مشاريع المجتمع

    أسفل صندوق الأوامر تظهر معرض المجتمع بما بناه آخرون — ملفات تعريف، وصفحات هبوط، وتجارب مرحة. زر Open in v0 ينسخ أي مشروع إلى حسابك حيث تفحص الكود أو تعيد توجيهه لحاجتك. أسرع من البدء من الصفر إن كان شيء مشابه موجودًا.

    v0 Community gallery with Floating Bubbles and Portfolio templates showing the Open in v0 button to copy a project into your account
    معرض المجتمع: Open in v0 ينسخ المشروع إلى حسابك.شاهد عند 3:00
  4. 4

    ولّد تطبيقك

    أمر المثال: «تطبيق ملاحظات قائم على markdown مع مجلدات ووسوم وبحث وتلوين للصياغة.» اضغط إدخال فيخطط v0 ثم يكتب الكود مباشرةً في عرض Code وترى الملفات تتشكل أمامك. بعد نحو دقيقة يكون التطبيق المكتمل قد حضر في المعاينة.

    v0 code view streaming app/page.tsx while generating a markdown note app, with the Version 1 Generating card and Stop button visible
    v0 يكتب app/page.tsx أثناء التوليد.شاهد عند 4:00
  5. 5

    اختبره في المعاينة

    استعمله كمستخدم حقيقي قبل أي تعديل: حرّر عنوان ملاحظة ونصها، وأنشئ ملاحظات في المجلدات، واحذف واحدة، وابحث في القائمة. إيجاد الثغرات الآن يعني أمر متابعة واحدًا دقيقًا بدل خمسة غامضة لاحقًا.

    v0 preview pane editing an untitled note title with Save and Cancel buttons beside folders for All Notes, Personal, and Work
    تحرير عنوان ملاحظة في لوحة المعاينة.شاهد عند 4:30
  6. 6

    عدّل عنصرًا واحدًا بالمحدِّد

    زر الحذف يذوب في شريط الأدوات — اضغط أيقونة المحدد، واختر العنصر، وأمر عنه وحده: «اجعل خلفية زر الحذف هذا حمراء». يحصر v0 التغيير في ذلك المكوّن دون إعادة توليد الصفحة — ويثبت كل ما عداه.

    v0 element selector chip on a delete button with the prompt use red background for this delete button and the Version 2 restore card below
    محدد العناصر يحصر الأمر في مكوّن واحد.شاهد عند 9:00
  7. 7

    تراجع بالإصدارات

    كل توليد يحفظ إصداره. افتح قائمة الإصدارات للمقارنة، ويعيد Restore حالة أقدم حين تنحرف تكرارة — شبكة الأمان التي تجعل الأوامر الجسورة رخيصة.

    v0 version selector showing Version 2 Latest while regenerating app/page.tsx after a follow-up prompt
    بطاقة استعادة الإصدار 2 — الحالات الأقدم على بعد نقرة.شاهد عند 5:25
  8. 8

    انشر على Vercel

    زر Deploy يدفع التطبيق مباشرة إلى Vercel: يسري سجل البناء، وتُخصَّص النطاقات، وبعد دقيقة يكون لتطبيقك عنوان عام. التعديلات اللاحقة يُعاد نشرها بنقرة من القائمة نفسها.

    v0 Deploy to Vercel tooltip on the Deploy button above a finished markdown note app preview
    من المعاينة إلى الرابط الحي في نقرة واحدة.شاهد عند 6:00
  9. 9

    زامن مع GitHub

    اضغط أيقونة GitHub، وفوّض v0، وسمِّ المستودع وأنشئه. من تلك اللحظة، يُدفع كل تعديل إلى فرع في مستودعك — ويمكنك دائمًا تنزيل الكود مضغوطًا أو سحبه عبر npx. لن يبقى مشروعك محبوسًا داخل v0.

    v0 Create Repository dialog choosing a GitHub account and repository name so every prompt change is pushed to a branch
    إنشاء مستودع GitHub الذي سييدفع إليه v0 التغييرات.شاهد عند 7:00
  10. 10

    اربط Supabase

    البيانات داخل المتصفح تموت مع المتصفح. افتح Settings ثم Integrations ثم Supabase، ووافق، واختر المنطقة والخطة المجانية، وأنشئ قاعدة البيانات. يربطها v0 تلقائيًا بمشروعك في Vercel — دون تنقّل بين لوحات التحكم.

    v0 Supabase integration Create Database dialog with the Washington D.C. primary region and installation plan before continuing
    نافذة Create Database الخاصة بـ Supabase داخل v0.شاهد عند 8:30
  11. 11

    أضف تسجيل دخول بالبريد

    الأمر: «أنشئ نظام مصادقة بالبريد وكلمة المرور واحفظ كل البيانات في Supabase.» يولّد v0 صفحات الدخول والتسجيل إضافة إلى سكربت SQL ينشئ الجداول وسياسات الأمان. حتى الآن كانت بيانات التطبيق في localStorage — بهذه الخطوة تنتقل إلى قاعدة بيانات حقيقية.

    v0 chat sending the add authentication using email with supabase prompt beside the markdown notes app preview and version restore card
    يخطط v0 نظام المصادقة ويجهّز سكربت SQL الخاص به.شاهد عند 9:10
  12. 12

    شغّل سكربت SQL — واحذف سطر JWT أولًا

    مصيدة يشير إليها الفيديو: إن احتوى السكربت على سطر يضبط app.jwt_secret فاحذفه قبل التشغيل — فهو يسبب خطأ، إذ ضُبط السر مسبقًا عند إنشاء Supabase. ثم شغّل السكربت (Apply في v0) لإنشاء جدولي folders وnotes والسياسات.

    v0 chat with the Run create-tables.sql Apply step beside the SQL editor showing the app.jwt_secret line to delete before running
    سكربت إنشاء الجداول — بلا سطر JWT — جاهز للتنفيذ.شاهد عند 9:30
  13. 13

    تحقق من بياناتك على الهواء

    سجّل في المعاينة، وأنشئ ملاحظات في المجلدات، وأعد الفتح من متصفح آخر — كل شيء باقٍ. بياناتك في جداول Supabase ومعزولة لكل مستخدم، والتطبيق صار منتجًا كامل الواجهتين: واجهة من أوامر، وقاعدة بيانات من تكامل، ونشر على Vercel.

    v0 note app preview signed in with a My Notes sidebar and red delete button after the Supabase tables SQL was applied
    دخول منجز وملاحظات تثبت في Supabase.شاهد عند 10:10

أسئلة شائعة عن v0

واصل الاستكشاف

DeepSeek App Builder — منشئ التطبيقات بالذكاء الاصطناعي مجاناًعارض أرتيفكت React — شغّل JSX عبر الإنترنتبديل v0 المجانيمولّد الألعاب بالذكاء الاصطناعي — اصنع ألعاب متصفح مجاناً