الهدف
بنهاية الدرس تقدر تشرح الـ request/response cycle بكلامك، تبني API route بسيطة في Next.js، وتشوف الـ JSON يرجع من السيرفر للبراوزر.
ليش هذا الحين؟
ترى كل app تبنيه يحتاج backend — حتى لو مو واضح. حسابات المستخدمين؟ backend. بيانات تحفظها؟ backend. منطق business اللي ما تبيه يشتغل في البراوزر؟ backend. لو ما تعرف شنو يصير على السيرفر، ما تقدر تصمّم app صح، وما تقدر تشرح لمطورك شنو تبي.
الفكرة
السيرفر = function بسيطة: input هو HTTP request، output هو HTTP response.
Client (browser) → HTTP Request → Server
Server → HTTP Response → Client (browser)
الـ request فيه:
- Method: GET (اقرأ) / POST (أضف) / PUT (عدّل) / DELETE (احذف)
- URL: الشي اللي تطلبه
- Headers: معلومات إضافية (توكن auth، نوع البيانات)
- Body: البيانات (في POST/PUT)
الـ response فيه:
- Status code: 200 (ناجح)، 201 (انضاف)، 404 (مو موجود)، 500 (خطأ في السيرفر)
- Headers: معلومات من السيرفر
- Body: البيانات اللي ترجع (عادة JSON)
Node.js + TypeScript: نفس لغة الـ frontend، ecosystem ضخم، يشتغل على كل سيرفر. Next.js يخليك تكتب backend و frontend في نفس المشروع — API routes تعيش جنب pages بدون إعداد منفصل.
Mental model: السيرفر مو سحر. هو كومبيوتر يشتغل 24/7 ينتظر requests. كل مرة تكتب URL في البراوزر أو تضغط زر — أنت ترسل request لسيرفر.