Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Interacțiunea cu o bază de date PostgreSQL sau orice altă bază de date crește direct cantitatea de SQL pe care o scrieți. Acest lucru poate introduce probleme de securitate, cum ar fi atacurile de injectare SQL și limitează portabilitatea bazei de date. Este recomandabil să utilizați un ORM (Object Relation Mapper) precum Prisma, care oferă un strat de abstractizare deasupra bazei de date.

Aflați cum să utilizați Prisma în Next.js pentru a vă conecta și a interacționa cu o bază de date PostgreSQL.

Crearea unei aplicații Next.js

Înainte de a crea o aplicație Next.js, asigurați-vă că aveți Node și npm instalate în mediul dumneavoastră de dezvoltare.

Creați o aplicație Next.js numită prisma-next rulând această comandă în terminalul dvs.:

npx create-next-app prisma-next

Acest lucru va crea un nou director numit prisma-next cu fișiere de bază pentru a începe.

instagram viewer

Navigați la directorul prisma-next și porniți serverul de dezvoltare folosind această comandă:

npm run dev

Aceasta pornește un server de dezvoltare la http://localhost: 3000.

Aceștia sunt pașii de bază pentru crearea unei noi aplicații Next.js. Puteți afla mai multe despre funcțiile Next.js, consultand acest articol despre de ce să migrați la Next.js.

Instalarea clientului Prisma

Pentru a începe să utilizați Prisma, veți avea nevoie de pachetele prisma și @prisma/client. prisma este instrumentul Prisma CLI, în timp ce @prisma/client este un generator de interogări generat automat care vă va ajuta să interogați baza de date.

Instalați aceste două pachete prin npm.

npm install prisma @prisma/client

Apoi, inițializați prisma rulând comanda npx prisma init pe terminal.

npx prisma init

Aceasta va genera un nou fișier numit schema.prisma care conține schema bazei de date și a .env fișier la care veți adăuga adresa URL a conexiunii la baza de date.

Adăugarea adresei URL de conectare

Aveți nevoie de o adresă URL de conectare pentru a conecta prisma la dvs Baza de date PostgreSQL. Formatul general pentru o adresă URL de conexiune este următorul:

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

Înlocuiți elementele din paranteze cu propriile detalii ale bazei de date, apoi salvați-o în fișierul .env:

DATABASE_URL = „șirul de conexiune”

Apoi, în schema.prisma, specificați adresa URL a conexiunii la baza de date:

sursa de date db {
 furnizor = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definirea schemei bazei de date

Schema bazei de date este o structură care definește modelul de date al bazei de date. Specifică tabelele, coloanele și relațiile dintre tabelele din baza de date, precum și orice constrângeri și indici pe care ar trebui să le folosească baza de date.

Pentru a crea o schemă pentru o bază de date cu un tabel de utilizatori, deschideți fișierul schema.prisma și adăugați un model de utilizator.

model utilizator {
 id String @default (cuid()) @id
 șir de nume?
 șir de e-mail @unique
}

Modelul User are o coloană de id care este cheia primară, o coloană de nume de tip șir și o coloană de e-mail care ar trebui să fie unică.

După definirea modelului de date, trebuie să vă implementați schema în baza de date folosind npx prisma dbApăsaţi comanda.

npx prisma db push

Această comandă creează tabelele reale în baza de date.

Utilizarea Prisma în Next.js

Pentru a utiliza Prisma în Next.js, trebuie să creați o instanță client prisma.

Mai întâi, generați clientul Prisma.

npx prisme generate

Apoi, creați un folder nou numit lib și adăugați un fișier nou numit prisma.js în el. În acest fișier, adăugați următorul cod pentru a crea o instanță client prisma.

import { PrismaClient } din„@prisma/client”;
lăsa prismă;
dacă (tip defereastră"nedefinit") {
dacă (proces.env. NODE_ENV "producție") {
 prisma = nou PrismaClient();
 } altfel {
dacă (!global.prisma) {
 global.prisma = nou PrismaClient();
 }


 prisma = global.prisma;
 }
}
exportMod implicit prismă;

Acum, puteți importa clientul prisma ca „prisma” în fișierele dvs. și puteți începe să interogați baza de date.

Interogarea bazei de date într-o rută API Next.js

Prisma este folosit de obicei pe partea de server, unde poate interacționa în siguranță cu baza de date. Într-o aplicație Next.js, puteți configura o rută API care utilizează Prisma pentru a prelua date din baza de date și a le returna clientului. Paginile sau componentele pot prelua apoi date de pe ruta API folosind un Bibliotecă HTTP ca Axios sau fetch.

Creați ruta API deschizând folderul pagini/api și creând un nou subdosar numit db. În acest folder, creați un fișier numit createuser.js și adăugați următoarea funcție de gestionare.

import prismă din„@/lib/prisma”;
exportMod implicitasincronfuncţiemanipulator(cerere, res) {
const { name, email } = req.query;


încerca {
const newUer = așteaptă prismă. User.create({
 date: {
 Nume,
 e-mail,
 },
 });
 res.json({ utilizator: nouUer, eroare: nul });
 } captură (eroare) {
 res.json({ eroare: error.message, utilizator: nul });
 }
}

Această funcție primește numele și e-mailul din corpul solicitării. Apoi, în blocul try/catch, folosește metoda de creare furnizată de Clientul Prisma pentru a crea un utilizator nou. Funcția returnează un obiect JSON care conține utilizatorul și mesajul de eroare, dacă există.

Într-una dintre componentele dvs., acum puteți face o solicitare către această rută API. Pentru a demonstra, creați un dosar nou numit profil în directorul aplicației și adăugați un fișier nou numit page.js. Apoi adăugați un formular simplu care conține două casete de introducere pentru nume și e-mail și un buton de trimitere.

Pe formular, adăugați un eveniment la trimitere care apelează o funcție numită handleSubmit. Formularul ar trebui să arate astfel:

"utilizați clientul";
import Reacționează, { useState } din"reacţiona";
exportMod implicitfuncţiePagină() {
const [nume, nume set] = useState("");
const [email, setemail] = useState("");


const handleSubmit = asincron (e) => {
 e.preventDefault();
 };


întoarcere (




 tip={text}
 substituent=„Adăugați nume”
 valoare={nume}
 onChange={setname((e) => e.valoare.țintă)}
 />


 tip={text}
 substituent=„Adăugați e-mail”
 valoare={e-mail}
 onChange={setemail((e) => e.valoare.țintă)}
 />

În funcția handleSubmit, utilizați metoda fetch pentru a face o solicitare către ruta /api/db/createuser.

const handleSubmit = asincron (e) => {
 e.preventDefault();
const utilizator = așteaptă aduce(„/api/db/createuser”, {
 Tipul de conținut: "aplicație/json",
 corp: JSON.stringify({ nume, e-mail }),
 });
};

Acum, când formularul este trimis, Prisma va crea o nouă înregistrare de utilizator în tabelul User.

Fă mai mult cu Prisma

Puteți utiliza Prisma pentru a vă conecta la o bază de date PostgreSQL și pentru a interoga dintr-o aplicație Next.js.

Pe lângă adăugarea de noi înregistrări la baza de date, puteți rula și alte comenzi SQL. De exemplu, puteți șterge rânduri, selecta rânduri în funcție de condiții specifice și chiar puteți actualiza datele existente stocate în baza de date.