كيفية توصيل PostgreSQL بتطبيق Next.js باستخدام Prisma

يؤدي التفاعل مع قاعدة بيانات PostgreSQL أو أي قاعدة بيانات أخرى إلى زيادة كمية SQL التي تكتبها مباشرةً. يمكن أن يؤدي ذلك إلى حدوث مشكلات أمنية مثل هجمات حقن SQL ويحد من إمكانية نقل قاعدة البيانات الخاصة بك. يُنصح باستخدام ORM (مخطط علاقة الكائن) مثل Prisma الذي يوفر طبقة تجريدية أعلى قاعدة البيانات الخاصة بك.

تعرف على كيفية استخدام Prisma في Next.js للاتصال بقاعدة بيانات PostgreSQL والتفاعل معها.

إنشاء تطبيق Next.js

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

قم بإنشاء تطبيق Next.js يسمى prisma-next عن طريق تشغيل هذا الأمر في جهازك الطرفي:

npx create-next-app prisma-next

سيؤدي هذا إلى إنشاء دليل جديد يسمى prisma-next مع الملفات الأساسية للبدء.

انتقل إلى دليل prisma-next وابدأ خادم التطوير باستخدام هذا الأمر:

npm تشغيل dev

يؤدي هذا إلى تشغيل خادم تطوير في http://localhost: 3000.

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

تثبيت عميل Prisma

لبدء استخدام بريزما، ستحتاج إلى حزم prisma و @ prisma / client. prisma هي أداة Prisma CLI بينما @ prisma / client هو منشئ استعلام يتم إنشاؤه تلقائيًا والذي سيساعدك على الاستعلام عن قاعدة البيانات الخاصة بك.

قم بتثبيت هاتين الحزمتين عبر npm.

npm تثبيت prisma @ prisma / client

بعد ذلك ، قم بتهيئة prisma عن طريق تشغيل الأمر npx prisma init على الجهاز.

الحرف الأول npx المنشور

سيؤدي هذا إلى إنشاء ملف جديد يسمى المخطط الذي يحتوي على مخطط قاعدة البيانات وملف .env الملف الذي ستضيف إليه عنوان URL لاتصال قاعدة البيانات.

إضافة رابط الاتصال

أنت بحاجة إلى عنوان URL للاتصال لتوصيل المنشور بجهاز قاعدة بيانات PostgreSQL. التنسيق العام لعنوان URL للاتصال هو:

postgres: // {username}: {password} @ {hostname}: {port} / {database-name}

استبدل العناصر الموجودة بين قوسين معقوفين بتفاصيل قاعدة البيانات الخاصة بك ثم احفظها في ملف .env:

DATABASE_URL = "سلسلة الاتصال"

ثم في schema.prisma ، حدد عنوان URL لاتصال قاعدة البيانات:

مصدر البيانات ديسيبل {
 المزود = "PostgreSQL"
 url = env ("DATABASE_URL")
}

تحديد مخطط قاعدة البيانات

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

لإنشاء مخطط قاعدة بيانات باستخدام جدول المستخدمين ، افتح ملف schema.prisma وأضف نموذج مستخدم.

نموذج المستخدم {
 معرف السلسلة @ الافتراضي (cuid ())id
 اسم السلسلة؟
 سلسلة البريد الإلكترونيunique
}

يحتوي نموذج المستخدم على عمود معرف وهو المفتاح الأساسي وعمود اسم من سلسلة النوع وعمود البريد الإلكتروني الذي يجب أن يكون فريدًا.

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

npx منشور db دفع

يقوم هذا الأمر بإنشاء الجداول الفعلية في قاعدة البيانات.

استخدام Prisma في Next.js

لاستخدام Prisma في Next.js ، تحتاج إلى إنشاء مثيل عميل منشور.

أولاً ، قم بإنشاء عميل Prisma.

المنشور npx توليد

بعد ذلك ، أنشئ مجلدًا جديدًا يسمى lib وأضف ملفًا جديدًا باسم prisma.js فيه. في هذا الملف ، أضف التعليمات البرمجية التالية لإنشاء مثيل عميل منشور.

يستورد {PrismaClient} من"@ prisma / العميل";
يترك المنشور.
لو (نوع مننافذة او شباك"غير معرف") {
لو (process.env. NODE_ENV "إنتاج") {
 المنشور = جديد PrismaClient () ،
 } آخر {
لو (! global.prisma) {
 global.prisma = جديد PrismaClient () ،
 }
 المنشور = global.prisma ؛
 }
}
يصدّرتقصير المنشور.

الآن ، يمكنك استيراد عميل prisma كـ "prisma" في ملفاتك ، والبدء في الاستعلام عن قاعدة البيانات.

الاستعلام عن قاعدة البيانات في مسار Next.js API

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

قم بإنشاء مسار API عن طريق فتح مجلد pages / api وإنشاء مجلد فرعي جديد باسم db. في هذا المجلد ، قم بإنشاء ملف يسمى createuser.js وأضف وظيفة المعالج التالية.

يستورد المنشور من"@ / lib / prisma";
يصدّرتقصيرغير متزامنوظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {الاسم ، البريد الإلكتروني} = req.query ؛
يحاول {
مقدار ثابت newUer = انتظر المنشور. User.create ({
 بيانات: {
 اسم،
 بريد إلكتروني،
 },
 });
 res.json ({ مستخدم: newUer، خطأ: باطل });
 } يمسك (خطأ) {
 res.json ({ خطأ: رسالة خطأ، مستخدم: باطل });
 }
}

تحصل هذه الوظيفة على الاسم والبريد الإلكتروني من نص الطلب. ثم ، في كتلة try / catch ، تستخدم طريقة الإنشاء التي يوفرها Prisma Client لإنشاء مستخدم جديد. تقوم الدالة بإرجاع كائن JSON يحتوي على المستخدم ورسالة الخطأ إن وجدت.

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

في النموذج ، أضف حدثًا عند الإرسال يستدعي دالة تسمى handleSubmit. يجب أن يبدو النموذج كما يلي:

"استخدام العميل";
يستورد رد فعل ، {useState} من"تتفاعل";
يصدّرتقصيروظيفةصفحة() {
مقدار ثابت [الاسم ، اسم المجموعة] = useState ("");
مقدار ثابت [email، setemail] = useState ("");
مقدار ثابت مقبض غير متزامن (هـ) => {
 e.preventDefault () ؛
 };
يعود (



 اكتب = {text}
 نائب ="اضف اسما"
 القيمة = {name}
 onChange = {setname ((ه) => e.target.value)}
 />
 اكتب = {text}
 نائب ="إضافة بريد إلكتروني"
 القيمة = {البريد الإلكتروني}
 onChange = {setemail ((ه) => e.target.value)}
 />
"يُقدِّم"> إرسال </button>
 </form>
 );
}

في دالة handleSubmit ، استخدم طريقة الجلب لتقديم طلب إلى المسار / api / db / createuser.

مقدار ثابت مقبض غير متزامن (هـ) => {
 e.preventDefault () ؛
مقدار ثابت المستخدم = انتظر أحضر("/ api / db / createuser", {
 نوع المحتوى: "التطبيق / json",
 جسم: جسون.stringify ({name، email})،
 });
};

الآن ، عند إرسال النموذج ، سيقوم Prisma بإنشاء سجل مستخدم جديد في جدول المستخدم.

القيام بالمزيد مع Prisma

يمكنك استخدام Prisma للاتصال والاستعلام عن قاعدة بيانات PostgreSQL من تطبيق Next.js.

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