Magdy Atef Zahran

API Routes في Next.js

لو بتفكر تضيف Backend خفيف في مشروعك من غير وجع دماغ أو سيرفر خارجي يبقي الـ API Routes ف نيكست هي الخيار المناسب هتضيف Endpoints عشان تتعامل مع البيانات وال Requests وتبعت Responses مباشرة من المشروع… ف تعالي سوا يا صديقي نفهم اكتر عن ال API Routes في نيكست.

1ـ Building API Endpoints

أي ملف هتحطه جوا فولدر pages/api/ هيبقى أوتوماتيك Endpoint. يعني مثلاً لو عملت ملف اسمه hello.js هيبقى متاح في /api/hello.

مثال عملي:

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

لما تدوس على /api/hello هيرجعلك الرد اللي مكتوب فوق… الطريقة دي مفيدة لو محتاج تبني API سريع للـ Frontend.

2ـ Handling Requests and Responses

بتتعامل مع كل أنواع الـ HTTP Methods (GET, POST, PUT, DELETE…) بكل بساطة. الفكرة إنك بتحدد نوع الطلب وتعمل اللي محتاجه بناءً عليه.

مثال عملي:

export default function handler(req, res) { if (req.method === 'GET') { res.status(200).json({ message: 'This is a GET request!' }); } else if (req.method === 'POST') { const { name } = req.body; res.status(200).json({ message: `Hello, ${name}!` }); } else { res.status(405).json({ message: 'Method not allowed!' }); } }

هنا الكود بيتعامل مع أكتر من نوع طلب بناء على اللي اليوزر بيبعته.

3ـ Middleware and Custom Functions

لو عندك Logic بيتكرر زي التحقق من الـ Authentication أو Validating البيانات ممكن تكتبه كـ Middleware وتستخدمه في أكتر من Endpoint.

مثال عملي:

الفكرة هنا إنك تفصل الـ Logic بتاع التحقق وتستخدمه في أي مكان براحتك.

4ـ Working with External APIs

ممكن تستخدم API Routes كـ Proxy عشان تتعامل مع APIs خارجية. ده هيكون مفيد عشان تحمي الـ API Key أو تعمل Manipulation للبيانات قبل ما توصل للمستخدم.

مثال عملي:

export default async function handler(req, res) { const response = await fetch('https://api.example.com/data'); const data = await response.json(); res.status(200).json(data); }

كده اليوزر بتاعك هيدوس على /api/external وأنت اللي هتدير التفاصيل في الخلفية.