आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

PostgreSQL डेटाबेस या किसी अन्य डेटाबेस के साथ इंटरैक्ट करने से आपके द्वारा लिखे गए SQL की मात्रा सीधे बढ़ जाती है। यह SQL इंजेक्शन हमलों जैसे सुरक्षा मुद्दों को पेश कर सकता है और आपके डेटाबेस की पोर्टेबिलिटी को सीमित कर सकता है। प्रिज्मा जैसे ORM (ऑब्जेक्ट रिलेशन मैपर) का उपयोग करने की सलाह दी जाती है जो आपके डेटाबेस के शीर्ष पर एक अमूर्त परत प्रदान करता है।

PostgreSQL डेटाबेस से जुड़ने और उसके साथ इंटरैक्ट करने के लिए Next.js में Prisma का उपयोग करना सीखें।

एक Next.js एप्लिकेशन बनाना

Next.js एप्लिकेशन बनाने से पहले, सुनिश्चित करें कि आपके पास है नोड और एनपीएम स्थापित आपके विकास के माहौल में।

अपने टर्मिनल में यह आदेश चलाकर प्रिज्मा-नेक्स्ट नामक नेक्स्ट.जेएस एप्लिकेशन बनाएं:

एनपीएक्स क्रिएट-नेक्स्ट-ऐप प्रिज्मा-नेक्स्ट

यह आरंभ करने के लिए बुनियादी फाइलों के साथ प्रिज्मा-नेक्स्ट नामक एक नई निर्देशिका बनाएगा।

प्रिज्मा-अगली निर्देशिका पर नेविगेट करें और इस आदेश का उपयोग कर विकास सर्वर प्रारंभ करें:

instagram viewer 
एनपीएम रन देव

यह एक विकास सर्वर शुरू करता है http://localhost: 3000.

नया Next.js एप्लिकेशन बनाने के लिए ये मूल चरण हैं। आप इस लेख का संदर्भ लेकर Next.js सुविधाओं के बारे में अधिक जान सकते हैं Next.js पर माइग्रेट क्यों करें.

प्रिज्मा क्लाइंट स्थापित करना

प्रयोग शुरू करने के लिए प्रिस्मा, आपको prisma और @prisma/client पैकेज की आवश्यकता होगी। प्रिज्मा प्रिज्मा सीएलआई टूल है, जबकि @ प्रिज्मा/क्लाइंट एक ऑटो-जनरेटेड क्वेरी बिल्डर है जो आपके डेटाबेस को क्वेरी करने में आपकी मदद करेगा।

इन दो पैकेजों को एनपीएम के माध्यम से स्थापित करें।

एनपीएम प्रिज्मा @ प्रिज्मा/क्लाइंट स्थापित करें

इसके बाद, टर्मिनल पर npx prisma init कमांड चलाकर प्रिज्मा को इनिशियलाइज़ करें।

एनपीएक्स प्रिज्मा init

यह नामक एक नई फ़ाइल उत्पन्न करेगा स्कीमा.प्रिज्मा जिसमें डेटाबेस स्कीमा और a .env वह फ़ाइल जिसमें आप डेटाबेस कनेक्शन URL जोड़ेंगे।

कनेक्शन URL जोड़ना

प्रिज्मा को अपने से कनेक्ट करने के लिए आपको एक कनेक्शन यूआरएल चाहिए पोस्टग्रेएसक्यूएल डेटाबेस. कनेक्शन URL का सामान्य प्रारूप यह है:

पोस्टग्रेज: // {उपयोगकर्ता नाम}: {पासवर्ड} @ {होस्टनाम}: {पोर्ट} / {डेटाबेस-नाम}

घुंघराले ब्रैकेट में तत्वों को अपने डेटाबेस विवरण के साथ बदलें और फिर इसे .env फ़ाइल में सहेजें:

DATABASE_URL = ”आपकी कनेक्शन स्ट्रिंग”

फिर स्कीमा.प्रिज्मा में, डेटाबेस कनेक्शन URL निर्दिष्ट करें:

डेटा स्रोत डीबी {
 प्रदाता = "पोस्टग्रेएसक्यूएल"
 url = env ("DATABASE_URL")
}

डेटाबेस स्कीमा को परिभाषित करना

डेटाबेस स्कीमा एक संरचना है जो आपके डेटाबेस के डेटा मॉडल को परिभाषित करती है। यह डेटाबेस में तालिकाओं, स्तंभों और तालिकाओं के बीच संबंधों को निर्दिष्ट करता है, साथ ही किसी भी बाधा और अनुक्रमणिका को डेटाबेस का उपयोग करना चाहिए।

उपयोगकर्ता तालिका वाले डेटाबेस के लिए एक स्कीमा बनाने के लिए, schema.prisma फ़ाइल खोलें, और एक उपयोगकर्ता मॉडल जोड़ें।

मॉडल उपयोगकर्ता {
 आईडी स्ट्रिंग @default (cuid ()) @id
 नाम स्ट्रिंग?
 ईमेल स्ट्रिंग @unique
}

उपयोगकर्ता मॉडल में एक आईडी कॉलम होता है जो प्राथमिक कुंजी, टाइप स्ट्रिंग का एक नाम कॉलम और एक ईमेल कॉलम होता है जो अद्वितीय होना चाहिए।

डेटा मॉडल को परिभाषित करने के बाद, आपको अपने स्कीमा को डेटाबेस का उपयोग करके तैनात करना होगा एनपीएक्स प्रिज्मा डीबीधकेलना आज्ञा।

एनपीएक्स प्रिज्मा डीबी पुश

यह कमांड डेटाबेस में वास्तविक टेबल बनाता है।

नेक्स्ट.जेएस में प्रिज्मा का उपयोग करना

नेक्स्ट.जेएस में प्रिज्मा का उपयोग करने के लिए, आपको प्रिज्मा क्लाइंट इंस्टेंस बनाना होगा।

सबसे पहले, प्रिज्मा क्लाइंट जनरेट करें।

एनपीएक्स प्रिज्मा उत्पन्न

फिर, lib नामक एक नया फ़ोल्डर बनाएँ और उसमें prisma.js नाम की एक नई फ़ाइल जोड़ें। प्रिज्मा क्लाइंट उदाहरण बनाने के लिए इस फ़ाइल में निम्न कोड जोड़ें।

आयात {प्रिज्मा क्लाइंट} से"@ प्रिज्मा/क्लाइंट";
होने देना प्रिज्मा;
अगर (के प्रकारखिड़की"अपरिभाषित") {
अगर (प्रक्रिया.env. NODE_ENV "उत्पादन") {
 प्रिज्मा = नया प्रिज्मा क्लाइंट ();
 } अन्य {
अगर (!वैश्विक.प्रिज्मा) {
 वैश्विक.प्रिज्मा = नया प्रिज्मा क्लाइंट ();
 }


 प्रिज्मा = वैश्विक.प्रिज्मा;
 }
}
निर्यातगलती करना प्रिज्मा;

अब, आप प्रिज्मा क्लाइंट को अपनी फाइलों में "प्रिज्मा" के रूप में आयात कर सकते हैं, और डेटाबेस से पूछताछ शुरू कर सकते हैं।

डेटाबेस को Next.js API रूट में क्वेरी करना

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

पेज/एपीआई फ़ोल्डर खोलकर और डीबी नामक एक नया सबफ़ोल्डर बनाकर एपीआई रूट बनाएं। इस फोल्डर में नाम की एक फाइल बनाएं createuser.js और निम्न हैंडलर फ़ंक्शन जोड़ें।

आयात प्रिस्मा से"@/लिब/प्रिज्मा";
निर्यातगलती करनाasyncसमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट {नाम, ईमेल} = अनुरोध क्वेरी;


कोशिश {
कॉन्स्ट न्यूयूर = इंतजार प्रिज्मा। User.create({
 आंकड़े: {
 नाम,
 ईमेल,
 },
 });
 रेस.जेसन({ उपयोगकर्ता: न्यूयूर, गलती: व्यर्थ });
 } पकड़ना (गलती) {
 रेस.जेसन({ गलती: त्रुटि संदेश, उपयोगकर्ता: व्यर्थ });
 }
}

यह फ़ंक्शन अनुरोध निकाय से नाम और ईमेल प्राप्त करता है। फिर, कोशिश/पकड़ ब्लॉक में, यह एक नया उपयोगकर्ता बनाने के लिए प्रिज्मा क्लाइंट द्वारा प्रदान की गई विधि का उपयोग करता है। फ़ंक्शन एक JSON ऑब्जेक्ट लौटाता है जिसमें उपयोगकर्ता और त्रुटि संदेश होता है यदि कोई हो।

अपने किसी एक घटक में, अब आप इस API मार्ग के लिए अनुरोध कर सकते हैं। प्रदर्शित करने के लिए, ऐप निर्देशिका में प्रोफ़ाइल नामक एक नया फ़ोल्डर बनाएं और page.js नामक एक नई फ़ाइल जोड़ें। फिर नाम और ईमेल और सबमिट बटन के लिए दो इनपुट बॉक्स वाला एक साधारण फॉर्म जोड़ें।

फॉर्म पर, ऑन-सबमिट इवेंट जोड़ें जो हैंडलसबमिट नामक फ़ंक्शन को कॉल करता है। फॉर्म इस तरह दिखना चाहिए:

"क्लाइंट का उपयोग करें";
आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
निर्यातगलती करनासमारोहपृष्ठ() {
कॉन्स्ट [नाम, सेटनाम] = यूज़स्टेट ("");
कॉन्स्ट [ईमेल, सेटमेल] = यूज़स्टेट ("");


कॉन्स्ट हैंडल सबमिट करें = async (ई) => {
 e.preventDefault ();
 };


वापस करना (




 प्रकार = {पाठ}
 प्लेसहोल्डर ="नाम जोड़ें"
 मूल्य = {नाम}
 ऑन चेंज = {सेटनाम ((इ) => e.target.value)}
 />


 प्रकार = {पाठ}
 प्लेसहोल्डर ="ईमेल जोड़ें"
 मूल्य = {ईमेल}
 ऑन चेंज = {सेटमेल ((इ) => e.target.value)}
 />

हैंडलसबमिट फ़ंक्शन में, /api/db/createuser रूट के लिए अनुरोध करने के लिए फ़ेच विधि का उपयोग करें।

कॉन्स्ट हैंडल सबमिट करें = async (ई) => {
 e.preventDefault ();
कॉन्स्ट उपयोगकर्ता = इंतजार लाना("/एपीआई/डीबी/क्रिएटयूसर", {
 सामग्री प्रकार: "एप्लिकेशन/जेसन",
 शरीर: JSON.stringify ({नाम, ईमेल}),
 });
};

अब, जब प्रपत्र सबमिट किया जाता है, तो प्रिज्मा उपयोगकर्ता तालिका में एक नया उपयोगकर्ता रिकॉर्ड बनाएगा।

प्रिज्मा के साथ और अधिक करना

आप नेक्स्ट.जेएस एप्लिकेशन से पोस्टग्रेएसक्यूएल डेटाबेस से जुड़ने और क्वेरी करने के लिए प्रिज्मा का उपयोग कर सकते हैं।

डेटाबेस में नए रिकॉर्ड जोड़ने के अलावा, आप अन्य SQL कमांड भी चला सकते हैं। उदाहरण के लिए, आप पंक्तियों को हटा सकते हैं, विशिष्ट स्थितियों के आधार पर पंक्तियों का चयन कर सकते हैं और डेटाबेस में संग्रहीत मौजूदा डेटा को भी अपडेट कर सकते हैं।