כיצד לחבר PostgreSQL ליישום Next.js באמצעות Prisma

אינטראקציה עם מסד נתונים PostgreSQL או כל מסד נתונים אחר מגדילה ישירות את כמות ה-SQL שאתה כותב. זה יכול להציג בעיות אבטחה כגון התקפות הזרקת SQL ומגביל את הניידות של מסד הנתונים שלך. רצוי להשתמש ב-ORM (Object Relation Mapper) כמו 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 run dev

זה מתחיל שרת פיתוח ב http://localhost: 3000.

אלו הם השלבים הבסיסיים ליצירת יישום Next.js חדש. תוכל ללמוד עוד על תכונות Next.js על ידי עיון במאמר זה בנושא מדוע לעבור אל Next.js.

התקנת לקוח Prisma

כדי להתחיל להשתמש פריזמה, תזדקק לחבילות prisma ו-@prisma/client. prisma הוא כלי Prisma CLI בעוד @prisma/client הוא בונה שאילתות שנוצר אוטומטית שיעזור לך לבצע שאילתות במסד הנתונים שלך.

התקן את שתי החבילות הללו באמצעות npm.

npm להתקין prisma @prisma/client

לאחר מכן, אתחול פריזמה על ידי הפעלת הפקודה npx prisma init בטרמינל.

npx prisma init

פעולה זו תיצור קובץ חדש בשם schema.prisma המכיל את סכימת מסד הנתונים ו-a .env קובץ שאליו תוסיף את כתובת האתר של חיבור מסד הנתונים.

הוספת כתובת האתר לחיבור

אתה צריך כתובת חיבור כדי לחבר פריזמה שלך מסד נתונים PostgreSQL. הפורמט הכללי של כתובת אתר לחיבור הוא זה:

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

החלף את האלמנטים בסוגריים מסולסלים בפרטי מסד הנתונים שלך ולאחר מכן שמור אותם בקובץ .env:

DATABASE_URL = "מחרוזת החיבור שלך"

לאחר מכן ב-schema.prisma, ציין את כתובת האתר של חיבור מסד הנתונים:

מקור נתונים db {
 ספק = "PostgreSQL"
 url = env("DATABASE_URL")
}

הגדרת סכמת מסד הנתונים

סכימת מסד הנתונים היא מבנה המגדיר את מודל הנתונים של מסד הנתונים שלך. הוא מציין את הטבלאות, העמודות והיחסים בין טבלאות במסד הנתונים, כמו גם כל אילוצים ואינדקסים שבהם מסד הנתונים צריך להשתמש.

כדי ליצור סכימה עבור מסד נתונים עם טבלת משתמשים, פתח את הקובץ schema.prisma והוסף מודל משתמש.

דגם משתמש {
 id String @default (cuid()) @id
 מחרוזת שם?
 דוא"ל מחרוזת @unique
}

למודל המשתמש יש עמודת מזהה שהיא המפתח הראשי, עמודת שם של מחרוזת סוג ועמודת אימייל שאמורה להיות ייחודית.

לאחר הגדרת מודל הנתונים, עליך לפרוס את הסכימה שלך למסד הנתונים באמצעות ה npx prisma dbלִדחוֹף פקודה.

npx prisma db push

פקודה זו יוצרת את הטבלאות בפועל במסד הנתונים.

שימוש ב-Prisma ב-Next.js

כדי להשתמש ב-Prisma ב-Next.js, עליך ליצור מופע של לקוח פריזמה.

ראשית, צור את הלקוח Prisma.

npx פריזמה ליצור

לאחר מכן, צור תיקיה חדשה בשם lib והוסף בה קובץ חדש בשם prisma.js. בקובץ זה, הוסף את הקוד הבא כדי ליצור מופע לקוח פריזמה.

יְבוּא { PrismaClient } מ"@prisma/client";
לתת פריזמה;
אם (סוג שלחַלוֹן"לא מוגדר") {
אם (process.env. NODE_ENV "הפקה") {
 פריזמה = חָדָשׁ PrismaClient();
 } אַחֵר {
אם (!global.prisma) {
 global.prisma = חָדָשׁ PrismaClient();
 }
 prisma = global.prisma;
 }
}
יְצוּאבְּרִירַת מֶחדָל פריזמה;

כעת, אתה יכול לייבא את לקוח הפריזמה בתור "פריסמה" בקבצים שלך, ולהתחיל לבצע שאילתות במסד הנתונים.

שאילתה של מסד הנתונים בנתיב API של Next.js

Prisma משמשת בדרך כלל בצד השרת, שם היא יכולה ליצור אינטראקציה בטוחה עם מסד הנתונים שלך. באפליקציית Next.js, ניתן להגדיר מסלול API המשתמש ב-Prisma כדי להביא נתונים ממסד הנתונים ולהחזיר אותם ללקוח. הדפים או הרכיבים יכולים לאחר מכן להביא נתונים ממסלול ה-API באמצעות ספריית HTTP כמו Axios או אחזור.

צור את מסלול ה-API על ידי פתיחת תיקיית pages/api ויצירת תיקיית משנה חדשה בשם db. בתיקייה זו, צור קובץ בשם createuser.js והוסיפו את פונקציית המטפל הבאה.

יְבוּא פריזמה מ"@/lib/prisma";
יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהמטפל(דרישה, מילואים) {
const { name, email } = req.query;
לְנַסוֹת {
const newUer = לְהַמתִין פריזמה. User.create({
 נתונים: {
 שֵׁם,
 אימייל,
 },
 });
 res.json({ מִשׁתַמֵשׁ: newUer, שְׁגִיאָה: ריק });
 } לתפוס (שגיאה) {
 res.json({ שְׁגִיאָה: הודעת שגיאה, מִשׁתַמֵשׁ: ריק });
 }
}

פונקציה זו מקבלת את השם והאימייל מגוף הבקשה. לאחר מכן, בבלוק try/catch, הוא משתמש בשיטת היצירה שסופק על ידי לקוח Prisma כדי ליצור משתמש חדש. הפונקציה מחזירה אובייקט JSON המכיל את המשתמש ואת הודעת השגיאה אם ​​יש.

באחד מהרכיבים שלך, כעת תוכל להגיש בקשה למסלול API זה. כדי להדגים, צור תיקיה חדשה בשם פרופיל בספריית האפליקציה והוסף קובץ חדש בשם page.js. לאחר מכן הוסף טופס פשוט המכיל שתי תיבות קלט עבור השם והמייל וכפתור שלח.

בטופס, הוסף אירוע בעת שליחה הקורא לפונקציה בשם handleSubmit. הטופס אמור להיראות כך:

"השתמש בלקוח";
יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהעמוד() {
const [name, setname] = useState("");
const [email, setemail] = useState("");
const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
 };
לַחֲזוֹר (



 type={טקסט}
 מציין מיקום="הוסף שם"
 value={name}
 onChange={setname((ה) => e.target.value)}
 />
 type={טקסט}
 מציין מיקום="הוסף אימייל"
 value={email}
 onChange={setemail((ה) => e.target.value)}
 />
"שלח">שלח</button>
 </form>
 );
}

בפונקציה handleSubmit, השתמש בשיטת האחזור כדי לשלוח בקשה למסלול /api/db/createuser.

const handleSubmit = אסינכרון (ה) => {
 e.preventDefault();
const משתמש = לְהַמתִין לְהָבִיא("/api/db/createuser", {
 סוג תוכן: "application/json",
 גוּף: JSON.stringify({ name, email }),
 });
};

כעת, כאשר הטופס יישלח, Prisma תיצור רשומת משתמש חדשה בטבלת המשתמש.

עושה יותר עם פריזמה

אתה יכול להשתמש ב-Prisma כדי להתחבר למסד נתונים PostgreSQL ולשאול אותו מאפליקציית Next.js.

מלבד הוספת רשומות חדשות למסד הנתונים, אתה יכול גם להפעיל פקודות SQL אחרות. לדוגמה, אתה יכול למחוק שורות, לבחור שורות על סמך תנאים ספציפיים, ואפילו לעדכן נתונים קיימים המאוחסנים במסד הנתונים.