Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

At interagere med en PostgreSQL-database eller enhver anden database øger direkte mængden af ​​SQL, du skriver. Dette kan introducere sikkerhedsproblemer såsom SQL-injektionsangreb og begrænser portabiliteten af ​​din database. Det er tilrådeligt at bruge en ORM (Object Relation Mapper) som Prisma, der giver et abstraktionslag oven på din database.

Lær, hvordan du bruger Prisma i Next.js til at oprette forbindelse til og interagere med en PostgreSQL-database.

Oprettelse af en Next.js-applikation

Før du opretter en Next.js-applikation, skal du sikre dig, at du har Node og npm installeret i dit udviklingsmiljø.

Opret en Next.js-applikation kaldet prisma-next ved at køre denne kommando i din terminal:

npx create-next-app prisma-next

Dette vil oprette en ny mappe kaldet prisma-next med grundlæggende filer for at komme i gang.

Naviger til prisma-next-biblioteket og start udviklingsserveren ved hjælp af denne kommando:

npm køre dev

Dette starter en udviklingsserver kl http://localhost: 3000.

Dette er de grundlæggende trin for at oprette en ny Next.js-applikation. Du kan lære mere om Next.js-funktionerne ved at henvise til denne artikel om hvorfor migrere til Next.js.

Installation af Prisma Client

At begynde at bruge Prisma, skal du bruge prisma- og @prisma/klient-pakkerne. prisma er Prisma CLI-værktøjet, mens @prisma/client er en autogenereret forespørgselsbygger, der hjælper dig med at forespørge i din database.

Installer disse to pakker via npm.

npm installer prisma @prisma/klient

Derefter initialiseres prisma ved at køre kommandoen npx prisma init på terminalen.

npx prisma init

Dette vil generere en ny fil kaldet schema.prisma som indeholder databaseskemaet og en .env fil, hvortil du tilføjer databaseforbindelsens URL.

Tilføjelse af forbindelses-URL

Du skal bruge en forbindelses-URL for at forbinde prisma til din PostgreSQL database. Det generelle format for en forbindelses-URL er dette:

postgres://{brugernavn}:{adgangskode}@{værtsnavn}:{port}/{databasenavn}

Erstat elementerne i krøllede parenteser med dine egne databasedetaljer, og gem dem derefter i .env-filen:

DATABASE_URL = "din forbindelsesstreng"

Angiv derefter databaseforbindelsens URL i schema.prisma:

datakilde db {
 provider = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definition af databaseskemaet

Databaseskemaet er en struktur, der definerer datamodellen for din database. Den specificerer tabellerne, kolonnerne og relationerne mellem tabeller i databasen, såvel som eventuelle begrænsninger og indekser, som databasen skal bruge.

For at oprette et skema til en database med en brugertabel skal du åbne filen schema.prisma og tilføje en brugermodel.

model bruger {
 id String @default (cuid()) @id
 navnestreng?
 e-mail String @unique
}

Brugermodellen har en id-kolonne, som er den primære nøgle, en navnekolonne af typestreng og en e-mailkolonne, der skal være unik.

Efter at have defineret datamodellen, skal du implementere dit skema til databasen ved hjælp af npx prisma dbskubbe kommando.

npx prisma db push

Denne kommando opretter de faktiske tabeller i databasen.

Brug af Prisma i Next.js

For at bruge Prisma i Next.js skal du oprette en prisma-klientinstans.

Generer først Prisma-klienten.

npx prisma generere

Opret derefter en ny mappe kaldet lib og tilføj en ny fil med navnet prisma.js i den. Tilføj følgende kode i denne fil for at oprette en prisma-klientinstans.

importere { PrismaClient } fra"@prisma/klient";
lade prisma;
hvis (typevindue"udefineret") {
hvis (process.env. NODE_ENV "produktion") {
 prisma = ny PrismaClient();
 } andet {
hvis (!global.prisma) {
 global.prisma = ny PrismaClient();
 }


 prisma = global.prisma;
 }
}
eksportStandard prisma;

Nu kan du importere prismaklienten som "prisma" i dine filer og begynde at forespørge databasen.

Forespørgsel til databasen i en Next.js API-rute

Prisma bruges typisk på serversiden, hvor den sikkert kan interagere med din database. I en Next.js-applikation kan du opsætte en API-rute, der bruger Prisma til at hente data fra databasen og returnere dem til klienten. Siderne eller komponenterne kan derefter hente data fra API-ruten ved hjælp af en HTTP-bibliotek som Axios eller fetch.

Opret API-ruten ved at åbne sider/api-mappen og oprette en ny undermappe ved navn db. I denne mappe skal du oprette en fil kaldet createuser.js og tilføje følgende handlerfunktion.

importere prisma fra"@/lib/prisma";
eksportStandardasynkronfungerehandler(kræve, res) {
konst { navn, e-mail } = req.query;


prøve {
konst nyUer = vente prisma. User.create({
 data: {
 navn,
 e-mail,
 },
 });
 res.json({ bruger: nyUer, fejl: nul });
 } fangst (fejl) {
 res.json({ fejl: fejl besked, bruger: nul });
 }
}

Denne funktion henter navn og e-mail fra anmodningens krop. Derefter, i prøv/fang-blokken, bruger den oprettelsesmetoden fra Prisma-klienten til at oprette en ny bruger. Funktionen returnerer et JSON-objekt, der indeholder brugeren og fejlmeddelelsen, hvis nogen.

I en af ​​dine komponenter kan du nu lave en anmodning til denne API-rute. For at demonstrere skal du oprette en ny mappe med navnet profil i appbiblioteket og tilføje en ny fil med navnet page.js. Tilføj derefter en simpel formular, der indeholder to inputfelter til navn og e-mail og en send-knap.

Tilføj en hændelse ved indsendelse på formularen, der kalder en funktion kaldet handleSubmit. Formularen skal se sådan ud:

"brug klient";
importere Reager, { useState } fra"reagere";
eksportStandardfungereSide() {
konst [navn, sætnavn] = useState("");
konst [email, setemail] = useState("");


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


Vend tilbage (




 type={tekst}
 pladsholder="Tilføj navn"
 værdi={navn}
 onChange={sætnavn((e) => e.target.value)}
 />


 type={tekst}
 pladsholder="Tilføj e-mail"
 værdi={email}
 onChange={setemail((e) => e.target.value)}
 />

I handleSubmit-funktionen skal du bruge hentemetoden til at lave en anmodning til ruten /api/db/createuser.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
konst bruger = vente hente("/api/db/createuser", {
 Indholdstype: "applikation/json",
 legeme: JSON.stringify({ navn, e-mail }),
 });
};

Nu, når formularen er indsendt, vil Prisma oprette en ny brugerpost i brugertabellen.

Gør mere med Prisma

Du kan bruge Prisma til at oprette forbindelse til og forespørge på en PostgreSQL-database fra en Next.js-applikation.

Udover at tilføje nye poster til databasen, kan du også køre andre SQL-kommandoer. For eksempel kan du slette rækker, vælge rækker baseret på specifikke forhold og endda opdatere eksisterende data, der er gemt i databasen.