"🛠️ حزمة التكلفة الصفرية: Next.js وVercel وGitHub"

#🛠️ مجموعة التكلفة الصفرية: Next.js وVercel وGitHub

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

| مكون | الدور | التكلفة | لماذا هو الخيار الأفضل | | :--- | :--- | :--- | :--- | | Next.js | الإطار (الكود) | مجاني (مفتوح المصدر) | أداء عالٍ، وتحسين محركات البحث (SEO) ممتاز، وتحسين الصور بسهولة. تتم صيانته بواسطة Vercel. | | فيرسيل | المضيف (الخادم) | مجاني (خطة الهوايات) | نشر التكوين الصفري لـ Next.js، وCDN العالمي للسرعة، وSSL التلقائي. | | ** جيثب ** | المصدر (المخزن) | مجاني (الاتفاقيات العامة/الخاصة) | يقوم بتخزين التعليمات البرمجية الخاصة بك بشكل آمن ويقوم تلقائيًا بتشغيل عمليات النشر إلى Vercel عند كل تغيير. |

#🚀 الخطوة 1: إعداد مشروعك على GitHub (مجانًا)

يحتاج رمز موقع الويب الخاص بك إلى منزل، وهذا هو GitHub. يقوم هذا النظام الأساسي بتخزين التعليمات البرمجية الخاصة بك بشكل آمن وإدارة سجل إصدارات مشروعك.

• إنشاء حساب على GitHub: إذا لم يكن لديك حساب، فقم بالتسجيل.
• ابدأ مشروعك: أمامك خياران رئيسيان:
  • الخيار أ (موصى به للفنانين): استخدم قالبًا. ابحث عن "قالب محفظة Next.js GitHub" (أو "قالب Vercel"). يقدم العديد من المطورين الموهوبين قواعد تعليمات برمجية جميلة ومجانية. ما عليك سوى "Fork" أو "استخدم هذا القالب" لإنشاء نسخة في مستودعك الخاص. وهذا يوفر عليك أسابيع من البرمجة.
  • الخيار ب (للمطورين): البدء من الصفر. قم بتشغيل npx create-next-app@latest محليًا واتبع المطالبات. بعد ذلك، ادفع الكود المحلي الخاص بك إلى مستودع GitHub الجديد والفارغ.
• الاستنساخ محليًا: استخدم طريقتك المفضلة (VS Code، Git CLI) لتنزيل المستودع على جهاز الكمبيوتر الخاص بك.

الخطوة التالية: تم الآن تخزين الكود الخاص بك بشكل آمن والتحكم في الإصدار.

#💻 الخطوة 2: البناء والتخصيص باستخدام Next.js (مجاني)

هذا هو المكان الذي تجلب فيه محفظتك إلى الحياة. Next.js هو إطار عمل React يجعل إنشاء مواقع الويب السريعة والحديثة أمرًا سهلاً.

#تخصيص المحتوى:

افتح المشروع في محرر التعليمات البرمجية الخاص بك. ستقوم في المقام الأول بتحرير الملفات إلى:

• أضف النص الخاص بك في صفحة "حول" (/pages/about.js أو /app/about/page.js).
• استبدل صور العناصر النائبة بعملك الفني (غالبًا في المجلد /public).
• ضبط روابط التنقل.

#أضف عملك الفني (المفتاح):

1. قم بتنظيم أفضل القطع لديك في مجلدات.
2. استخدم مكون Next.js <Image>. هذا مهم! فهو يعمل تلقائيًا على تحسين ملفاتك الفنية الكبيرة وتغيير حجمها وتقديمها بتنسيقات حديثة (مثل WebP) بحيث يتم تحميل موقعك بسرعة البرق على أي جهاز.

#التحكم في الإصدار:

• تنفيذ التغييرات: بعد إجراء التخصيصات، قم بتنفيذ التغييرات برسالة ذات معنى (على سبيل المثال، git الالتزام -m "أضيفت أول خمس قطع فنية").
• ادفع إلى GitHub: قم بتحميل التغييرات مرة أخرى إلى مستودع GitHub الخاص بك (git Push Origin main).

الخطوة التالية: الرمز النهائي جاهز للنشر.

#☁️ الخطوة 3: النشر باستخدام Vercel (استضافة مجانية)

Vercel هو منشئ Next.js، لذا فقد تم تحسين استضافتهم بشكل مثالي. خطة الهوايات الخاصة بهم مجانية إلى الأبد وتتضمن كل ما تحتاجه المحفظة.

1. الاشتراك في Vercel: انتقل إلى Vercel وقم بالتسجيل باستخدام حساب GitHub الخاص بك. هذا هو مفتاح الاتصال الآلي المجاني.
2. استيراد مشروعك:
   • في لوحة تحكم Vercel، انقر فوق "إضافة جديد" > "مشروع."
   • حدد مستودع GitHub الخاص بك من القائمة.
   • سيكتشف Vercel تلقائيًا أنه مشروع Next.js. يمكنك عادةً النقر فوق "نشر".
3. عنوان URL المجاني الخاص بك أصبح مباشرًا! يقوم Vercel بنشر موقعك على الفور إلى عنوان URL مجاني (على سبيل المثال، my-artist-site.vercel.app).
4. التحديثات التلقائية: من الآن فصاعدًا، في أي وقت تقوم فيه بدفع تعليمات برمجية جديدة إلى فرعك الرئيسي على GitHub، سيقوم Vercel بإعادة بناء موقعك ونشره تلقائيًا في دقائق. هذا هو سحر النشر المستمر (CI/CD).

الخطوة التالية: أصبحت محفظتك الآن مباشرة على الإنترنت، مجانًا بنسبة 100%.

---## 🌐 الخطوة 4: شراء النطاق المخصص الخاص بك وربطه (التكلفة الوحيدة)

الخطوة الأخيرة هي ربط اسم النطاق الاحترافي الخاص بك، مثل https://www.yourname.com. هذا هو الجزء الوحيد الذي يكلف المال (عادةً 10 إلى 20 دولارًا سنويًا).

1. اشتر النطاق الخاص بك: قم بشراء اسم النطاق الخاص بك من أي جهة تسجيل (Namecheap، أو GoDaddy، أو Google Domains، أو حتى مباشرة من خلال Vercel).
2. الاتصال في Vercel:
   • في إعدادات مشروع Vercel، انتقل إلى "النطاقات."
   • أدخل اسم المجال الذي اشتريته.
   • سيقدم لك Vercel مجموعة بسيطة من الإرشادات (عادةً ما تكون سجل A أو سجل CNAME) لإضافتها إلى إعدادات DNS الخاصة بمسجل النطاق الخاص بك.
3. الانتظار والتأكيد: بعد تحديث إعدادات DNS الخاصة بك، سيتحقق Vercel من اتصال النطاق، غالبًا في أقل من ساعة.

#🎉 تهانينا!

أصبحت الآن مجموعة الفنانين المحترفين الخاصة بك مباشرة على نطاقك المخصص، وتعمل على بنية تحتية عالمية المستوى بأقل تكلفة. لديك سيطرة كاملة على الكود، والتحديثات التلقائية، وموقع سريع للغاية لعرض عملك - كل ذلك مقابل سعر نطاقك فقط.