مسارات واجهة برمجة التطبيقات Next.js: أنماط تطوير الويب كاملة المكدس

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

ما هي مسارات واجهة برمجة تطبيقات Next.js؟

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

فكر فيها على أنها وظائف بدون خادم مصغرة تعيش داخل تطبيق Next.js الخاص بك. إنها تستجيب لطلبات HTTP مثل GET و POST و PUT و DELETE ويمكنها التفاعل مع قواعد البيانات وواجهات برمجة التطبيقات الخارجية وموارد أخرى من جانب الخادم. الأهم من ذلك، أنها تعمل فقط على الخادم، وليس في متصفح المستخدم، مما يضمن أمان البيانات الحساسة مثل مفاتيح واجهة برمجة التطبيقات.

الفوائد الرئيسية لمسارات واجهة برمجة التطبيقات

• تطوير مبسط: اكتب كود الواجهة الأمامية والخلفية داخل نفس المشروع.
• بنية بدون خادم: استخدم وظائف بدون خادم من أجل قابلية التوسع وكفاءة التكلفة.
• سهولة النشر: انشر الواجهة الأمامية والخلفية معًا باستخدام أمر واحد.
• تحسين الأداء: تعمل إمكانات العرض من جانب الخادم واسترجاع البيانات على تحسين سرعة التطبيق.
• أمان محسّن: تظل البيانات الحساسة على الخادم، محمية من التعرض من جانب العميل.

بدء استخدام مسارات واجهة برمجة التطبيقات

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

مثال: واجهة برمجة تطبيقات تحية بسيطة

فيما يلي مثال أساسي لمسار واجهة برمجة تطبيقات يُرجع استجابة JSON:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API Route!' });
}

يحدد هذا الرمز دالة غير متزامنة handler تتلقى وسيطتين:

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

تعين الدالة رمز حالة HTTP إلى 200 (موافق) وتُرجع استجابة JSON مع رسالة.

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

يمكنك التعامل مع طرق HTTP المختلفة (GET و POST و PUT و DELETE وما إلى ذلك) ضمن مسار واجهة برمجة التطبيقات الخاص بك عن طريق التحقق من الخاصية req.method. يتيح لك ذلك إنشاء واجهات برمجة تطبيقات RESTful بسهولة.

// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Fetch all todos from the database
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Create a new todo
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Handle unsupported methods
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

يوضح هذا المثال كيفية التعامل مع طلبات GET و POST لنقطة نهاية افتراضية /api/todos. يتضمن أيضًا معالجة الأخطاء للطرق غير المدعومة.

أنماط تطوير الويب كاملة المكدس باستخدام مسارات واجهة برمجة التطبيقات

تمكّن مسارات واجهة برمجة التطبيقات Next.js أنماطًا مختلفة لتطوير الويب كاملة المكدس. فيما يلي بعض حالات الاستخدام الشائعة:

1. جلب البيانات ومعالجتها

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

مثال: جلب بيانات المستخدم من قاعدة بيانات

// pages/api/users/[id].js
import { query } from '../../../lib/db';

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

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'User not found' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

يجلب هذا المثال بيانات المستخدم من قاعدة بيانات بناءً على معرف المستخدم المقدم في عنوان URL. إنه يستخدم مكتبة استعلام قاعدة البيانات (يُفترض أنها في lib/db) للتفاعل مع قاعدة البيانات. لاحظ استخدام الاستعلامات ذات المعلمات لمنع ثغرات حقن SQL.

2. المصادقة والترخيص

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

مثال: مصادقة المستخدم

// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

يصادق هذا المثال المستخدمين من خلال مقارنة كلمة المرور المقدمة بكلمة المرور المشفرة المخزنة في قاعدة البيانات. إذا كانت بيانات الاعتماد صالحة، فإنه ينشئ رمز JWT ويعيده إلى العميل. يمكن للعميل بعد ذلك استخدام هذا الرمز للمصادقة على الطلبات اللاحقة.

3. التعامل مع النماذج وإرسال البيانات

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

مثال: إرسال نموذج الاتصال

// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'New Contact Form Submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
      });

      res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

يعالج هذا المثال إرسال نموذج اتصال عن طريق إرسال بريد إلكتروني إلى المسؤول. يستخدم مكتبة إرسال البريد الإلكتروني (يُفترض أنها في lib/email) لإرسال البريد الإلكتروني. يجب عليك استبدال admin@example.com بعنوان البريد الإلكتروني للمستلم الفعلي.

4. ربطات الويب ومعالجة الأحداث

يمكن استخدام مسارات واجهة برمجة التطبيقات للتعامل مع ربطات الويب والاستجابة للأحداث من الخدمات الخارجية. يسمح لك ذلك بدمج تطبيق Next.js الخاص بك مع الأنظمة الأساسية الأخرى وأتمتة المهام.

مثال: التعامل مع ربط ويب Stripe

// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Disable default body parsing
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Webhook Error: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }

    // Handle the event
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
        // Then define and call a method to handle the successful payment intent.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Then define and call a method to handle the successful attachment of a PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Unexpected event type
        console.log(`Unhandled event type ${event.type}.`);
    }

    // Return a 200 response to acknowledge receipt of the event
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

يتعامل هذا المثال مع ربط ويب Stripe عن طريق التحقق من التوقيع ومعالجة بيانات الحدث. إنه يعطل محلل النص الافتراضي ويستخدم دالة مخزن مؤقت مخصصة لقراءة نص الطلب الأولي. من الضروري تعطيل محلل النص الافتراضي لأن Stripe تتطلب النص الأولي للتحقق من التوقيع. تذكر أن تقوم بتكوين نقطة نهاية ربط الويب Stripe في لوحة معلومات Stripe الخاصة بك وتعيين متغير بيئة STRIPE_WEBHOOK_SECRET.

أفضل الممارسات لمسارات واجهة برمجة التطبيقات

لضمان جودة مسارات واجهة برمجة التطبيقات لديك وقابليتها للصيانة، اتبع أفضل الممارسات هذه:

1. تقسيم التعليمات البرمجية الخاصة بك إلى وحدات

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

2. تنفيذ معالجة الأخطاء

تعامل مع الأخطاء بشكل صحيح في مسارات واجهة برمجة التطبيقات الخاصة بك. استخدم كتل try...catch لالتقاط الاستثناءات وإرجاع استجابات الخطأ المناسبة إلى العميل. سجل الأخطاء للمساعدة في تصحيح الأخطاء والمراقبة.

3. التحقق من صحة بيانات الإدخال

تحقق دائمًا من صحة بيانات الإدخال من العميل لمنع الثغرات الأمنية وضمان سلامة البيانات. استخدم مكتبات التحقق من الصحة مثل Joi أو Yup لتحديد مخططات التحقق من الصحة وإنفاذ قيود البيانات.

4. حماية البيانات الحساسة

قم بتخزين البيانات الحساسة، مثل مفاتيح واجهة برمجة التطبيقات وبيانات اعتماد قاعدة البيانات، في متغيرات البيئة. لا تقم أبدًا بإيداع البيانات الحساسة في مستودع التعليمات البرمجية الخاص بك.

5. تنفيذ تحديد المعدل

احمِ مسارات واجهة برمجة التطبيقات الخاصة بك من إساءة الاستخدام عن طريق تنفيذ تحديد المعدل. هذا يحد من عدد الطلبات التي يمكن للعميل تقديمها خلال فترة زمنية معينة. استخدم مكتبات تحديد المعدل مثل express-rate-limit أو limiter.

6. تأمين مفاتيح واجهة برمجة التطبيقات

لا تعرض مفاتيح واجهة برمجة التطبيقات مباشرةً في التعليمات البرمجية من جانب العميل. قم دائمًا بتمرير الطلبات من خلال مسارات واجهة برمجة التطبيقات الخاصة بك لحماية مفاتيح واجهة برمجة التطبيقات الخاصة بك من الوصول غير المصرح به. قم بتخزين مفاتيح واجهة برمجة التطبيقات بشكل آمن في متغيرات البيئة على الخادم الخاص بك.

7. استخدام متغيرات البيئة

تجنب ترميز قيم التكوين الثابت في التعليمات البرمجية الخاصة بك. بدلاً من ذلك، استخدم متغيرات البيئة لتخزين إعدادات التكوين. هذا يجعل من السهل إدارة تطبيقك في بيئات مختلفة (التطوير، التدريج، الإنتاج).

8. تسجيل الدخول والمراقبة

قم بتنفيذ تسجيل الدخول والمراقبة لتتبع أداء مسارات واجهة برمجة التطبيقات الخاصة بك. قم بتسجيل الأحداث المهمة، مثل الأخطاء والتحذيرات والطلبات الناجحة. استخدم أدوات المراقبة لتتبع المقاييس مثل زمن استجابة الطلب ومعدلات الأخطاء واستخدام الموارد. يمكن أن تكون خدمات مثل Sentry أو Datadog أو New Relic مفيدة.

اعتبارات النشر

تم تصميم مسارات واجهة برمجة تطبيقات Next.js ليتم نشرها على منصات بدون خادم. تشمل خيارات النشر الشائعة ما يلي:

• Vercel: Vercel هي النظام الأساسي الموصى به لنشر تطبيقات Next.js. إنه يوفر تكاملًا سلسًا مع Next.js ويحسن تطبيقك تلقائيًا لتحقيق الأداء.
• Netlify: Netlify هو نظام أساسي آخر شائع بدون خادم يدعم عمليات نشر Next.js. إنه يوفر ميزات مشابهة لـ Vercel، مثل عمليات النشر التلقائية وتكامل CDN.
• AWS Lambda: AWS Lambda هي خدمة حوسبة بدون خادم تتيح لك تشغيل التعليمات البرمجية دون توفير أو إدارة الخوادم. يمكنك نشر مسارات واجهة برمجة تطبيقات Next.js كوظائف Lambda باستخدام أدوات مثل Serverless Framework أو AWS SAM.
• Google Cloud Functions: Google Cloud Functions هي بيئة تنفيذ بدون خادم تتيح لك إنشاء خدمات سحابية وتوصيلها. يمكنك نشر مسارات واجهة برمجة تطبيقات Next.js كوظائف سحابية باستخدام أدوات مثل Firebase CLI أو Google Cloud SDK.
• Azure Functions: Azure Functions هي خدمة حوسبة بدون خادم تمكنك من تشغيل التعليمات البرمجية عند الطلب دون إدارة البنية التحتية. يمكنك نشر مسارات واجهة برمجة تطبيقات Next.js كوظائف Azure باستخدام أدوات مثل Azure Functions Core Tools أو Azure CLI.

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

الخلاصة

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

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

مزيد من التعلم

• وثائق مسارات واجهة برمجة تطبيقات Next.js
• وثائق Vercel
• وثائق وظائف Netlify
• وثائق AWS Lambda