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

إتقان الدوال اللامخدمية باستخدام مسارات API في Next.js

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

مقدمة

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

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

إذا لم يكن لديك بالفعل مشروع Next.js، فأنشئ واحدًا:

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

إنشاء مسار API الأول

توجد مسارات API في الدليل 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 الخاص بك

ابدأ خادم تطوير Next.js الخاص بك:

npm run dev

الآن، قم بزيارة http://localhost:3000/api/hello في متصفحك. يجب أن ترى استجابة JSON:

{
  "name": "John Doe"
}

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

يمكنك معالجة طرق HTTP المختلفة (GET و POST و PUT و DELETE وما إلى ذلك) داخل مسار API الخاص بك:

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:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe"}' http://localhost:3000/api/hello

قراءة نص الطلب

كما هو موضح في مثال POST أعلاه، يمكنك الوصول إلى نص الطلب باستخدام req.body. يقوم Next.js تلقائيًا بتحليل نصوص JSON. بالنسبة لأنواع المحتوى الأخرى، قد تحتاج إلى استخدام برنامج وسيط مثل body-parser الذي قد يخلق تعارضات، لذلك يُنصح باستخدام JSON.

نشر مسارات API الخاصة بك

عندما تقوم بنشر تطبيق Next.js الخاص بك على منصات مثل Vercel أو Netlify، يتم نشر مسارات API تلقائيًا كدوال لامخدمية. لا يلزم عادةً أي تكوين إضافي.

مثال: جلب البيانات من واجهة برمجة تطبيقات (API)

export default async function handler(req, res) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    res.status(200).json(data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'فشل في جلب البيانات' });
  }
}

خاتمة

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