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

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

Majd Muhtaseb13‏/06‏/20258 دقيقة

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

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

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

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

لنقم بإنشاء مسار API بسيط يعيد استجابة JSON:

1. قم بإنشاء ملف باسم pages/api/hello.js:

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

2. قم بتشغيل خادم تطوير Next.js الخاص بك:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   

3. قم بالوصول إلى مسار API في متصفحك على http://localhost:3000/api/hello. يجب أن ترى استجابة JSON:

   {
     "name": "John Doe"
   }
   

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

يمكنك التعامل مع طرق HTTP مختلفة (GET، POST، PUT، DELETE، إلخ) داخل مسار API الخاص بك باستخدام req.method:

export default function handler(req, res) {
  if (req.method === 'GET') {
    // التعامل مع طلب GET
    res.status(200).json({ message: 'تم استلام طلب GET' });
  } else if (req.method === 'POST') {
    // التعامل مع طلب POST
    const data = req.body;
    res.status(200).json({ message: 'تم استلام طلب POST', data });
  } else {
    // التعامل مع طرق أخرى
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

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

يمكنك الوصول إلى بيانات الطلب من خلال الكائن req:

• req.query: معلمات الاستعلام من عنوان URL.
• req.body: نص الطلب (لـ POST، PUT، إلخ).
• req.cookies: ملفات تعريف الارتباط المرسلة مع الطلب.
• req.headers: رؤوس الطلب.

مثال: قراءة معلمات الاستعلام

export default function handler(req, res) {
  const { name } = req.query;
  res.status(200).json({ greeting: `مرحبا، ${name}!` });
}

قم بالوصول إلى هذا المسار على http://localhost:3000/api/greet?name=Alice

نشر الدوال اللامخدمية

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

خاتمة

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