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

Majd Muhtaseb03‏/05‏/202512 دقيقة

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

مقدمة

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

ما هي الخادمية؟

تتيح لك الحوسبة الخادمية تشغيل كود تطبيقك دون إدارة الخوادم. يتولى موفرو الخدمات السحابية مثل AWS و Vercel البنية التحتية الأساسية، مما يسمح لك بالتركيز فقط على منطق التطبيق الخاص بك. ينتج عن ذلك توفير في التكاليف، وتحسين قابلية التوسع، وتقليل النفقات التشغيلية.

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

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

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

يقوم هذا الأمر بتهيئة مشروع Next.js جديد مع جميع التكوينات الضرورية.

إنشاء مسار API بسيط

يسهل Next.js بشكل لا يصدق إنشاء مسارات API داخل تطبيقك. قم بإنشاء ملف باسم pages/api/hello.js بالمحتوى التالي:

export default function handler(req, res) {
  res.status(200).json({ name: 'مرحباً بالعالم!' })
}

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

النشر على Vercel

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

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

سيرشدك Vercel خلال عملية النشر، ويطالبك بربط مشروعك بحساب Vercel الخاص بك. ثم يقوم ببناء ونشر تطبيق Next.js الخاص بك إلى بيئة خادمية.

فهم الدوال الخادمية في Next.js

يتم نشر مسارات API في Next.js تلقائيًا كوظائف خادمية. عندما يطلب المستخدم نقطة نهاية API، يقوم Vercel أو المزود الذي اخترته بتنفيذ الوظيفة المقابلة. هذه الوظائف عابرة، مما يعني أنها تعمل فقط عندما يتم تشغيلها بواسطة حدث، مثل طلب HTTP.

جلب البيانات في بيئة خادمية

يمكنك جلب البيانات من واجهات برمجة التطبيقات الخارجية أو قواعد البيانات داخل وظائفك الخادمية. على سبيل المثال، لنجلب البيانات من واجهة برمجة تطبيقات عامة:

// pages/api/todos.js
export default async function handler(req, res) {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const data = await response.json();
  res.status(200).json(data);
}

تسترجع نقطة النهاية هذه قائمة مهام من واجهة برمجة تطبيقات JSONPlaceholder وتعيدها كاستجابة JSON.

خاتمة

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