NahdaAIنهضة
Next.js • المستوى الثالث • الدرس 2

بناء واجهات البرمجة الخلفية (Route Handlers / route.js)

العودة لفهرس المستوى

أهداف الدرس العلمية

  • إنشاء ملفات route.js لبناء نقاط اتصال RESTful API.
  • التعامل مع أنواع الطلبات المختلفة مثل GET و POST.
  • إرجاع استجابات JSON بـ Response.json().
  • بناء API جاهز لتطبيقات الجوال والأطراف الخارجية.

1. ما هي الـ Route Handlers؟

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

bash
app/api/users/route.js   →   GET  /api/users
app/api/users/route.js   →   POST /api/users
app/api/posts/route.js   →   GET  /api/posts

2. أنواع الطلبات (HTTP Methods)

📥 GET

قراءة البيانات (لا تعدّل شيئاً).

📤 POST

إنشاء بيانات جديدة.

✏️ PUT/PATCH

تحديث بيانات موجودة.

🗑️ DELETE

حذف بيانات.

التطبيق العملي المباشر

تحدي الدرس الثاني: توسيع استجابة الـ API

قم بالتعديل على الكود في المحرر أدناه:

  1. أضف مستخدماً ثالثاً { id: 3, name: 'محمد' } إلى مصفوفة المستخدمين.
  2. أضف خاصية count: users.length إلى كائن الاستجابة ليعرض العدد الإجمالي.
  3. في المكوّن ApiPreview، أضف فقرة <p> تعرض: "عدد المستخدمين: [count]".
⏳ جارٍ تحميل المحرر التفاعلي...