تفاصيل مسارات API

إليك بعض المعلومات الأساسية التي يجب أن تعرفها حول مسارات API.

لا تستدعي مسار API من getStaticProps أو getStaticPaths

يجب ألا تستدعي مسار API من getStaticProps أو getStaticPaths. بدلاً من ذلك، اكتب كود الخادم مباشرة في getStaticProps أو getStaticPaths (أو استدع دالة مساعدة).

إليك السبب: تعمل الدالتان getStaticProps و getStaticPaths فقط على جانب الخادم ولن تعمل أبدًا على جانب العميل. علاوة على ذلك، لن يتم تضمين هذه الدوال في حزمة JS للمتصفح. هذا يعني أنه يمكنك كتابة كود مثل استعلامات قاعدة البيانات المباشرة دون إرسالها إلى المتصفحات. اقرأ وثائق كتابة كود جانب الخادم مباشرة لمعرفة المزيد.

حالة استخدام جيدة: معالجة إدخال النموذج

حالة استخدام جيدة لمسارات API هي معالجة إدخال النموذج. على سبيل المثال، يمكنك إنشاء نموذج في صفحتك وجعله يرسل طلب POST إلى مسار API الخاص بك. ثم يمكنك كتابة كود لحفظه مباشرة في قاعدة البيانات الخاصة بك. لن يكون كود مسار API جزءًا من حزمة العميل، لذا يمكنك كتابة كود جانب الخادم بأمان.

export default function handler(req, res) {
  const email = req.body.email;
  // ثم احفظ البريد الإلكتروني في قاعدة البيانات، إلخ...
}

وضع المعاينة

التوليد الثابت مفيد عندما تحصل صفحاتك على البيانات من نظام إدارة المحتوى (CMS). ومع ذلك، ليس مثاليًا عندما تكتب مسودة في نظام إدارة المحتوى الخاص بك وتريد معاينة المسودة فورًا في صفحتك. سترغب في أن يقوم Next.js بعرض هذه الصفحات في وقت الطلب بدلاً من وقت البناء وجلب محتوى المسودة بدلاً من المحتوى المنشور. سترغب في أن يتجاوز Next.js التوليد الثابت فقط لهذه الحالة المحددة.

يحتوي Next.js على ميزة تسمى وضع المعاينة لحل المشكلة المذكورة أعلاه، وتستخدم مسارات API. لمعرفة المزيد عنها، راجع وثائق وضع المعاينة الخاصة بنا.

مسارات API الديناميكية

يمكن أن تكون مسارات API ديناميكية، تمامًا مثل الصفحات العادية. ألق نظرة على وثائق مسارات API الديناميكية لمعرفة المزيد.

هذا كل شيء!

في الدرس الأساسي التالي والأخير، سنتحدث عن كيفية نشر تطبيق Next.js الخاص بك في بيئة الإنتاج.