العودة للمقالات

من الصفر إلى الخادمية: نشر تطبيق React الخاص بك باستخدام Next.js و Vercel

Majd Muhtaseb02‏/05‏/20257 دقيقة

مقدمة

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

المتطلبات الأساسية

• Node.js و npm أو yarn مثبتان
• حساب Vercel (إنه مجاني!)

الخطوة الأولى: إنشاء تطبيق Next.js

يوفر Next.js عرضًا من جانب الخادم وإنشاء مواقع ثابتة وتجربة مطور ممتازة. لنقم بإنشاء مشروع جديد:

npx create-next-app my-react-app
cd my-react-app

يقوم هذا الأمر بتهيئة مشروع Next.js جديد في دليل يسمى my-react-app.

الخطوة الثانية: تطوير مكونات React الخاصة بك (اختياري)

إذا كان لديك بالفعل تطبيق React، فيمكنك تكييفه مع Next.js. بخلاف ذلك، لا تتردد في تعديل الملف الافتراضي pages/index.js لتضمين بعض مكونات React:

// pages/index.js
function HomePage() {
  return (
    <div>
      <h1>مرحبًا بك في تطبيق React الخادمي الخاص بي!</h1>
      <p>تم نشر هذا التطبيق على Vercel.</p>
    </div>
  );
}

export default HomePage;

الخطوة الثالثة: الالتزام بـ Git

يعتمد Vercel على Git في عمليات النشر. قم بتهيئة مستودع Git في دليل مشروعك إذا لم تكن قد فعلت ذلك بالفعل:

git init
git add .
git commit -m "Initial commit"

ستحتاج أيضًا إلى دفع التعليمات البرمجية الخاصة بك إلى مستودع بعيد على منصات مثل GitHub أو GitLab أو Bitbucket.

الخطوة الرابعة: النشر إلى Vercel

الآن للجزء السهل!

1. الاتصال بـ Vercel: انتقل إلى Vercel وقم بالتسجيل أو تسجيل الدخول.

2. استيراد المشروع: انقر فوق "Add New..." واختر مستودع Git الذي يحتوي على مشروعك.

3. تكوين النشر (اختياري): عادةً ما يكتشف Vercel تلقائيًا تكوين Next.js. ومع ذلك، قد تحتاج إلى تعديل أمر الإنشاء أو دليل الإخراج في التكوينات المتقدمة.

4. انشر! انقر فوق الزر "Deploy". سيقوم Vercel بإنشاء تطبيقك ونشره.

سيوفر لك Vercel عنوان URL فريدًا حيث تتم استضافة تطبيقك. كما أنه يقوم بإعداد عمليات نشر تلقائية لكل دفعة Git لاحقة، مما يجعل التحديثات أمرًا سهلاً.

الخطوة الخامسة: نطاقات مخصصة (اختياري)

يمكنك بسهولة تكوين نطاق مخصص لتطبيقك في لوحة معلومات Vercel الخاصة بك.

خاتمة

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