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

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

Majd Muhtaseb28‏/04‏/20257 دقيقة

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

ما هي مسارات API في Next.js؟

مسارات API هي دوال محددة في الدليل pages/api لمشروع Next.js الخاص بك. عند نشر تطبيق Next.js الخاص بك ، يتم نشر هذه الدوال تلقائيًا كدوال عديمة الخادم (عادةً على AWS Lambda أو Vercel Functions أو ما شابه ذلك). يمكنهم معالجة طلبات HTTP (GET ، POST ، PUT ، DELETE ، إلخ) وإرجاع الاستجابات.

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

1. قم بإنشاء ملف في pages/api ، على سبيل المثال ، pages/api/hello.js.
2. أضف الكود التالي:

export default function handler(req, res) {
  res.status(200).json({ name: 'Hello, world!' })
}

ترد هذه الدالة البسيطة بكائن JSON يحتوي على الرسالة "Hello, world!".

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

يمكنك التعامل مع طرق HTTP المختلفة داخل نفس مسار API باستخدام الخاصية req.method.

export default function handler(req, res) {
  if (req.method === 'GET') {
    // احصل على البيانات من مصدر البيانات الخاص بك
    res.status(200).json({ message: 'تم جلب البيانات' });
  } else if (req.method === 'POST') {
    // إنشاء أو تحديث البيانات
    const body = req.body;
    res.status(201).json({ message: 'تم إنشاء البيانات', data: body });
  } else {
    res.status(405).json({ message: 'الطريقة غير مسموح بها' });
  }
}

قراءة نص الطلب ومعلمات الاستعلام

للوصول إلى البيانات المرسلة في نص الطلب (على سبيل المثال ، من طلب POST) ، استخدم req.body. للوصول إلى معلمات الاستعلام في عنوان URL (على سبيل المثال ، /api/users?id=123) ، استخدم req.query.

export default function handler(req, res) {
  const { id } = req.query;
  const data = req.body;

  console.log("معرف معلمة الاستعلام:", id);
  console.log("نص الطلب:", data);

  res.status(200).json({ id, data });
}

مثال: جلب البيانات من 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 الخاص بك.
• تطوير كامل المكدس: تطوير واجهة أمامية ومنطق الواجهة الخلفية في نفس المشروع.

خاتمة

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