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

وظائف Serverless مع Next.js: الدليل النهائي

Majd Muhtaseb15‏/07‏/20258 دقيقة

مقدمة

يوفر Next.js طريقة قوية لإنشاء تطبيقات كاملة المكدس (full-stack) باستخدام وظائف serverless (المعروفة أيضًا باسم مسارات API). تتيح لك هذه الوظائف التعامل مع منطق الواجهة الخلفية مباشرةً داخل مشروع Next.js الخاص بك دون تعقيدات إدارة خادم تقليدي. سيرشدك هذا الدليل خلال إنشاء ونشر وفهم وظائف serverless في Next.js.

إنشاء وظيفة Serverless

توضع وظائف Serverless في Next.js داخل الدليل pages/api. يصبح كل ملف في هذا الدليل نقطة نهاية API. لننشئ نقطة نهاية بسيطة تُرجع استجابة JSON.

أنشئ ملفًا باسم pages/api/hello.js:

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

تأخذ هذه الوظيفة وسيطتين:

• req: مثيل لـ http.IncomingMessage، بالإضافة إلى بعض البرامج الوسيطة المبنية مسبقًا.
• res: مثيل لـ http.ServerResponse، بالإضافة إلى بعض الوظائف المساعدة.

يمكنك الوصول إلى نقطة النهاية هذه من خلال الانتقال إلى /api/hello في متصفحك.

التعامل مع طرق HTTP المختلفة

يمكنك التعامل مع طرق HTTP المختلفة (GET، POST، PUT، DELETE، إلخ) داخل وظائف serverless الخاصة بك.

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'هذا طلب GET' })
  } else if (req.method === 'POST') {
    const body = req.body;
    res.status(200).json({ message: 'هذا طلب POST', data: body })
  } else {
    res.status(405).json({ message: 'الطريقة غير مسموح بها' })
  }
}

لاختبار طلب POST، يمكنك استخدام أدوات مثل curl أو Postman.

الوصول إلى بيانات الطلب

يمكنك الوصول إلى البيانات المرسلة في نص الطلب باستخدام req.body. بالنسبة لطلبات GET، يمكنك الوصول إلى معلمات الاستعلام باستخدام req.query.

export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ id: id })
}

يمكنك الوصول إلى نقطة النهاية هذه باستخدام معلمة استعلام مثل /api/myapi?id=123.

نشر وظائف Serverless

عند نشر تطبيق Next.js الخاص بك على منصات مثل Vercel أو Netlify، يتم نشر الملفات الموجودة داخل الدليل pages/api تلقائيًا كوظائف serverless. لست بحاجة إلى تكوين أي بنية أساسية إضافية.

مثال: القراءة من قاعدة بيانات (مع تحذير)

على الرغم من أنه يمكنك الاتصال بقاعدة بيانات مباشرةً من وظيفة serverless، إلا أنه غالبًا ما لا يُنصح بذلك للإنتاج نظرًا لوقت الاستجابة المحتمل للبدء البارد (cold start) وحدود اتصال قاعدة البيانات. بدلاً من ذلك، ضع في اعتبارك استخدام خدمة خلفية مخصصة أو نظام أساسي لقاعدة البيانات مُحسّن لبيئات serverless.

ومع ذلك، لأغراض العرض التوضيحي:

// لا تفعل هذا في الإنتاج بدون تجميع اتصال مناسب
// وتحسين قاعدة البيانات
export default async function handler(req, res) {
  // محاكاة استعلام قاعدة البيانات (استبدل بمكالمة قاعدة بيانات فعلية)
  await new Promise(resolve => setTimeout(resolve, 500)); // محاكاة الكمون
  const data = { message: "بيانات من قاعدة البيانات" };
  res.status(200).json(data);
}

خاتمة

توفر وظائف Serverless في Next.js طريقة مريحة وقابلة للتطوير لإنشاء منطق خلفي لتطبيقاتك. من خلال فهم كيفية إنشاء هذه الوظائف ومعالجة الطلبات ونشرها، يمكنك الاستفادة من قوة الحوسبة serverless دون العبء التشغيلي. تذكر تحسين اتصالات قاعدة البيانات والنظر في بدائل لبيئات الإنتاج.