جاري التحميل...
جاري التحميل...
إعداد المشروع وتثبيت التبعيات
الآن سنقوم فعليًا بإعداد المشروع. سنستخدم create-next-app لإنشاء مشروع Next.js جديد مع جميع الإعدادات اللازمة.
سيقوم هذا الأمر بإنشاء مجلد my-blog يحتوي على:
💡 شرح الخيارات:
--typescript لاستخدام TypeScript بدلاً من JavaScript العادي، --tailwind لتثبيت وإعداد Tailwind CSS تلقائيًا، --eslint لإضافة ESLint للتحقق من الكود، --app لاستخدام App Router (النهج الحديث)، --src-dir لوضع الكود في مجلد src/ (اختياري لكن أفضل)، --import-alias "@/*" لتبسيط الاستيراد باستخدام @
بعد إنشاء المشروع، نحتاج إلى تثبيت التبعيات الإضافية التي سنستخدمها في مشروع المدونة:
بعد إنشاء المشروع وتثبيت التبعيات، نحتاج إلى إنشاء مجلدات وملفات إضافية. دعنا نرى هيكل المشروع النهائي:
💡 لماذا نستخدم مجلد src/؟:
استخدام مجلد src/ يجعل هيكل المشروع أكثر تنظيمًا. جميع ملفات الكود تذهب داخل src/ بينما تظل ملفات الإعداد في الجذر. هذا نمط شائع في المشاريع الكبيرة.
تُستخدم متغيرات البيئة لتخزين المعلومات السرية مثل مفاتيح API. هذه الملفات لا يجب رفعها إلى GitHub لأنها تحتوي على معلومات حساسة.
كيفية الحصول على هذه المفاتيح:
💡 تنبيه أمني مهم:
أضف .env.local إلى ملف .gitignore لمنع رفعه إلى GitHub. أي شخص يحصل على هذه المفاتيح يمكنه الوصول إلى بياناتك!
يحتوي ملف package.json على معلومات المشروع والتبعيات والأوامر المتاحة. بعد تثبيت التبعيات، سيبدو هكذا:
الأمر المهم هو npm run dev الذي يقوم بتشغيل خادم التطوير. يمكنك تشغيله عن طريق الكتابة في الطرفية:
بعد التشغيل، افتح المتصفح وانتقل إلى http://localhost:3000 لرؤية مشروعك.
إذا كنت تخطط لتوسيع مشروعك في المستقبل (مثل إضافة تطبيق جوال أو API خارجي)، يمكنك استخدام هيكل Monorepo. هذا الهيكل يتيح لك مشاركة الكود بين مشاريع متعددة.
المكتبات التي تساعدك على إدارة Monorepo:
💡 متى تستخدم Monorepo؟:
استخدم Monorepo عندما يكون لديك أكثر من مشروع يشارك نفس الكود. للمشاريع الصغيرة (مثل مدونتنا)، الهيكل العادي (Single Repo) كافٍ ويبسط الأمور.
أي ملف يحتوي على مفاتيح API السرية ولا يجب رفعه إلى GitHub؟
حاول إنشاء مشروع Next.js جديد بنفسك باستخدام الأوامر التالية: 1. قم بتشغيل npx create-next-app@latest 2. ثبّت التبعيات الإضافية (@supabase/ssr, @clerk/nextjs) 3. أنشئ مجلد components/ مع ملف Header.js بسيط 4. أنشئ مجلد lib/ مع ملف utils.js بسيط 5. قم بتشغيل المشروع باستخدام npm run dev وتأكد من أنه يعمل. إذا واجهت أي مشكلة، راجع خطوات التثبيت أعلاه أو ابحث عن الحل على Google.
خطوات الإعداد:
npx create-next-app@latest my-blognpm install @supabase/ssr @clerk/nextjsnpm run devالملفات الرئيسية:
.env.local - متغيرات البيئة (لا تدفع أبدًا)package.json - التبعيات والسكربتاتnext.config.js - إعدادات Next.jstailwind.config.js - إعدادات Tailwind CSSكيف تدير أخطاء المشروع؟
الإجابة:
اكتب اختبارات، استخدم linting، و راجع الكود باستمرار.
كيف تُحسّن أداء المشروع؟
الإجابة:
قلل الـ bundle size، استخدم lazy loading، وحسّن الصور.
استخدم Git branches
افصل كل ميزة في branch منفصل
اكتب tests
لا تنشر ميزة بدون اختبارات