Kā savienot PostgreSQL ar Next.js lietojumprogrammu, izmantojot Prisma

Mijiedarbība ar PostgreSQL datu bāzi vai jebkuru citu datu bāzi tieši palielina rakstītās SQL apjomu. Tas var radīt drošības problēmas, piemēram, SQL injekcijas uzbrukumus un ierobežot datu bāzes pārnesamību. Ieteicams izmantot ORM (Object Relation Mapper), piemēram, Prisma, kas nodrošina abstrakcijas slāni jūsu datu bāzes augšpusē.

Uzziniet, kā lietotnē Next.js izmantot Prisma, lai izveidotu savienojumu ar PostgreSQL datu bāzi un mijiedarbotos ar to.

Next.js lietojumprogrammas izveide

Pirms Next.js lietojumprogrammas izveides pārliecinieties, ka jums ir Instalēts mezgls un npm savā attīstības vidē.

Izveidojiet Next.js lietojumprogrammu ar nosaukumu prisma-next, terminālī izpildot šo komandu:

npx create-next-app prisma-next

Tādējādi tiks izveidots jauns direktorijs ar nosaukumu Prisma-next ar pamata failiem, lai sāktu darbu.

Dodieties uz direktoriju Prisma-next un startējiet izstrādes serveri, izmantojot šo komandu:

npm palaist dev

Tas sāk izstrādes serveri plkst http://localhost: 3000.

Šie ir pamata soļi jaunas Next.js lietojumprogrammas izveidei. Lai uzzinātu vairāk par Next.js funkcijām, skatiet šo rakstu par kāpēc migrēt uz Next.js.

Prisma Client instalēšana

Lai sāktu lietot Prisma, jums būs nepieciešamas paketes Prisma un @prisma/client. prisma ir Prisma CLI rīks, savukārt @prisma/client ir automātiski ģenerēts vaicājumu veidotājs, kas palīdzēs veikt vaicājumu datubāzē.

Instalējiet šīs divas pakotnes, izmantojot npm.

npm instalēt prisma @prisma/client

Pēc tam inicializējiet Prisma, terminālī izpildot komandu npx prisma init.

npx prisma init

Tas ģenerēs jaunu failu ar nosaukumu schema.prisma kas satur datu bāzes shēmu un a .env failu, kuram pievienosit datu bāzes savienojuma URL.

Pievienojot savienojuma URL

Lai savienotu Prisma ar savu, ir nepieciešams savienojuma URL PostgreSQL datu bāze. Savienojuma URL vispārīgais formāts ir šāds:

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

Aizstājiet elementus iekavās ar savu datu bāzes informāciju un pēc tam saglabājiet to .env failā:

DATABASE_URL = "jūsu savienojuma virkne"

Pēc tam programmā schema.prisma norādiet datu bāzes savienojuma URL:

datu avots db {
 sniedzējs = "PostgreSQL"
 url = env("DATU BĀZES_URL")
}

Datu bāzes shēmas definēšana

Datu bāzes shēma ir struktūra, kas nosaka jūsu datu bāzes datu modeli. Tas norāda tabulas, kolonnas un attiecības starp tabulām datu bāzē, kā arī visus ierobežojumus un indeksus, kas datu bāzei jāizmanto.

Lai izveidotu shēmu datubāzei ar lietotāju tabulu, atveriet failu schema.prisma un pievienojiet lietotāja modeli.

model lietotājs {
 id String @default (cuid()) @id
 nosaukums String?
 e-pasta virkne @unikāls
}

Lietotāja modelim ir sleja id, kas ir primārā atslēga, nosaukuma kolonna ar tipa virkni un e-pasta kolonna, kurai jābūt unikālai.

Pēc datu modeļa definēšanas shēma ir jāizvieto datu bāzē, izmantojot npx prisma dbspiediet komandu.

npx prisma db push

Šī komanda datu bāzē izveido faktiskās tabulas.

Prisma izmantošana programmā Next.js

Lai lietotu Prisma programmā Next.js, jums ir jāizveido Prisma klienta instance.

Vispirms ģenerējiet Prisma klientu.

npx prisma ģenerēt

Pēc tam izveidojiet jaunu mapi ar nosaukumu lib un pievienojiet tajā jaunu failu ar nosaukumu prisma.js. Šajā failā pievienojiet šādu kodu, lai izveidotu Prisma klienta instanci.

imports { PrismaClient } no"@prisma/klients";
ļaut prizma;
ja (veidslogs"nenoteikts") {
ja (process.env. NODE_ENV "ražošana") {
 prizma = jauns PrismaClient();
 } cits {
ja (!global.prisma) {
 globālā.prisma = jauns PrismaClient();
 }
 prizma = global.prisma;
 }
}
eksportētnoklusējuma prizma;

Tagad varat importēt Prisma klientu kā “prisma” savos failos un sākt vaicājumu datubāzē.

Datu bāzes vaicājumi Next.js API maršrutā

Prisma parasti tiek izmantota servera pusē, kur tā var droši mijiedarboties ar jūsu datu bāzi. Programmā Next.js varat iestatīt API maršrutu, kas izmanto Prisma, lai izgūtu datus no datu bāzes un atgrieztu tos klientam. Pēc tam lapas vai komponenti var iegūt datus no API maršruta, izmantojot HTTP bibliotēka, piemēram, Axios vai fetch.

Izveidojiet API maršrutu, atverot mapi lapas/api un izveidojot jaunu apakšmapi ar nosaukumu db. Šajā mapē izveidojiet failu ar nosaukumu Createuser.js un pievienojiet šādu apdarinātāja funkciju.

imports prizma no"@/lib/prisma";
eksportētnoklusējumaasinhronsfunkcijuapdarinātājs(req, res) {
konst {vārds, e-pasts} = req.query;
mēģināt {
konst newUer = gaidīt prizma. User.create({
 dati: {
 vārds,
 e-pasts,
 },
 });
 res.json({ lietotājs: jauns lietotājs, kļūda: null });
 } noķert (kļūda) {
 res.json({ kļūda: kļūdas ziņojums, lietotājs: null });
 }
}

Šī funkcija saņem vārdu un e-pastu no pieprasījuma struktūras. Pēc tam try/catch blokā tas izmanto Prisma Client piedāvāto izveides metodi, lai izveidotu jaunu lietotāju. Funkcija atgriež JSON objektu, kurā ir lietotājs un kļūdas ziņojums, ja tāds ir.

Vienā no komponentiem tagad varat iesniegt pieprasījumu šim API maršrutam. Lai demonstrētu, lietojumprogrammu direktorijā izveidojiet jaunu mapi ar nosaukumu Profils un pievienojiet jaunu failu ar nosaukumu page.js. Pēc tam pievienojiet vienkāršu veidlapu, kurā ir divi vārda un e-pasta ievades lodziņi, kā arī iesniegšanas poga.

Veidlapā pievienojiet notikumu iesniegšanas laikā, kas izsauc funkciju, ko sauc par handleSubmit. Veidlapai vajadzētu izskatīties šādi:

"izmantot klientu";
imports Reaģēt, { useState } no"reaģēt";
eksportētnoklusējumafunkcijuLappuse() {
konst [nosaukums, komplekta nosaukums] = useState("");
konst [e-pasts, setemail] = useState("");
konst HandSubmit = asinhrons (e) => {
 e.preventDefault();
 };
atgriezties (



 type={text}
 vietturis="Pievienot vārdu"
 value={name}
 onChange={setname((e) => e.target.value)}
 />
 type={text}
 vietturis="Pievienot e-pastu"
 value={email}
 onChange={setemail((e) => e.target.value)}
 />
"Iesniegt">Iesniegt</button>
 </form>
 );
}

Funkcijā handleSubmit izmantojiet ieneses metodi, lai veiktu pieprasījumu maršrutam /api/db/createuser.

konst HandSubmit = asinhrons (e) => {
 e.preventDefault();
konst lietotājs = gaidīt atnest("/api/db/createuser", {
 Satura veids: "aplikācija/json",
 korpuss: JSON.stringify({vārds, e-pasts }),
 });
};

Tagad, kad veidlapa ir iesniegta, Prisma izveidos jaunu lietotāja ierakstu tabulā User.

Padarīt vairāk ar Prisma

Varat izmantot Prisma, lai izveidotu savienojumu ar PostgreSQL datu bāzi un veiktu tai vaicājumus no lietojumprogrammas Next.js.

Papildus jaunu ierakstu pievienošanai datu bāzei varat palaist arī citas SQL komandas. Piemēram, varat dzēst rindas, atlasīt rindas, pamatojoties uz īpašiem nosacījumiem, un pat atjaunināt esošos datu bāzē saglabātos datus.