Πώς να συνδέσετε την PostgreSQL σε μια εφαρμογή Next.js χρησιμοποιώντας το Prisma

Η αλληλεπίδραση με μια βάση δεδομένων PostgreSQL ή οποιαδήποτε άλλη βάση δεδομένων αυξάνει άμεσα την ποσότητα της SQL που γράφετε. Αυτό μπορεί να εισάγει ζητήματα ασφαλείας, όπως επιθέσεις SQL injection και να περιορίζει τη φορητότητα της βάσης δεδομένων σας. Συνιστάται να χρησιμοποιείτε ένα 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 εκτέλεση dev

Αυτό ξεκινά έναν διακομιστή ανάπτυξης στο http://localhost: 3000.

Αυτά είναι τα βασικά βήματα για τη δημιουργία μιας νέας εφαρμογής Next.js. Μπορείτε να μάθετε περισσότερα σχετικά με τις δυνατότητες του Next.js ανατρέχοντας σε αυτό το άρθρο γιατί να κάνετε μετεγκατάσταση στο Next.js.

Εγκατάσταση του Prisma Client

Για να αρχίσετε να χρησιμοποιείτε Πρίσμα, θα χρειαστείτε τα πακέτα prisma και @prisma/client. Το prisma είναι το εργαλείο Prisma CLI ενώ το @prisma/client είναι ένα πρόγραμμα δημιουργίας ερωτημάτων που δημιουργείται αυτόματα και θα σας βοηθήσει να υποβάλετε ερωτήματα στη βάση δεδομένων σας.

Εγκαταστήστε αυτά τα δύο πακέτα μέσω npm.

npm εγκατάσταση prisma @prisma/client

Στη συνέχεια, αρχικοποιήστε το prisma εκτελώντας την εντολή npx prisma init στο τερματικό.

npx prisma init

Αυτό θα δημιουργήσει ένα νέο αρχείο που ονομάζεται σχήμα.πρισμα που περιέχει το σχήμα της βάσης δεδομένων και α .env αρχείο στο οποίο θα προσθέσετε τη διεύθυνση URL σύνδεσης βάσης δεδομένων.

Προσθήκη της διεύθυνσης URL σύνδεσης

Χρειάζεστε μια διεύθυνση URL σύνδεσης για να συνδέσετε το prisma στο δικό σας Βάση δεδομένων PostgreSQL. Η γενική μορφή για μια διεύθυνση URL σύνδεσης είναι η εξής:

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

Αντικαταστήστε τα στοιχεία σε σγουρές αγκύλες με τα δικά σας στοιχεία βάσης δεδομένων και, στη συνέχεια, αποθηκεύστε τα στο αρχείο .env:

DATABASE_URL = "συμβολοσειρά σύνδεσής σας"

Στη συνέχεια, στο schema.prisma, καθορίστε τη διεύθυνση URL σύνδεσης βάσης δεδομένων:

πηγή δεδομένων db {
 πάροχος = "PostgreSQL"
 url = env("DATABASE_URL")
}

Καθορισμός του σχήματος βάσης δεδομένων

Το σχήμα βάσης δεδομένων είναι μια δομή που καθορίζει το μοντέλο δεδομένων της βάσης δεδομένων σας. Καθορίζει τους πίνακες, τις στήλες και τις σχέσεις μεταξύ πινάκων στη βάση δεδομένων, καθώς και τυχόν περιορισμούς και ευρετήρια που θα πρέπει να χρησιμοποιεί η βάση δεδομένων.

Για να δημιουργήσετε ένα σχήμα για μια βάση δεδομένων με πίνακα χρηστών, ανοίξτε το αρχείο schema.prisma και προσθέστε ένα μοντέλο χρήστη.

μοντέλο χρήστη {
 id String @default (cuid()) @id
 όνομα String;
 email String @unique
}

Το μοντέλο χρήστη έχει μια στήλη αναγνωριστικού που είναι το πρωτεύον κλειδί, μια στήλη ονόματος τύπου συμβολοσειράς και μια στήλη email που θα πρέπει να είναι μοναδική.

Αφού ορίσετε το μοντέλο δεδομένων, πρέπει να αναπτύξετε το σχήμα σας στη βάση δεδομένων χρησιμοποιώντας το npx prisma dbΣπρώξτε εντολή.

npx prisma db push

Αυτή η εντολή δημιουργεί τους πραγματικούς πίνακες στη βάση δεδομένων.

Χρήση του Prisma στο Next.js

Για να χρησιμοποιήσετε το Prisma στο Next.js, πρέπει να δημιουργήσετε μια παρουσία πελάτη prisma.

Πρώτα, δημιουργήστε τον πελάτη Prisma.

Δημιουργία πρίσματος npx

Στη συνέχεια, δημιουργήστε έναν νέο φάκελο που ονομάζεται lib και προσθέστε ένα νέο αρχείο με το όνομα prisma.js σε αυτόν. Σε αυτό το αρχείο, προσθέστε τον ακόλουθο κώδικα για να δημιουργήσετε μια παρουσία πελάτη prisma.

εισαγωγή { PrismaClient } από"@prisma/client";
αφήνω πρίσμα;
αν (του είδουςπαράθυρο"απροσδιόριστος") {
αν (διαδικασία. env. NODE_ENV "παραγωγή") {
 πρίσμα = νέος PrismaClient();
 } αλλού {
αν (!global.prisma) {
 παγκόσμιος.πρισμα = νέος PrismaClient();
 }
 prisma = global.prisma;
 }
}
εξαγωγήΠροκαθορισμένο πρίσμα;

Τώρα, μπορείτε να εισαγάγετε το πρόγραμμα-πελάτη prisma ως "prisma" στα αρχεία σας και να ξεκινήσετε να ρωτάτε τη βάση δεδομένων.

Ερώτημα της βάσης δεδομένων σε μια διαδρομή API Next.js

Το Prisma χρησιμοποιείται συνήθως από την πλευρά του διακομιστή, όπου μπορεί να αλληλεπιδράσει με ασφάλεια με τη βάση δεδομένων σας. Σε μια εφαρμογή Next.js, μπορείτε να ρυθμίσετε μια διαδρομή API που χρησιμοποιεί το Prisma για να ανακτήσει δεδομένα από τη βάση δεδομένων και να τα επιστρέψει στον πελάτη. Οι σελίδες ή τα στοιχεία μπορούν στη συνέχεια να ανακτήσουν δεδομένα από τη διαδρομή API χρησιμοποιώντας ένα Βιβλιοθήκη HTTP όπως Axios ή fetch.

Δημιουργήστε τη διαδρομή API ανοίγοντας το φάκελο pages/api και δημιουργώντας έναν νέο υποφάκελο με το όνομα db. Σε αυτόν τον φάκελο, δημιουργήστε ένα αρχείο που ονομάζεται createuser.js και προσθέστε την ακόλουθη συνάρτηση χειριστή.

εισαγωγή πρίσμα από"@/lib/prisma";
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { name, email } = req.query;
δοκιμάστε {
συνθ newUer = αναμένω πρίσμα. User.create({
 δεδομένα: {
 όνομα,
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ,
 },
 });
 res.json({ χρήστης: newUer, λάθος: μηδενικό });
 } σύλληψη (λάθος) {
 res.json({ λάθος: μήνυμα λάθους, χρήστης: μηδενικό });
 }
}

Αυτή η συνάρτηση λαμβάνει το όνομα και το email από το σώμα του αιτήματος. Στη συνέχεια, στο μπλοκ try/catch, χρησιμοποιεί τη μέθοδο δημιουργίας που παρέχεται από το Prisma Client για να δημιουργήσει έναν νέο χρήστη. Η συνάρτηση επιστρέφει ένα αντικείμενο JSON που περιέχει τον χρήστη και το μήνυμα σφάλματος εάν υπάρχει.

Σε ένα από τα στοιχεία σας, μπορείτε τώρα να υποβάλετε αίτημα σε αυτήν τη διαδρομή API. Για επίδειξη, δημιουργήστε έναν νέο φάκελο με το όνομα προφίλ στον κατάλογο της εφαρμογής και προσθέστε ένα νέο αρχείο με το όνομα page.js. Στη συνέχεια, προσθέστε μια απλή φόρμα που περιέχει δύο πλαίσια εισαγωγής για το όνομα και το email και ένα κουμπί υποβολής.

Στη φόρμα, προσθέστε ένα συμβάν κατά την υποβολή που καλεί μια συνάρτηση που ονομάζεται handleSubmit. Η φόρμα πρέπει να μοιάζει με αυτό:

"χρήση πελάτη";
εισαγωγή React, { useState } από"αντιδρώ";
εξαγωγήΠροκαθορισμένολειτουργίαΣελίδα() {
συνθ [όνομα, όνομα συνόλου] = useState("");
συνθ [email, setemail] = useState("");
συνθ handleΥποβολή = ασυγχρονισμός (ε) => {
 e.preventDefault();
 };
ΕΠΙΣΤΡΟΦΗ (



 type={text}
 placeholder="Προσθήκη ονόματος"
 αξία={όνομα}
 onChange={setname((μι) => e.target.value)}
 />
 type={text}
 placeholder="Προσθήκη email"
 value={email}
 onChange={setemail((μι) => e.target.value)}
 />
"υποβάλλουν">Υποβολή</button>
 </form>
 );
}

Στη συνάρτηση handleSubmit, χρησιμοποιήστε τη μέθοδο ανάκτησης για να υποβάλετε αίτημα στη διαδρομή /api/db/createuser.

συνθ handleΥποβολή = ασυγχρονισμός (ε) => {
 e.preventDefault();
συνθ χρήστης = αναμένω φέρω("/api/db/createuser", {
 Τύπος περιεχομένου: "application/json",
 σώμα: JSON.stringify({ όνομα, email }),
 });
};

Τώρα, όταν υποβληθεί η φόρμα, το Prisma θα δημιουργήσει μια νέα εγγραφή χρήστη στον πίνακα Χρήστης.

Κάνοντας περισσότερα με το Prisma

Μπορείτε να χρησιμοποιήσετε το Prisma για να συνδεθείτε και να υποβάλετε ερώτημα σε μια βάση δεδομένων PostgreSQL από μια εφαρμογή Next.js.

Εκτός από την προσθήκη νέων εγγραφών στη βάση δεδομένων, μπορείτε επίσης να εκτελέσετε άλλες εντολές SQL. Για παράδειγμα, μπορείτε να διαγράψετε σειρές, να επιλέξετε σειρές με βάση συγκεκριμένες συνθήκες, ακόμη και να ενημερώσετε τα υπάρχοντα δεδομένα που είναι αποθηκευμένα στη βάση δεδομένων.