بناء تطبيق React بدون خادم باستخدام Next.js و Vercel: دليل خطوة بخطوة

Majd Muhtaseb27‏/09‏/202510 دقيقة

مقدمة

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

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

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

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

استخدم create-next-app لإنشاء مشروعك:

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

ينشئ هذا تطبيق Next.js أساسي في دليل اسمه my-serverless-app.

الخطوة 2: تطوير تطبيقك

قم بتعديل الملف pages/index.js (أو أي صفحة أخرى) لإنشاء واجهة المستخدم التي تريدها. على سبيل المثال:

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

export default HomePage;

يمكنك إضافة مكونات ومسارات API (pages/api) وأي ميزات Next.js أخرى حسب الحاجة.

الخطوة 3: إنشاء مسار API (اختياري)

لننشئ مسار API بسيطًا لجلب البيانات. قم بإنشاء ملف pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'مرحبًا من واجهة برمجة التطبيقات!' });
}

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

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

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

ثم قم بتثبيت Vercel CLI:

npm install -g vercel

الآن، قم بتشغيل الأمر التالي في دليل مشروعك:

vercel

سيكتشف Vercel تلقائيًا مشروع Next.js الخاص بك ويرشدك خلال عملية النشر. سيُطلب منك ربط مشروعك بحساب Vercel الخاص بك ومستودع Git.

بدلاً من ذلك، يمكنك استيراد مشروعك مباشرة من موفر Git الخاص بك عبر لوحة معلومات Vercel.

الخطوة 5: التحقق من النشر

بمجرد النشر، سيوفر Vercel عنوان URL لتطبيقك المباشر. قم بزيارة عنوان URL للتحقق من أن تطبيقك يعمل بشكل صحيح.

خاتمة

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