Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Å samhandle med en PostgreSQL-database eller en annen database øker direkte mengden SQL du skriver. Dette kan introdusere sikkerhetsproblemer som SQL-injeksjonsangrep og begrenser portabiliteten til databasen. Det er tilrådelig å bruke en ORM (Object Relation Mapper) som Prisma som gir et abstraksjonslag på toppen av databasen din.

Lær hvordan du bruker Prisma i Next.js for å koble til og samhandle med en PostgreSQL-database.

Opprette en Next.js-applikasjon

Før du oppretter en Next.js-applikasjon, sørg for at du har Node og npm installert i utviklingsmiljøet ditt.

Lag en Next.js-applikasjon kalt prisma-next ved å kjøre denne kommandoen i terminalen din:

npx create-next-app prisma-next

Dette vil opprette en ny katalog kalt prisma-next med grunnleggende filer for å komme i gang.

Naviger til prisma-next-katalogen og start utviklingsserveren ved å bruke denne kommandoen:

instagram viewer 
npm kjøre dev

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

Dette er de grunnleggende trinnene for å lage en ny Next.js-applikasjon. Du kan lære mer om Next.js-funksjonene ved å se denne artikkelen om hvorfor migrere til Next.js.

Installere Prisma Client

For å begynne å bruke Prisma, trenger du prisma- og @prisma/klient-pakkene. prisma er Prisma CLI-verktøyet mens @prisma/client er en automatisk generert spørringsbygger som vil hjelpe deg å spørre databasen din.

Installer disse to pakkene via npm.

npm installer prisma @prisma/klient

Deretter initialiser prisma ved å kjøre npx prisma init-kommandoen på terminalen.

npx prisma init

Dette vil generere en ny fil kalt schema.prisma som inneholder databaseskjemaet og en .env filen som du legger til databasetilkoblings-URLen til.

Legger til tilkoblings-URL

Du trenger en tilkoblings-URL for å koble prisma til din PostgreSQL-database. Det generelle formatet for en tilkoblings-URL er dette:

postgres://{brukernavn}:{passord}@{vertsnavn}:{port}/{databasenavn}

Erstatt elementene i krøllete parenteser med dine egne databasedetaljer og lagre dem i .env-filen:

DATABASE_URL = "tilkoblingsstrengen din"

Deretter spesifiser URL-adressen til databasetilkoblingen i schema.prisma:

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

Definere databaseskjemaet

Databaseskjemaet er en struktur som definerer datamodellen til databasen din. Den spesifiserer tabellene, kolonnene og relasjonene mellom tabeller i databasen, samt eventuelle begrensninger og indekser databasen skal bruke.

For å lage et skjema for en database med en brukertabell, åpne schema.prisma-filen og legg til en brukermodell.

modell bruker {
 id-streng @default (cuid()) @id
 navnestreng?
 e-post String @unique
}

Brukermodellen har en id-kolonne som er primærnøkkelen, en navnekolonne av typen streng og en e-postkolonne som skal være unik.

Etter å ha definert datamodellen, må du distribuere skjemaet til databasen ved hjelp av npx prisma dbtrykk kommando.

npx prisma db push

Denne kommandoen oppretter de faktiske tabellene i databasen.

Bruker Prisma i Next.js

For å bruke Prisma i Next.js, må du opprette en prisma-klientforekomst.

Generer først Prisma-klienten.

npx prisma generere

Deretter oppretter du en ny mappe kalt lib og legger til en ny fil med navnet prisma.js i den. I denne filen legger du til følgende kode for å lage en prismaklientforekomst.

import { PrismaClient } fra"@prisma/klient";
la prisma;
hvis (typevindu"udefinert") {
hvis (process.env. NODE_ENV "produksjon") {
 prisma = ny PrismaClient();
 } ellers {
hvis (!global.prisma) {
 global.prisma = ny PrismaClient();
 }


 prisma = global.prisma;
 }
}
eksportmisligholde prisma;

Nå kan du importere prismaklienten som "prisma" i filene dine, og begynne å spørre databasen.

Spørre databasen i en Next.js API-rute

Prisma brukes vanligvis på serversiden, hvor den trygt kan samhandle med databasen din. I en Next.js-applikasjon kan du sette opp en API-rute som bruker Prisma til å hente data fra databasen og returnere den til klienten. Sidene eller komponentene kan deretter hente data fra API-ruten ved hjelp av en HTTP-bibliotek som Axios eller hente.

Lag API-ruten ved å åpne sidene/api-mappen og opprette en ny undermappe kalt db. I denne mappen oppretter du en fil som heter createuser.js og legg til følgende behandlerfunksjon.

import prisma fra"@/lib/prisma";
eksportmisligholdeasynkronfunksjonhandler(krav, res) {
konst { navn, e-post } = req.query;


prøve {
konst newUer = avvente prisma. User.create({
 data: {
 Navn,
 e-post,
 },
 });
 res.json({ bruker: newUer, feil: null });
 } å fange (feil) {
 res.json({ feil: feilmelding, bruker: null });
 }
}

Denne funksjonen henter navnet og e-posten fra forespørselsteksten. Deretter, i try/catch-blokken, bruker den opprettelsesmetoden levert av Prisma-klienten for å opprette en ny bruker. Funksjonen returnerer et JSON-objekt som inneholder brukeren og feilmeldingen hvis noen.

I en av komponentene dine kan du nå sende en forespørsel til denne API-ruten. For å demonstrere, opprett en ny mappe kalt profil i appkatalogen og legg til en ny fil med navnet page.js. Legg deretter til et enkelt skjema som inneholder to inntastingsbokser for navnet og e-posten og en send-knapp.

På skjemaet legger du til en ved-innsending-hendelse som kaller en funksjon kalt handleSubmit. Skjemaet skal se slik ut:

"bruk klient";
import Reager, { useState } fra"reagere";
eksportmisligholdefunksjonSide() {
konst [navn, settnavn] = brukState("");
konst [email, setemail] = useState("");


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


komme tilbake (




 type={tekst}
 plassholder="Legg til navn"
 verdi={navn}
 onChange={settnavn((e) => e.target.value)}
 />


 type={tekst}
 plassholder="Legg til e-post"
 verdi={email}
 onChange={setemail((e) => e.target.value)}
 />

I handleSubmit-funksjonen bruker du hentemetoden for å sende en forespørsel til ruten /api/db/createuser.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
konst bruker = avvente hente("/api/db/createuser", {
 Innholdstype: "applikasjon/json",
 kropp: JSON.stringify({ navn, e-post }),
 });
};

Nå, når skjemaet er sendt inn, vil Prisma opprette en ny brukerpost i brukertabellen.

Gjør mer med Prisma

Du kan bruke Prisma til å koble til og spørre en PostgreSQL-database fra en Next.js-applikasjon.

I tillegg til å legge til nye poster i databasen, kan du også kjøre andre SQL-kommandoer. Du kan for eksempel slette rader, velge rader basert på spesifikke forhold, og til og med oppdatere eksisterende data som er lagret i databasen.