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/posts2. أنواع الطلبات (HTTP Methods)
📥 GET
قراءة البيانات (لا تعدّل شيئاً).
📤 POST
إنشاء بيانات جديدة.
✏️ PUT/PATCH
تحديث بيانات موجودة.
🗑️ DELETE
حذف بيانات.
التطبيق العملي المباشر
تحدي الدرس الثاني: توسيع استجابة الـ API
قم بالتعديل على الكود في المحرر أدناه:
- أضف مستخدماً ثالثاً
{ id: 3, name: 'محمد' }إلى مصفوفة المستخدمين. - أضف خاصية
count: users.lengthإلى كائن الاستجابة ليعرض العدد الإجمالي. - في المكوّن
ApiPreview، أضف فقرة<p>تعرض: "عدد المستخدمين: [count]".
⏳ جارٍ تحميل المحرر التفاعلي...