Mongoose की शक्ति का पता लगाएं और एक साधारण वेब ऐप के लिए डेटा को प्रबंधित करने के लिए आप इसका उपयोग कैसे कर सकते हैं।

Next.js एक बहुमुखी फुल-स्टैक जावास्क्रिप्ट फ्रेमवर्क है जो रिएक्ट के शीर्ष पर बनाया गया है, जो JSX, कंपोनेंट्स और हुक जैसी इसकी मुख्य विशेषताओं का समर्थन करता है। Next.js की कुछ मुख्य विशेषताओं में फ़ाइल-आधारित रूटिंग, JS में CSS और सर्वर-साइड रेंडरिंग शामिल हैं।

नेक्स्ट.जेएस की एक महत्वपूर्ण क्षमता मोंगोज़ जैसी विभिन्न बैकएंड तकनीकों के साथ निर्बाध रूप से एकीकृत करने की इसकी क्षमता है, जिससे आप आसानी से डेटा को कुशलतापूर्वक प्रबंधित कर सकते हैं।

Mongoose के साथ, आप MongoDB डेटाबेस से डेटा को स्टोर और पुनर्प्राप्त करने के लिए Next.js एप्लिकेशन से एक प्रदर्शनकारी REST API को आसानी से परिभाषित कर सकते हैं।

Next.js: एक फुल-स्टैक जावास्क्रिप्ट फ्रेमवर्क

रिएक्ट के विपरीत, नेक्स्ट.जेएस को फुल-स्टैक वेब फ्रेमवर्क माना जाता है क्योंकि यह सर्वर-साइड रेंडर किए गए वेब एप्लिकेशन के निर्माण के लिए एक पूर्ण समाधान प्रदान करता है।

ऐसा इसलिए है क्योंकि यह ऐसी सुविधाएँ प्रदान करता है जो किसी एकल प्रोजेक्ट डायरेक्टरी से किसी एप्लिकेशन के फ्रंट-एंड और बैक-एंड दोनों पर काम करना संभव बनाती हैं। विशेष रूप से छोटे पैमाने के अनुप्रयोगों के लिए सर्वर-साइड कार्यक्षमता को लागू करने के लिए आपको एक अलग बैक-एंड प्रोजेक्ट फ़ोल्डर स्थापित करने की आवश्यकता नहीं है।

हालाँकि, बड़े पैमाने पर, पूर्ण-स्टैक अनुप्रयोगों के निर्माण के लिए Next.js कुछ बैक-एंड कार्यक्षमता को संभालता है, आप इसे एक्सप्रेस जैसे समर्पित बैकएंड फ्रेमवर्क के साथ संयोजित करना चाह सकते हैं।

कुछ प्रमुख विशेषताएँ जो Next.js को इसकी फुल-स्टैक क्षमताएँ प्रदान करती हैं, उनमें शामिल हैं:

  • सर्वर-साइड रेंडरिंग: Next.js सर्वर-साइड रेंडरिंग क्षमताओं के लिए बिल्ट-इन सपोर्ट प्रदान करता है। अनिवार्य रूप से इसका मतलब है, एक बार क्लाइंट सर्वर पर HTTP अनुरोध भेजता है, सर्वर अनुरोधों को संसाधित करता है और ब्राउज़र पर प्रस्तुत किए जाने वाले प्रत्येक पृष्ठ के लिए आवश्यक HTML सामग्री के साथ प्रतिक्रिया करता है।
  • रूटिंग: Next.js विभिन्न मार्गों को परिभाषित और प्रबंधित करने, उपयोगकर्ता इनपुट को संभालने और तीसरे पक्ष के पुस्तकालयों पर भरोसा किए बिना गतिशील पेज बनाने के लिए पेज-आधारित रूटिंग सिस्टम का उपयोग करता है। इसके अतिरिक्त, इसका विस्तार करना आसान है, क्योंकि नए मार्गों को जोड़ना उतना ही सरल है जितना कि पृष्ठों की निर्देशिका में एक नया पृष्ठ जोड़ना, जैसे कि about.js।
  • एपीआई एंडपॉइंट्स: नेक्स्ट.जेएस सर्वर-साइड क्षमताओं के लिए बिल्ट-इन सपोर्ट प्रदान करता है जिसका उपयोग एपीआई एंडपॉइंट्स बनाने के लिए किया जाता है जो HTTP अनुरोधों को प्रबंधित करते हैं और डेटा लौटाते हैं। यह एक्सप्रेस जैसे समर्पित बैकएंड फ्रेमवर्क का उपयोग करके एक अलग सर्वर स्थापित किए बिना बैक-एंड कार्यक्षमता का निर्माण करना आसान बनाता है। हालाँकि, यह नोट करना महत्वपूर्ण है कि Next.js मुख्य रूप से एक फ्रंट-एंड वेब फ्रेमवर्क है।

एक मोंगोडीबी डाटाबेस सेट अप करें

प्रारंभ करना, एक MongoDB डेटाबेस सेट अप करें. वैकल्पिक रूप से, आप मोंगोडीबी डेटाबेस को जल्दी से स्पिन कर सकते हैं क्लाउड में MongoDB क्लस्टर को मुफ्त में कॉन्फ़िगर करना. एक बार जब आपका डेटाबेस तैयार हो जाए और चल रहा हो, तो डेटाबेस कनेक्शन यूआरआई स्ट्रिंग की प्रतिलिपि बनाएँ।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

नेक्स्ट.जेएस प्रोजेक्ट सेट अप करें

एक नई परियोजना के लिए एक निर्देशिका बनाएँ और सीडी यह में:

एमकेडीआईआर नेक्स्टजेएस-प्रोजेक्ट
सीडी नेक्स्टजेएस-प्रोजेक्ट

फिर Next.js इंस्टॉल करें:

एनपीएक्स क्रिएट-नेक्स्ट-ऐप नेक्स्टजेएस-मोंगोडब

एक बार स्थापना प्रक्रिया पूरी हो जाने के बाद, Mongoose को एक निर्भरता के रूप में स्थापित करें।

एनपीएम नेवला स्थापित करें

अंत में, अपने प्रोजेक्ट की रूट डायरेक्टरी में, अपने डेटाबेस कनेक्शन स्ट्रिंग को होल्ड करने के लिए एक नई .env फ़ाइल बनाएँ।

NEXT_PUBLIC_MONGO_URI = "डेटाबेस यूआरआई कनेक्शन स्ट्रिंग"

डेटाबेस कनेक्शन कॉन्फ़िगर करें

में स्रोत निर्देशिका, एक नया फ़ोल्डर बनाएँ और इसे नाम दें बर्तन. इस फोल्डर के अंदर एक नई फाइल बनाएं जिसका नाम है dbConfig.js और इसमें निम्न कोड जोड़ें:

आयात नेवला सेनेवला;
कॉन्स्ट कनेक्टमोंगो = async () => नेवला.कनेक्ट (प्रक्रिया.env. NEXT_PUBLIC_MONGO_URI);
निर्यातगलती करना कनेक्टमोंगो;

डेटा मॉडल को परिभाषित करें

डेटा मॉडल डेटा के प्रकार और डेटा के बीच संबंधों सहित संग्रहीत किए जाने वाले डेटा की संरचना को परिभाषित करते हैं।

MongoDB डेटा को JSON जैसे दस्तावेज़ों में संग्रहीत करता है क्योंकि यह एक है नोएसक्यूएल डेटाबेस. Mongoose परिभाषित करने का एक तरीका प्रदान करता है कि Next.js क्लाइंट के डेटा को डेटाबेस से कैसे संग्रहीत और एक्सेस किया जाना चाहिए।

src निर्देशिका में, मॉडल में एक नया फ़ोल्डर और नाम बनाएँ। इस फोल्डर के अंदर एक नई फाइल बनाएं जिसका नाम है userModel.js, और नीचे कोड जोड़ें:

आयात {स्कीमा, मॉडल, मॉडल} सेनेवला;
कॉन्स्ट उपयोगकर्ता स्कीमा = नया स्कीमा({
 नाम: डोरी,
 ईमेल: {
 प्रकार: डोरी,
 आवश्यक: सत्य,
 अद्वितीय: सत्य,
 },
});


कॉन्स्ट उपयोगकर्ता = मॉडल। उपयोगकर्ता || नमूना('उपयोगकर्ता', यूजरस्केमा);
निर्यातगलती करना उपयोगकर्ता;

एपीआई एंडपॉइंट बनाएं

अन्य फ्रंट-एंड फ्रेमवर्क के विपरीत, नेक्स्ट.जेएस एपीआई प्रबंधन के लिए अंतर्निहित समर्थन प्रदान करता है। यह एपीआई बनाने की प्रक्रिया को सरल करता है क्योंकि आप उन्हें एक अलग सर्वर स्थापित करने के बजाय सीधे नेक्स्ट.जेएस प्रोजेक्ट में परिभाषित कर सकते हैं।

एक बार जब आप पृष्ठों/एपीआई निर्देशिका के अंदर एपीआई मार्गों को परिभाषित कर लेते हैं, तो नेक्स्ट.जेएस इस निर्देशिका में प्रत्येक फाइल के लिए एपीआई एंडपॉइंट उत्पन्न करता है। उदाहरण के लिए, यदि आप userV1/user.js बनाते हैं, तो Next.js एक समापन बिंदु बना देगा जिस पर पहुँचा जा सकता है http://localhost: 3000/एपीआई/यूजरवी1/यूजर.

के अंदर पेज/एपीआई, एक नया फ़ोल्डर बनाएँ और इसे userV1 नाम दें। इस फोल्डर के अंदर एक नई फाइल बनाएं जिसका नाम है उपयोगकर्ता.जेएस, और नीचे कोड जोड़ें:

आयात connectMongo से'../../../utils/dbConfig';
आयात उपयोगकर्ता से'../../../models/userModel';
/**
 * @पारम {आयात('अगला'.NextApiRequest} अनुरोध
 * @पारम {आयात('अगला'.NextApiResponse} रेस
 */
निर्यातगलती करनाasyncसमारोहuserAPI(अनुरोध, Res) {
कोशिश {
सांत्वना देना।लकड़ी का लट्ठा('मोंगो से कनेक्ट');
इंतजार कनेक्टमोंगो ();
सांत्वना देना।लकड़ी का लट्ठा('मोंगो से जुड़ा');
अगर (अनुरोध विधि 'डाक') {
सांत्वना देना।लकड़ी का लट्ठा('दस्तावेज़ बनाना');
कॉन्स्ट बनाया उपयोगकर्ता = इंतजार User.create (req.body);
सांत्वना देना।लकड़ी का लट्ठा('सृजित दस्तावेज़');
 res.json ({बनाया उपयोगकर्ता});
 } अन्यअगर (अनुरोध विधि 'पाना') {
सांत्वना देना।लकड़ी का लट्ठा('दस्तावेज़ लाना');
कॉन्स्ट लाए गए उपयोगकर्ता = इंतजार User.find({});
सांत्वना देना।लकड़ी का लट्ठा('प्राप्त किए गए दस्तावेज़');
 res.json ({fetchedUsers});
 } अन्य {
फेंकनानयागलती('असमर्थित HTTP विधि: ${req.method}`);
 }
 } पकड़ना (गलती) {
सांत्वना देनालॉग (त्रुटि);
 res.json ({त्रुटि});
 }
}

यह कोड MongoDB डेटाबेस से उपयोगकर्ता डेटा को संग्रहीत करने और प्राप्त करने के लिए API समापन बिंदु को लागू करता है। यह एक परिभाषित करता है userAPI फ़ंक्शन जो दो पैरामीटर लेता है: अनुरोध और आर ई. ये क्रमशः आने वाले HTTP अनुरोध और आउटगोइंग HTTP प्रतिक्रिया का प्रतिनिधित्व करते हैं।

फ़ंक्शन के अंदर, कोड MongoDB डेटाबेस से जुड़ता है और आने वाले अनुरोध की HTTP विधि की जांच करता है।

यदि विधि एक POST अनुरोध है, तो कोड का उपयोग करके डेटाबेस में एक नया उपयोगकर्ता दस्तावेज़ बनाता है बनाएं तरीका। इसके विपरीत यदि यह ए पाना अनुरोध, कोड डेटाबेस से सभी उपयोगकर्ता दस्तावेज़ प्राप्त करता है।

एपीआई एंडपॉइंट्स का उपभोग करना

नीचे दिए गए कोड को जोड़ें पेज/इंडेक्स.जेएस फ़ाइल:

  • डेटाबेस में डेटा स्टोर करने के लिए एपीआई एंडपॉइंट के लिए एक पोस्ट अनुरोध करें।
    आयात शैलियों से'@/शैलियों/Home.module.css';
    आयात {यूज़स्टेट} से'प्रतिक्रिया';
    निर्यातगलती करनासमारोहघर() {
    कॉन्स्ट [नाम, सेटनाम] = उपयोगस्टेट ('');
    कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ('');
    कॉन्स्ट [उपयोगकर्ता परिणाम, सेट उपयोगकर्ता परिणाम] = उपयोगस्टेट ([]);
    

    कॉन्स्ट क्रिएटयूज़र = async () => {
    कोशिश {
    कॉन्स्ट बनाया उपयोगकर्ता = इंतजार लाना('/एपीआई/उपयोगकर्ताV1/उपयोगकर्ता', {
     तरीका: 'डाक',
     हेडर: {
    'सामग्री प्रकार': 'आवेदन/जेसन',
     },
     शरीर: JSON.स्ट्रिफाई ({
     नाम,
     ईमेल,
     }),
     })।तब((आर ई) => रेस.जेसन ());
    सांत्वना देना।लकड़ी का लट्ठा('सृजित दस्तावेज़');
    

     नाम भरें('');
     सेटईमेल('');
    सांत्वना देना.लॉग (बनाया गया उपयोगकर्ता);
     } पकड़ना (गलती) {
    सांत्वना देनालॉग (त्रुटि);
     }
     };
  • GET समापन बिंदु पर HTTP अनुरोध करके उपयोगकर्ता डेटा प्राप्त करने के लिए एक फ़ंक्शन को परिभाषित करें।
    कॉन्स्ट प्रदर्शन उपयोगकर्ता = async () => {
    कोशिश {
    सांत्वना देना।लकड़ी का लट्ठा('दस्तावेज़ लाना');
    कॉन्स्ट लाए गए उपयोगकर्ता = इंतजार लाना('/एपीआई/उपयोगकर्ताV1/उपयोगकर्ता')।तब((आर ई) =>
     रेस.जेसन ()
     );
    सांत्वना देना।लकड़ी का लट्ठा('प्राप्त किए गए दस्तावेज़');

     setUsersResults (fetchedUsers);
    सांत्वना देना.लॉग (उपयोगकर्ता परिणाम)

     } पकड़ना (गलती) {
    सांत्वना देनालॉग (त्रुटि);
     }
     };
  • अंत में, टेक्स्ट इनपुट फ़ील्ड्स के साथ एक फ़ॉर्म तत्व प्रस्तुत करें और उपयोगकर्ता डेटा बटन सबमिट करें और प्रदर्शित करें।
    वापस करना (
     <>

अंत में, आगे बढ़ें और विकास सर्वर को परिवर्तनों को अपडेट करने और नेविगेट करने के लिए स्पिन करें http://localhost: 3000 आपके ब्राउज़र में।

एनपीएम रन देव

अनुप्रयोगों में Next.js का उपयोग करना

नेक्स्ट.जेएस शानदार वेब एप्लिकेशन बनाने के लिए एक शानदार विकल्प है, चाहे आप किसी साइड प्रोजेक्ट पर काम कर रहे हों या बड़े पैमाने के वेब समाधान पर। यह कई प्रकार की सुविधाएँ और क्षमताएँ प्रदान करता है जो प्रदर्शनकारी और स्केलेबल उत्पाद बनाने की प्रक्रिया को कारगर बनाती हैं।

हालांकि यह मुख्य रूप से एक मजबूत क्लाइंट-साइड फ्रेमवर्क है, आप बैकएंड सर्विस को जल्दी से स्पिन करने के लिए इसकी सर्वर-साइड क्षमताओं का उपयोग भी कर सकते हैं।