Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Interakcija z bazo podatkov PostgreSQL ali katero koli drugo bazo podatkov neposredno poveča količino SQL-ja, ki ga napišete. To lahko povzroči varnostne težave, kot so napadi z vbrizgavanjem SQL, in omejuje prenosljivost vaše baze podatkov. Priporočljivo je, da uporabite ORM (Mapper Object Relation Mapper), kot je Prisma, ki zagotavlja plast abstrakcije na vrhu vaše baze podatkov.

Naučite se uporabljati Prismo v Next.js za povezavo in interakcijo z bazo podatkov PostgreSQL.

Ustvarjanje aplikacije Next.js

Preden ustvarite aplikacijo Next.js, se prepričajte, da imate Node in npm sta nameščena v vašem razvojnem okolju.

Ustvarite aplikacijo Next.js z imenom prisma-next tako, da zaženete ta ukaz v vašem terminalu:

npx create-next-app prisma-next

To bo ustvarilo nov imenik z imenom prisma-next z osnovnimi datotekami za začetek.

Pomaknite se do imenika prisma-next in zaženite razvojni strežnik s tem ukazom:

instagram viewer 
npm run dev

To zažene razvojni strežnik na http://localhost: 3000.

To so osnovni koraki za ustvarjanje nove aplikacije Next.js. Več o funkcijah Next.js lahko izveste tako, da preberete ta članek o zakaj migrirati na Next.js.

Namestitev odjemalca Prisma

Za začetek uporabe Prisma, boste potrebovali paketa prisma in @prisma/client. prisma je orodje Prisma CLI, medtem ko je @prisma/client samodejno ustvarjen graditelj poizvedb, ki vam bo pomagal poizvedovati po vaši bazi podatkov.

Namestite ta dva paketa prek npm.

npm namestite prismo @prisma/client

Nato inicializirajte prismo tako, da na terminalu zaženete ukaz npx prisma init.

npx prisma začet

To bo ustvarilo novo datoteko, imenovano shema.prisma ki vsebuje shemo baze podatkov in a .env datoteko, ki ji boste dodali URL povezave z bazo podatkov.

Dodajanje URL-ja povezave

Za povezavo prizme s svojim Baza podatkov PostgreSQL. Splošna oblika za URL povezave je naslednja:

postgres://{uporabniško ime}:{geslo}@{ime-gostitelja}:{vrata}/{ime-baze-podatkov}

Zamenjajte elemente v zavitih oklepajih s podrobnostmi o lastni bazi podatkov in jih shranite v datoteko .env:

DATABASE_URL = ”vaš povezovalni niz”

Nato v schema.prisma podajte URL povezave z bazo podatkov:

datasource db {
 ponudnik = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definiranje sheme baze podatkov

Shema baze podatkov je struktura, ki definira podatkovni model vaše baze podatkov. Določa tabele, stolpce in relacije med tabelami v bazi podatkov ter morebitne omejitve in indekse, ki naj jih uporablja baza podatkov.

Če želite ustvariti shemo za bazo podatkov s tabelo uporabnikov, odprite datoteko schema.prisma in dodajte model uporabnika.

uporabnik modela {
 id String @default (cuid()) @id
 ime String?
 e-pošta String @unique
}

Uporabniški model ima stolpec z id-jem, ki je primarni ključ, stolpec z imenom vrste niz in stolpec z e-pošto, ki mora biti edinstven.

Ko definirate podatkovni model, morate svojo shemo razmestiti v bazo podatkov z uporabo npx prisma dbpotiskati ukaz.

npx prisma db push

Ta ukaz ustvari dejanske tabele v bazi podatkov.

Uporaba Prisme v Next.js

Če želite uporabljati Prismo v Next.js, morate ustvariti primerek odjemalca prisma.

Najprej ustvarite odjemalca Prisma.

ustvari npx prisma

Nato ustvarite novo mapo z imenom lib in vanjo dodajte novo datoteko z imenom prisma.js. V to datoteko dodajte naslednjo kodo, da ustvarite primerek odjemalca prisma.

uvoz {PrismaClient} od"@prisma/odjemalec";
pustiti prizma;
če (tipokno"nedoločeno") {
če (process.env. NODE_ENV "proizvodnja") {
 prizma = novo PrismaClient();
 } drugače {
če (!global.prisma) {
 global.prisma = novo PrismaClient();
 }


 prizma = global.prizma;
 }
}
izvozprivzeto prizma;

Zdaj lahko odjemalca prisma uvozite kot »prisma« v svoje datoteke in začnete poizvedovati po bazi podatkov.

Poizvedovanje po bazi podatkov v poti API-ja Next.js

Prisma se običajno uporablja na strani strežnika, kjer lahko varno komunicira z vašo bazo podatkov. V aplikaciji Next.js lahko nastavite pot API, ki uporablja Prismo za pridobivanje podatkov iz baze podatkov in njihovo vrnitev odjemalcu. Strani ali komponente lahko nato pridobijo podatke iz poti API z uporabo Knjižnica HTTP, kot je Axios ali fetch.

Ustvarite pot API tako, da odprete mapo pages/api in ustvarite novo podmapo z imenom db. V tej mapi ustvarite datoteko z imenom createuser.js in dodajte naslednjo funkcijo obravnave.

uvoz prizma od"@/lib/prisma";
izvozprivzetoasinhfunkcijovodja(zahteva, res) {
konst { ime, e-pošta } = req.query;


poskusi {
konst noviUer = čakati prizma. User.create({
 podatki: {
 ime,
 E-naslov,
 },
 });
 res.json({ uporabnik: novejši, napaka: nič });
 } ulov (napaka) {
 res.json({ napaka: obvestilo o napaki, uporabnik: nič });
 }
}

Ta funkcija pridobi ime in e-pošto iz telesa zahteve. Nato v bloku try/catch uporabi metodo create, ki jo nudi odjemalec Prisma, da ustvari novega uporabnika. Funkcija vrne objekt JSON, ki vsebuje uporabnika in morebitno sporočilo o napaki.

V eni od vaših komponent lahko zdaj podate zahtevo tej poti API-ja. Za predstavitev ustvarite novo mapo z imenom profile v imeniku aplikacije in dodajte novo datoteko z imenom page.js. Nato dodajte preprost obrazec, ki vsebuje dve vnosni polji za ime in e-pošto ter gumb za pošiljanje.

V obrazec dodajte dogodek ob oddaji, ki kliče funkcijo, imenovano handleSubmit. Obrazec bi moral izgledati takole:

"uporabi odjemalca";
uvoz Odziv, {useState} od"reagirati";
izvozprivzetofunkcijoStran() {
konst [name, setname] = useState("");
konst [e-pošta, setemail] = useState("");


konst handleSubmit = asinh (e) => {
 e.preventDefault();
 };


vrnitev (




 tip={besedilo}
 placeholder="Dodaj ime"
 vrednost={ime}
 onChange={setname((e) => e.target.value)}
 />


 tip={besedilo}
 placeholder="Dodaj e-pošto"
 vrednost={e-pošta}
 onChange={setemail((e) => e.target.value)}
 />

V funkciji handleSubmit uporabite metodo fetch, da naredite zahtevo na poti /api/db/createuser.

konst handleSubmit = asinh (e) => {
 e.preventDefault();
konst uporabnik = čakati prinesi ("/api/db/createuser", {
 ContentType: "aplikacija/json",
 telo: JSON.stringify({ime, e-pošta}),
 });
};

Zdaj, ko je obrazec oddan, bo Prisma ustvarila nov uporabniški zapis v tabeli Uporabnik.

Narediti več s Prismo

Prismo lahko uporabite za povezavo in poizvedovanje po bazi podatkov PostgreSQL iz aplikacije Next.js.

Poleg dodajanja novih zapisov v podatkovno bazo lahko izvajate tudi druge ukaze SQL. Na primer, lahko izbrišete vrstice, izberete vrstice glede na določene pogoje in celo posodobite obstoječe podatke, shranjene v bazi podatkov.