Next.js • المستوى الرابع • الدرس 2

مشروع المدونة التفاعلية والنشر على Vercel (Full-Stack App)

أهداف المشروع الشامل والنشر

تجميع مفاهيم Next.js: التوجيه، مكونات الخادم، جلب البيانات، والتحسينات.
ربط مستودع GitHub بمنصة Vercel للرفع والتحديث الآلي المباشر (CI/CD).
بناء مشروع مدونة كامل بـ Server Components.
إضافة التصنيفات والإحصائيات الديناميكية.

1. خطوات النشر على Vercel

رفع المشروع على حسابك في GitHub، ثم ربطه بـ Vercel بضغط زر واحدة ليقوم السيرفر ببناء التطبيق وتزويدك برابط مباشر آمن وسريع جداً مدمج بشهادة SSL تلقائياً!

bash

# 1. ارفع الكود على GitHub
git init
git add .
git commit -m "Initial commit"
git push origin main

# 2. اربط Vercel بمستودعك
vercel --prod

# ✅ ستحصل على رابط تلقائي مثل:
# https://nahda-blog.vercel.app

2. مميزات Vercel

⚡ نشر فوري

اضغط زر واحد وموقعك جاهز خلال ثوانٍ.

🔒 SSL تلقائي

شهادة HTTPS مجانية لكل مشروع.

🌍 CDN عالمي

توزيع الموقع على سيرفرات عالمية.

🔄 CI/CD تلقائي

كل push إلى GitHub يُحدّث الموقع تلقائياً.

التطبيق العملي المباشر

تحدي إتمام المسار النهائي

قم بالتعديل على الكود لإكمال مشروع المدونة بشكل احترافي:

أضف مقالاً ثالثاً إلى مصفوفة posts مع id: 3.
أضف خاصية category لكل مقال (مثل: "Next.js"، "Backend"، "Deployment").
احسب totalPosts = posts.length و categories (عدد التصنيفات الفريدة).
اعرض الإحصائيات في فقرة تحت العنوان الرئيسي.
أضف شارة التصنيف بجانب عنوان كل مقال.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق إنهاء مسار Next.js بالكامل