أزاى تبني API فى Next.js بطريقة بسيطة جدًا

[x32x01]

إزاي تبني API في Next.js بطريقة بسيطة جدًا ​

بص، لو بتعمل مشروع على Next.js ومحتاج API غالبا هتفكر إنك لازم تبني سيرفر خارجي ب Express أو أي framework تاني. لكن الموضوع أسهل بكتير من كده Next.js فيه ميزة اسمها API Routes بتخليك تبني API من غير ما تخرج من المشروع بتاعك. ودي ميزة جامدة جدا لو عايز تبني حاجة سريعة وفي نفس الوقت تشتغل بكفاءة عالية.

إيه هي API Routes دي؟​

ببساطة، دي عبارة عن صفحات بترد على ال Requests اللي بتيجيلها زي الـ GET أو POST فبدل ما تعمل سيرفر مستقل تقدر بسهولة تعمل كل ده في مشروع Next.js اللي انتا شغال فيه.

نبدأ بقى واحدة واحدة:

1. أول خطوة: هتنشئ ملف الـ API​

هتيجي عند مجلد pages/ وتعمل مجلد جديد اسمه api/. ده المكان اللي هتحط فيه كل الـ API Endpoints بتاعتك. لو مثلًا عايز تعمل API يجيب بيانات مستخدم، هتعمل ملف اسمه user.js جوا api/ ...... زي كده:

// pages/api/user.js
export default function handler(req, res) {
  res.status(200).json({ name: 'Ahmed', age: 30 });
}

لو رحت دلوقتي على /api/user في المتصفح هتلاقي الرد جاي لك بشكل ده:

{
  "name": "Ahmed",
  "age": 30
}

اظن مفيش ابسط من كده

2. طيب لو عايز تعمل POST Request؟​

تقدر تتعامل مع كل أنواع الـ HTTP Methods يعني مثلا لو عايز تعمل API يقبل بيانات باستخدام POST، هتكتب حاجة زي كده:

// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, age } = req.body;
    res.status(200).json({ message: `استقبلنا بياناتك: ${name}, ${age}` });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }

في المثال ده، بنستخدم POST عشان نبعت بيانات جديدة ولو حد جرب يبعت حاجة بـ Method تانية غير الـ POST، هيرجع له رسالة error.

3. طيب إيه الحاجات اللي هتفيدنا اللي ممكن تعملها بالـ API Routes؟​

مثلا تستخدم الـ Middlewares. دي بتكون شوية خطوات أو إجراءات بتتحط قبل ما ترجع الرد زي مثلا تتحقق من صلاحيات الشخص اللي بيطلب البيانات Authentication أو إنك تسجل الـ Logs بتاعة الـ Requests اللي جاية.
بص معايا على المثال ده:

// pages/api/user.js
export default function handler(req, res) {
  console.log(`Request Method: ${req.method}`);
  if (req.method === 'GET') {
    res.status(200).json({ name: 'Ahmed', age: 30 });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

هنا بقى بنسجل الـ Request اللي بييجي في الـ console وبعد كده بنشوف لو هو GET بنرجع بيانات المستخدم لو غير كده بنرجع error.

طيب ليه بقى يا معلم تعمل API Routes في Next.js؟​

- لان مفيش تعقيدات كل حاجة جوا المشروع, يعني تقدر تبني API وانت شغال على الـ Frontend.
- كمان تقدر تعمل API Calls جوا المشروع, الموضوع كله seamless.
- والحاجه الاهم Next.js بتدعم الـ Serverless Functions وده بيخلي كل حاجة أسرع وده بيعود علينا بأداء أفضل في التصفح.
لو عندك أي سؤال أو محتاج توضيح، اكتبلي في الكومنتات.