اكتشف قوة Mongoose وكيف يمكنك استخدامه لإدارة البيانات لتطبيق ويب بسيط.

Next.js هو إطار عمل JavaScript كامل المكدس متعدد الاستخدامات مبني على React ، ويدعم ميزاته الرئيسية مثل JSX والمكونات والخطافات. تتضمن بعض ميزات Next.js الأساسية التوجيه المستند إلى الملفات و CSS في JS والعرض من جانب الخادم.

تتمثل إحدى الإمكانيات المهمة لـ Next.js في قدرته على الاندماج بسلاسة مع تقنيات الخلفية المختلفة مثل Mongoose ، مما يتيح لك إدارة البيانات بسهولة بكفاءة.

باستخدام Mongoose ، يمكنك بسهولة تحديد واجهة برمجة تطبيقات REST عالية الأداء من تطبيق Next.js لتخزين واسترداد البيانات من قاعدة بيانات MongoDB.

Next.js: إطار عمل JavaScript كامل المكدس

على عكس React ، يعتبر Next.js إطار عمل ويب متكامل لأنه يوفر حلاً كاملاً لبناء تطبيقات الويب المقدمة من جانب الخادم.

هذا لأنه يوفر ميزات تجعل من الممكن العمل على كل من الواجهة الأمامية والخلفية للتطبيق من دليل مشروع واحد. لا تحتاج بالضرورة إلى إعداد مجلد مشروع خلفي منفصل لتنفيذ وظائف جانب الخادم ، خاصة للتطبيقات صغيرة الحجم.

ومع ذلك ، بقدر ما يتعامل Next.js مع بعض الوظائف الخلفية ، لبناء تطبيقات واسعة النطاق ومتكاملة ، فقد ترغب في دمجها مع إطار عمل خلفية مخصص مثل Express.

instagram viewer

تتضمن بعض الميزات الأساسية التي تمنح Next.js إمكانياتها الكاملة ما يلي:

  • التقديم من جانب الخادم: يوفر Next.js دعمًا مضمنًا لإمكانيات العرض من جانب الخادم. يعني ذلك بشكل أساسي أنه بمجرد أن يرسل العميل طلبات HTTP إلى الخادم ، يقوم الخادم بمعالجة الطلبات والاستجابة بمحتوى HTML المطلوب لكل صفحة يتم عرضها على المتصفح.
  • التوجيه: يستخدم Next.js نظام توجيه مستندًا إلى الصفحة لتحديد المسارات المختلفة وإدارتها ، والتعامل مع مدخلات المستخدم ، وإنشاء صفحات ديناميكية دون الحاجة إلى الاعتماد على مكتبات الجهات الخارجية. بالإضافة إلى ذلك ، من السهل التوسع نظرًا لأن إضافة مسارات جديدة بسيطة مثل إضافة صفحة جديدة مثل about.js إلى دليل الصفحات.
  • نقاط نهاية API: يوفر Next.js دعمًا مدمجًا لإمكانيات جانب الخادم التي تُستخدم لإنشاء نقاط نهاية API التي تدير طلبات HTTP وتعيد البيانات. هذا يجعل من السهل إنشاء وظائف خلفية دون الحاجة إلى إعداد خادم منفصل باستخدام إطار عمل خلفية مخصص مثل Express. ومع ذلك ، من المهم ملاحظة أن Next.js هو في الأساس إطار عمل ويب أمامي.

قم بإعداد قاعدة بيانات MongoDB

للبدء، إنشاء قاعدة بيانات MongoDB. بدلاً من ذلك ، يمكنك إنشاء قاعدة بيانات MongoDB بسرعة عن طريق تكوين كتلة MongoDB في السحابة مجانًا. بمجرد الانتهاء من تشغيل قاعدة البيانات الخاصة بك ، انسخ سلسلة URI لاتصال قاعدة البيانات.

يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.

قم بإعداد مشروع Next.js

قم بإنشاء دليل لمشروع جديد و قرص مضغوط بداخله:

مشروع مكدير nextjs
مشروع cd nextjs

ثم قم بتثبيت Next.js:

npx create-next-app nextjs-mongodb

بمجرد اكتمال عملية التثبيت ، قم بتثبيت Mongoose كعنصر تبعية.

npm تثبيت النمس

أخيرًا ، في الدليل الجذر لمشروعك ، أنشئ ملف .env جديدًا لعقد سلسلة اتصال قاعدة البيانات.

NEXT_PUBLIC_MONGO_URI = "سلسلة اتصال قاعدة بيانات URI"

تكوين اتصال قاعدة البيانات

في ال src الدليل ، قم بإنشاء مجلد جديد وقم بتسميته المرافق. داخل هذا المجلد ، قم بإنشاء ملف جديد يسمى dbConfig.js وأضف إليها الكود التالي:

يستورد النمس من'النمس';
مقدار ثابت connectMongo = غير متزامن () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI) ،
يصدّرتقصير connectMongo.

تحديد نماذج البيانات

تحدد نماذج البيانات هيكل البيانات التي سيتم تخزينها ، بما في ذلك أنواع البيانات والعلاقات بين البيانات.

يقوم MongoDB بتخزين البيانات في مستندات تشبه JSON نظرًا لأنه ملف قاعدة بيانات NoSQL. يوفر Mongoose طريقة لتحديد كيفية تخزين البيانات من عملاء Next.js والوصول إليها من قاعدة البيانات.

في دليل src ، أنشئ مجلدًا جديدًا واسمًا في النماذج. داخل هذا المجلد ، قم بإنشاء ملف جديد يسمى userModel.js ، وأضف الرمز أدناه:

يستورد {مخطط ، نموذج ، نماذج} من'النمس';
مقدار ثابت userSchema = جديد مخطط({
 اسم: خيط,
 بريد إلكتروني: {
 يكتب: خيط,
 مطلوب: حقيقي,
 فريد: حقيقي,
 },
});


مقدار ثابت المستخدم = النماذج. المستخدم || نموذج('مستخدم'، userSchema) ؛
يصدّرتقصير مستخدم؛

قم بإنشاء نقاط نهاية API

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

بمجرد تحديد مسارات API داخل دليل pages / api ، يُنشئ Next.js نقاط نهاية API لكل ملف من الملفات في هذا الدليل. على سبيل المثال ، إذا قمت بإنشاء userV1 / user.js ، فسيقوم Next.js بإنشاء نقطة نهاية يمكن الوصول إليها في http://localhost: 3000 / api / userV1 / مستخدم.

داخل الصفحات / api، قم بإنشاء مجلد جديد وقم بتسميته userV1. داخل هذا المجلد ، قم بإنشاء ملف جديد يسمى user.js، وأضف الرمز أدناه:

يستورد connectMongo من"../../../utils/dbConfig";
يستورد مستخدم من"../../../models/userModel";
/**
 *param {يستورد('التالي') .NextApiRequest} مطلوب
 *param {يستورد('التالي') .NextApiResponse} الدقة
 */
يصدّرتقصيرغير متزامنوظيفةuserAPI(مطلوب ، الدقة) {
يحاول {
وحدة التحكم.سجل("الاتصال بمونغو");
انتظر connectMongo () ،
وحدة التحكم.سجل(`` متصلون بـ MONGO ");
لو (مطلوب طريقة 'بريد') {
وحدة التحكم.سجل("إنشاء الوثيقة");
مقدار ثابت CreatUser = انتظر User.create (req.body) ؛
وحدة التحكم.سجل("الوثيقة التي تم إنشاؤها");
 res.json ({createdUser}) ؛
 } آخرلو (مطلوب طريقة 'يحصل') {
وحدة التحكم.سجل("جلب المستندات");
مقدار ثابت fetchedUsers = انتظر User.find ({}) ،
وحدة التحكم.سجل("المستندات التي تم جلبها");
 res.json ({fetchedUsers}) ؛
 } آخر {
يرميجديدخطأ(`طريقة HTTP غير مدعومة: $ {req.method}`);
 }
 } يمسك (خطأ) {
وحدة التحكم.log (خطأ) ؛
 res.json ({error}) ؛
 }
}

ينفذ هذا الرمز نقطة نهاية API لتخزين وجلب بيانات المستخدم من قاعدة بيانات MongoDB. يحدد أ userAPI دالة تأخذ معلمتين: مطلوب و الدقة. هذه تمثل طلب HTTP الوارد واستجابة HTTP الصادرة ، على التوالي.

داخل الوظيفة ، يتصل الرمز بقاعدة بيانات MongoDB ويتحقق من طريقة HTTP للطلب الوارد.

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

استهلاك نقاط نهاية API

أضف الكود أدناه إلى الصفحات / index.js ملف:

  • قم بإجراء طلب POST إلى نقطة نهاية API لتخزين البيانات في قاعدة البيانات.
    يستورد الأنماط من"@ / styles / Home.module.css";
    يستورد {useState} من'تتفاعل';
    يصدّرتقصيروظيفةبيت() {
    مقدار ثابت [name، setName] = useState ('');
    مقدار ثابت [email، setEmail] = useState ('');
    مقدار ثابت [usersResults، setUsersResults] = useState ([]) ؛
    

    مقدار ثابت createUser = غير متزامن () => {
    يحاول {
    مقدار ثابت CreatUser = انتظر أحضر("/ api / userV1 / المستخدم", {
     طريقة: 'بريد',
     الرؤوس: {
    'نوع المحتوى': "التطبيق / json",
     },
     جسم: جسون.stringify ({
     اسم،
     بريد إلكتروني،
     }),
     }).ثم((الدقة) => res.json ()) ؛
    وحدة التحكم.سجل("الوثيقة التي تم إنشاؤها");
    

     اسم مجموعة('');
     تعيين البريد الإلكتروني ('');
    وحدة التحكم.log (createdUser) ؛
     } يمسك (خطأ) {
    وحدة التحكم.log (خطأ) ؛
     }
     };
  • حدد وظيفة لجلب بيانات المستخدم عن طريق إجراء طلبات HTTP إلى نقطة نهاية GET.
    مقدار ثابت displayUsers = غير متزامن () => {
    يحاول {
    وحدة التحكم.سجل("جلب المستندات");
    مقدار ثابت fetchedUsers = انتظر أحضر("/ api / userV1 / المستخدم").ثم((الدقة) =>
     res.json ()
     );
    وحدة التحكم.سجل("المستندات التي تم جلبها");

     setUsersResults (fetchedUsers) ،
    وحدة التحكم.log (usersResults)

     } يمسك (خطأ) {
    وحدة التحكم.log (خطأ) ؛
     }
     };
  • أخيرًا ، قم بعرض عنصر نموذج مع حقول إدخال النص وإرسال أزرار بيانات المستخدم وعرضها.
    يعود (
     <>

أخيرًا ، امض قدمًا وقم بتدوير خادم التطوير لتحديث التغييرات والانتقال إلى http://localhost: 3000 في متصفحك.

npm تشغيل dev

استخدام Next.js في التطبيقات

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

على الرغم من أنه إطار عمل قوي من جانب العميل في المقام الأول ، إلا أنه يمكنك أيضًا الاستفادة من إمكاناته من جانب الخادم لتدوير خدمة خلفية بسرعة.