الدليل النهائي لبناء واجهات برمجة التطبيقات باستخدام Next.js: مغامرة مليئة بالأمثلة

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

ما هو Next.js؟

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

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

قد تتساءل، لماذا ينبغي أن أستخدم Next.js لواجهات برمجة التطبيقات عندما توجد الكثير من الخيارات الأخرى؟ سؤال رائع! إليك بعض الأسباب المقنعة:

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

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

المرونة: يتيح لك Next.js استخدام مجموعة متنوعة من تقنيات الخادم الخلفي، بما في ذلك Node.js وExpress والمزيد. يمكنك اختيار الأدوات التي تناسب احتياجاتك أفضل.

متوافق مع تحسين محركات البحث: تم تصميم Next.js مع وضع تحسين محركات البحث في الاعتبار، مما يسهل اكتشاف واجهات برمجة التطبيقات الخاصة بك بواسطة محركات البحث.

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

لنبدأ بمشروع Next.js بسيط. إذا لم تكن قد قمت بذلك بالفعل، ستحتاج إلى تثبيت Node.js وnpm (أو yarn) على جهازك. بمجرد الانتهاء من ذلك، يمكنك إنشاء مشروع Next.js جديد عن طريق تشغيل الأمر التالي:

npx create-next-app my-nextjs-api

انتقل إلى دليل المشروع الخاص بك:

cd my-nextjs-api

الآن، لنبدأ في إنشاء أول طريق واجهة برمجة التطبيقات لدينا!

إنشاء أول طريق واجهة برمجة التطبيقات Next.js الخاص بك

في Next.js، يتم تخزين طرق واجهة برمجة التطبيقات في دليل pages/api. دعونا ننشئ طريق واجهة برمجة تطبيقات بسيطة تعيد قائمة بالمستخدمين. أنشئ ملفًا جديدًا يسمى users.js في دليل pages/api:

mkdir -p pages/api
touch pages/api/users.js

افتح users.js وأضف الكود التالي:

// pages/api/users.js

export default function handler(req, res) {
  const users = [
    { id: 1, name: 'جون دو' },
    { id: 2, name: 'جين دو' },
  ];

  res.status(200).json(users);
}

هذا الكود يحدد طريق واجهة برمجة تطبيقات أساسي يستجيب بقائمة من المستخدمين. تأخذ وظيفة handler قضيتين: req (كائن الطلب) وres (كائن الاستجابة). نستخدم res.status(200).json(users) لإرسال استجابة JSON مع رمز حالة 200 (موافق).

اختبار واجهة برمجة التطبيقات الخاصة بك

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

npm run dev

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

[
  { "id": 1, "name": "جون دو" },
  { "id": 2, "name": "جين دو" }
]

تقديم Apidog: رفيقك في تطوير واجهات برمجة التطبيقات

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

إليك كيفية استخدام Apidog لتعزيز سير العمل الخاص بك. Apidog يسمح لك باختبار واجهة برمجة التطبيقات الخاصة بك مباشرة ضمن الأداة. يمكنك إجراء طلبات GET وPOST وPUT وDELETE، ورؤية الاستجابات في الوقت الحقيقي.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: ابحث عن تفاصيل واجهة برمجة التطبيقات أو أدخلها يدويًا لطلب POST الذي تريد إجراؤه.

الخطوة 3: املأ المعلمات المطلوبة وأي بيانات تريد تضمينها في جسم الطلب.

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

لا تأخذ كلامنا فقط—قم بتنزيل Apidog مجانًا وتجربة الفرق بنفسك!

إضافة مزيد من التعقيد: معلمات الاستعلام

الآن بعد أن لدينا طريق واجهة برمجة تطبيقات أساسي، دعونا نضيف بعض التعقيد من خلال التعامل مع معلمات الاستعلام. دعنا نفترض أننا نريد تصفية قائمة المستخدمين بناءً على أسمائهم. يمكننا تحقيق ذلك من خلال تعديل ملف users.js لدينا:

// pages/api/users.js

export default function handler(req, res) {
  const { query } = req;
  const { name } = query;

  const users = [
    { id: 1, name: 'جون دو' },
    { id: 2, name: 'جين دو' },
  ];

  if (name) {
    const filteredUsers = users.filter(user => user.name.toLowerCase().includes(name.toLowerCase()));
    res.status(200).json(filteredUsers);
  } else {
    res.status(200).json(users);
  }
}

مع هذا التحديث، يمكن الآن لواجهة برمجة التطبيقات لدينا تصفية المستخدمين بناءً على معلمة الاستعلام name. على سبيل المثال، الانتقال إلى http://localhost:3000/api/users?name=john سيعيد:

[
  { "id": 1, "name": "جون دو" }
]

معالجة أساليب HTTP المختلفة

تحتاج واجهات برمجة التطبيقات غالبًا إلى التعامل مع أساليب HTTP المختلفة مثل GET وPOST وPUT وDELETE. دعونا نعدل ملف users.js لدينا لمعالجة طلبات POST لإضافة مستخدمين جدد:

// pages/api/users.js

let users = [
  { id: 1, name: 'جون دو' },
  { id: 2, name: 'جين دو' },
];

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      const newUser = { id: users.length + 1, name };
      users.push(newUser);
      res.status(201).json(newUser);
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`طريقة ${method} غير مسموح بها`);
  }
}

الآن، يمكن لواجهة برمجة التطبيقات لدينا معالجة كل من طلبات GET وPOST. لاختبار طلب POST، يمكنك استخدام أداة مثل Postman أو، الأفضل، Apidog. قم بإجراء طلب POST إلى http://localhost:3000/api/users مع جسم JSON:

{
  "name": "أليس سميث"
}

يجب أن تكون الاستجابة هي المستخدم الذي تم إنشاؤه حديثًا:

{
  "id": 3,
  "name": "أليس سميث"
}

معالجة الأخطاء في واجهات برمجة التطبيقات Next.js

تُعتبر معالجة الأخطاء بشكل جيد أمرًا حيويًا لأي واجهة برمجة تطبيقات. دعنا نعزز ملف users.js لدينا لتضمين معالجة الأخطاء للطلبات غير الصالحة:

// pages/api/users.js

let users = [
  { id: 1, name: 'جون دو' },
  { id: 2, name: 'جين دو' },
];

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      if (!name) {
        res.status(400).json({ error: 'الاسم مطلوب' });
      } else {
        const newUser = { id: users.length + 1, name };
        users.push(newUser);
        res.status(201).json(newUser);
      }
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`طريقة ${method} غير مسموح بها`);
  }
}

الآن، إذا حاولت إجراء طلب POST بدون خاصية name في الجسم، فستتلقى استجابة خطأ:

{
  "error": "الاسم مطلوب"
}

تأمين واجهة برمجة التطبيقات Next.js الخاصة بك

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

API_KEY=mysecretapikey

بعد ذلك، قم بتحديث ملف users.js لديك لإضافة مصادقة مفتاح واجهة برمجة التطبيقات:

// pages/api/users.js

let users = [
  { id: 1, name: 'جون دو' },
  { id: 2, name: 'جين دو' },
];

export default function handler(req, res) {
  const { method, headers } = req;
  const apiKey = headers['x-api-key'];

  if (apiKey !== process.env.API_KEY) {
    return res.status(401).json({ error: 'غير مصرح' });
  }

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      if (!name) {
        res.status(400).json({ error: 'الاسم مطلوب' });
      } else {
        const newUser = { id: users.length + 1, name };
        users.push(newUser);
        res.status(201).json(newUser);
      }
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`طريقة ${method} غير مسموح بها`);
  }
}

الآن، تتطلب طرق واجهة برمجة التطبيقات الخاصة بك مفتاح واجهة برمجة التطبيقات للمصادقة. قم بإدراج رأس x-api-key في طلباتك للوصول إلى واجهة برمجة التطبيقات:

{
  "x-api-key": "mysecretapikey"
}

الخاتمة

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

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