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

React بلا خوادم مع Next.js و Vercel: دليل شامل

المؤلفMajd Muhtaseb31‏/05‏/202512 دقيقة
React بلا خوادم مع Next.js و Vercel: دليل شامل

مقدمة

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

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

  • تثبيت Node.js و npm/yarn
  • فهم أساسي لـ React

إعداد مشروع Next.js

قم بإنشاء مشروع Next.js جديد باستخدام create-next-app:

npx create-next-app my-serverless-app
cd my-serverless-app

إنشاء صفحة بسيطة

استبدل محتوى pages/index.js بما يلي:

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

export default HomePage;

إضافة مسار API

يتيح لك Next.js إنشاء وظائف API بدون خوادم داخل مشروعك. قم بإنشاء ملف pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'مرحبًا من Next.js API!' })
}

يمكنك الوصول إلى نقطة نهاية API هذه على /api/hello.

النشر إلى Vercel

  1. إنشاء حساب Vercel: إذا لم يكن لديك بالفعل حساب، فقم بالتسجيل للحصول على حساب Vercel مجاني على vercel.com.
  2. تثبيت Vercel CLI:
npm install -g vercel
  1. انشر:
vercel

سيرشدك Vercel CLI خلال عملية النشر. سيطلب منك ربط مشروعك بحساب Vercel وإنشاء مشروع جديد.

  1. عمليات النشر التلقائية: تنشر Vercel تلقائيًا تطبيقك متى دفعت تغييرات إلى مستودع Git الخاص بك (على سبيل المثال، GitHub أو GitLab أو Bitbucket).

متغيرات البيئة

يمكنك إدارة متغيرات البيئة في لوحة معلومات Vercel ضمن إعدادات مشروعك. يمكن الوصول إلى هذه المتغيرات في تطبيق Next.js الخاص بك باستخدام process.env.

خاتمة

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