Kuidas ühendada PostgreSQL Prisma abil rakendusega Next.js

PostgreSQL-i või mõne muu andmebaasiga suhtlemine suurendab otseselt teie kirjutatava SQL-i hulka. See võib tuua kaasa turbeprobleeme, nagu SQL-i süstimise rünnakud, ja piirata teie andmebaasi teisaldatavust. Soovitatav on kasutada ORM-i (Object Relation Mapper), nagu Prisma, mis pakub teie andmebaasi peal abstraktsioonikihti.

Siit saate teada, kuidas kasutada programmis Next.js Prismat PostgreSQL-i andmebaasiga ühenduse loomiseks ja sellega suhtlemiseks.

Rakenduse Next.js loomine

Enne rakenduse Next.js loomist veenduge, et teil on Paigaldatud sõlm ja npm oma arenduskeskkonnas.

Looge rakendus Next.js nimega prisma-next, käivitades terminalis järgmise käsu:

npx create-next-app prisma-next

See loob alustamiseks uue kataloogi nimega prisma-next põhifailidega.

Liikuge kataloogi prisma-next ja käivitage arendusserver, kasutades seda käsku:

npm käivita dev

See käivitab arendusserveri aadressil http://localhost: 3000.

Need on põhitoimingud uue Next.js rakenduse loomiseks. Lisateavet Next.js-i funktsioonide kohta leiate sellest artiklist miks minna üle Next.js-i.

Prisma kliendi installimine

Kasutamise alustamiseks Prisma, vajate pakette prisma ja @prisma/klient. prisma on Prisma CLI tööriist, samas kui @prisma/client on automaatselt loodud päringute koostaja, mis aitab teil andmebaasi päringuid teha.

Installige need kaks paketti npm-i kaudu.

npm install prisma @prisma/klient

Järgmisena lähtestage prisma, käivitades terminalis käsu npx prisma init.

npx prisma init

See genereerib uue faili nimega schema.prisma mis sisaldab andmebaasi skeemi ja a .env faili, millele lisate andmebaasi ühenduse URL-i.

Ühenduse URL-i lisamine

Prisma omaga ühendamiseks vajate ühenduse URL-i PostgreSQL andmebaas. Ühenduse URL-i üldine vorming on järgmine:

postgres://{kasutajanimi}:{parool}@{hostinimi}:{port}/{andmebaasi-nimi}

Asendage lokkis sulgudes olevad elemendid oma andmebaasi üksikasjadega ja salvestage see env-faili:

DATABASE_URL = "teie ühenduse string"

Seejärel määrake failis schema.prisma andmebaasi ühenduse URL:

andmeallikas db {
 pakkuja = "PostgreSQL"
 url = env("DATABASE_URL")
}

Andmebaasi skeemi määratlemine

Andmebaasi skeem on struktuur, mis määrab teie andmebaasi andmemudeli. See määrab andmebaasis olevad tabelid, veerud ja tabelitevahelised seosed, samuti kõik piirangud ja indeksid, mida andmebaas peaks kasutama.

Kasutajate tabeliga andmebaasi skeemi loomiseks avage fail schema.prisma ja lisage kasutajamudel.

modell kasutaja {
 id String @default (cuid()) @id
 nimi String?
 email String @unikaalne
}

Kasutajamudelil on ID-veerg, mis on primaarvõti, tüübistringi tüüpi nimeveerg ja e-posti veerg, mis peaks olema kordumatu.

Pärast andmemudeli määratlemist peate juurutama oma skeemi andmebaasi, kasutades npx prisma dbsuruma käsk.

npx prisma db push

See käsk loob andmebaasis tegelikud tabelid.

Prisma kasutamine rakenduses Next.js

Prisma kasutamiseks rakenduses Next.js peate looma prisma kliendi eksemplari.

Esiteks genereerige Prisma klient.

npx prisma genereerimine

Seejärel looge uus kaust nimega lib ja lisage sinna uus fail nimega prisma.js. Prisma kliendi eksemplari loomiseks lisage sellesse faili järgmine kood.

importida { PrismaClient } alates"@prisma/klient";
lase prisma;
kui (tüüpaken"määratlemata") {
kui (protsess.env. NODE_ENV "tootmine") {
 prisma = uus PrismaClient();
 } muidu {
kui (!global.prisma) {
 globaalne.prisma = uus PrismaClient();
 }
 prisma = globaalne.prisma;
 }
}
eksportidavaikimisi prisma;

Nüüd saate importida prisma kliendi oma failidesse prismana ja alustada andmebaasi päringuid.

Andmebaasi päringute tegemine Next.js API marsruudil

Prismat kasutatakse tavaliselt serveri poolel, kus see saab teie andmebaasiga turvaliselt suhelda. Rakenduses Next.js saate seadistada API marsruudi, mis kasutab Prismat andmete toomiseks andmebaasist ja tagastab need kliendile. Seejärel saavad lehed või komponendid API marsruudilt andmeid hankida, kasutades HTTP-teek, näiteks Axios või toomine.

Looge API marsruut, avades kausta pages/api ja luues uue alamkausta nimega db. Looge selles kaustas fail nimega createuser.js ja lisage järgmine käitleja funktsioon.

importida prisma alates"@/lib/prisma";
eksportidavaikimisiasünkrfunktsioonikäitleja(req, res) {
konst { nimi, email } = req.query;
proovi {
konst uusUer = ootama prisma. User.create({
 andmed: {
 nimi,
 email,
 },
 });
 res.json({ kasutaja: uusUer, viga: null });
 } püüda (viga) {
 res.json({ viga: error.message, kasutaja: null });
 }
}

See funktsioon saab päringu kehalt nime ja e-posti aadressi. Seejärel kasutab proovi/püüdmise plokis uue kasutaja loomiseks Prisma kliendi pakutavat loomismeetodit. Funktsioon tagastab JSON-objekti, mis sisaldab kasutajat ja veateadet, kui see on olemas.

Ühes oma komponendis saate nüüd esitada taotluse sellele API marsruudile. Demonstreerimiseks looge rakenduste kataloogis uus kaust nimega profiil ja lisage uus fail nimega page.js. Seejärel lisage lihtne vorm, mis sisaldab kahte sisestuskasti nime ja e-posti aadressi jaoks ning esitamisnuppu.

Lisage vormile esitamisel toimuv sündmus, mis kutsub esile funktsiooni HandelSubmit. Vorm peaks välja nägema selline:

"kasuta klienti";
importida Reageerige, { useState } alates"reageerida";
eksportidavaikimisifunktsiooniLehekülg() {
konst [nimi, komplektnimi] = useState("");
konst [email, setemail] = useState("");
konst käepideEsita = asünkr (e) => {
 e.preventDefault();
 };
tagasi (



 type={text}
 kohatäide="Lisa nimi"
 väärtus={nimi}
 onChange={setname((e) => e.target.value)}
 />
 type={text}
 kohatäide="Lisa e-posti aadress"
 väärtus={email}
 onChange={setemail((e) => e.target.value)}
 />
"Esita">Esita</button>
 </form>
 );
}

Funktsioonis handleSubmit kasutage tõmbamismeetodit, et esitada päring marsruudile /api/db/createuser.

konst käepideEsita = asünkr (e) => {
 e.preventDefault();
konst kasutaja = ootama tõmba("/api/db/createuser", {
 Sisu tüüp: "rakendus/json",
 keha: JSON.stringify({ nimi, email }),
 });
};

Nüüd, kui vorm on esitatud, loob Prisma tabelis Kasutajad uue kasutajakirje.

Tehke Prismaga rohkem

Saate kasutada Prismat PostgreSQL-i andmebaasiga ühenduse loomiseks ja rakendusest Next.js päringute tegemiseks.

Lisaks uute kirjete andmebaasi lisamisele saate käivitada ka muid SQL-käske. Näiteks saate ridu kustutada, konkreetsete tingimuste alusel ridu valida ja isegi andmebaasi salvestatud olemasolevaid andmeid värskendada.