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

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

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

مقدمة

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

إعداد مشروع Next.js الخاص بك

أولاً، قم بإنشاء مشروع Next.js جديد:

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

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

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

لنقم بإنشاء صفحة بسيطة في دليل pages:

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

export default HomePage;

وظائف بدون خادم (مسارات API)

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

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

ينشئ هذا نقطة نهاية API بسيطة تُرجع استجابة JSON. يمكنك الوصول إليها على /api/hello.

النشر إلى Vercel

يعد النشر إلى Vercel هو الجزء الأسهل.

  1. ربط مستودع Git الخاص بك: قم بالتسجيل للحصول على حساب Vercel وربط مستودع Git الخاص بك (GitHub أو GitLab أو Bitbucket).
  2. Vercel يكتشف مشروع Next.js تلقائيًا: سيكتشف Vercel تلقائيًا مشروع Next.js الخاص بك وتكوين إعدادات النشر.
  3. انشر تطبيقك: ادفع التعليمات البرمجية الخاصة بك إلى مستودع Git الخاص بك. ستقوم Vercel بنشر تطبيقك تلقائيًا.

توفر Vercel عمليات نشر تلقائية لكل دفعة Git، مما يجعل التكامل والتسليم المستمر سلسًا.

فوائد بدون خادم مع Next.js و Vercel

  • قابلية التوسع: تقوم Vercel تلقائيًا بتوسيع نطاق تطبيقك بناءً على حركة المرور.
  • فعالية التكلفة: أنت تدفع فقط مقابل ما تستخدمه.
  • الأداء: تضمن شبكة CDN العالمية الخاصة بـ Vercel أوقات تحميل سريعة للمستخدمين في جميع أنحاء العالم.
  • سهولة الاستخدام: يبسط Next.js و Vercel عملية التطوير والنشر.

خاتمة

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