مشروع Next.js متكامل - تطبيق من الألف إلى الياء

في هذا الدرس الأخير، سننشئ تطبيق مدوّنة متكاملًا باستخدام Next.js، مستفيدين من جميع المفاهيم التي تعلمناها في الدروس السابقة. سيتضمن تطبيقنا مصادقة، وواجهة API كاملة، وقاعدة بيانات، وسيتم نشره في بيئة الإنتاج.

نظرة عامة على المشروع

ميزات التطبيق

ستتضمن مدوّنتنا الميزات التالية:

• المصادقة: التسجيل، وتسجيل الدخول، وإدارة الجلسات
• إدارة المقالات: عمليات CRUD كاملة (الإنشاء والقراءة والتحديث والحذف)
• التعليقات: نظام تعليقات للمقالات
• التصنيفات: تنظيم المقالات حسب التصنيفات
• البحث: البحث عن المقالات بحسب العنوان والمحتوى
• واجهة المسؤول: لوحة تحكم لإدارة المحتوى
• واجهة REST API: واجهة API كاملة مع توثيق Swagger
• التصميم المتجاوب: تصميم يتكيف مع جميع الشاشات

الحزمة التقنية

• الواجهة الأمامية: Next.js 14 وReact وTypeScript وTailwind CSS
• الواجهة الخلفية: API Routes في Next.js
• قاعدة البيانات: PostgreSQL مع Prisma ORM
• المصادقة: NextAuth.js مع JWT
• التوثيق: Swagger UI
• النشر: Vercel
• التخزين: Cloudinary للصور

المرحلة 1: إعداد المشروع

تهيئة المشروع

npx create-next-app@latest blog-nextjs --typescript --tailwind --eslint --app
cd blog-nextjs