Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Vuorovaikutus PostgreSQL-tietokannan tai minkä tahansa muun tietokannan kanssa lisää suoraan kirjoittamasi SQL: n määrää. Tämä voi aiheuttaa tietoturvaongelmia, kuten SQL-injektiohyökkäyksiä, ja rajoittaa tietokantasi siirrettävyyttä. On suositeltavaa käyttää ORM-ohjelmaa (Object Relation Mapper), kuten Prisma, joka tarjoaa abstraktiokerroksen tietokannan päälle.

Opi käyttämään Next.js: n Prismaa yhteyden muodostamiseen PostgreSQL-tietokantaan ja vuorovaikutukseen sen kanssa.

Next.js-sovelluksen luominen

Ennen kuin luot Next.js-sovelluksen, varmista, että sinulla on Node ja npm asennettu kehitysympäristössäsi.

Luo Next.js-sovellus nimeltä prisma-next suorittamalla tämä komento päätteessäsi:

npx create-next-app prisma-next

Tämä luo uuden hakemiston nimeltä prisma-next perustiedostoineen aloittaaksesi.

Siirry prisma-next-hakemistoon ja käynnistä kehityspalvelin tällä komennolla:

instagram viewer 
npm run dev

Tämä käynnistää kehityspalvelimen klo http://localhost: 3000.

Nämä ovat perusvaiheet uuden Next.js-sovelluksen luomiseksi. Saat lisätietoja Next.js-ominaisuuksista tutustumalla tähän artikkeliin miksi siirtyä Next.js: ään.

Prisma-asiakkaan asennus

Aloittaaksesi käytön Prisma, tarvitset prisma- ja @prisma/client-paketit. prisma on Prisma CLI -työkalu, kun taas @prisma/client on automaattisesti luotu kyselynmuodostusohjelma, joka auttaa sinua tekemään kyselyjä tietokannastasi.

Asenna nämä kaksi pakettia npm: n kautta.

npm asenna prisma @prisma/client

Alusta seuraavaksi prisma suorittamalla npx prisma init -komento päätteessä.

npx prisma init

Tämä luo uuden tiedoston nimeltä schema.prisma joka sisältää tietokantaskeeman ja a .env tiedosto, johon lisäät tietokantayhteyden URL-osoitteen.

Yhteyden URL-osoitteen lisääminen

Tarvitset yhteys-URL-osoitteen, jotta voit liittää Prisman laitteeseen PostgreSQL-tietokanta. Yhteyden URL-osoitteen yleinen muoto on tämä:

postgres://{username}:{salasana}@{isäntänimi}:{portti}/{tietokannan-nimi}

Korvaa suluissa olevat elementit omilla tietokantatiedoillasi ja tallenna ne .env-tiedostoon:

DATABASE_URL = ”yhteysmerkkijonosi”

Määritä sitten schema.prismassa tietokantayhteyden URL-osoite:

tietolähde db {
 tarjoaja = "PostgreSQL"
 url = env("DATABASE_URL")
}

Tietokantakaavion määrittely

Tietokantaskeema on rakenne, joka määrittää tietokantasi tietomallin. Se määrittää tietokannan taulukot, sarakkeet ja taulukoiden väliset suhteet sekä mahdolliset rajoitukset ja indeksit, joita tietokannan tulee käyttää.

Jos haluat luoda skeeman tietokannalle, jossa on käyttäjätaulukko, avaa schema.prisma-tiedosto ja lisää käyttäjämalli.

model User {
 id String @oletus (cuid()) @id
 nimi String?
 sähköpostimerkkijono @ainutlaatuinen
}

Käyttäjämallissa on id-sarake, joka on ensisijainen avain, nimisarake, jonka tyyppi on merkkijono, ja sähköpostisarake, jonka tulee olla yksilöllinen.

Kun olet määrittänyt tietomallin, sinun on otettava skeemasi käyttöön tietokantaan käyttämällä npx prisma dbtyöntää komento.

npx prisma db push

Tämä komento luo todelliset taulukot tietokantaan.

Prisman käyttäminen Next.js: ssä

Jotta voit käyttää Prismaa Next.js: ssä, sinun on luotava prisma-asiakasesiintymä.

Luo ensin Prisma-asiakas.

npx prisma tuottaa

Luo sitten uusi kansio nimeltä lib ja lisää siihen uusi tiedosto nimeltä prisma.js. Luo prisma-asiakasesiintymä lisäämällä tähän tiedostoon seuraava koodi.

tuonti { PrismaClient } alkaen"@prisma/asiakas";
antaa prisma;
jos (tyyppiikkuna"määrittelemätön") {
jos (prosessi.env. NODE_ENV "tuotanto") {
 prisma = Uusi PrismaClient();
 } muu {
jos (!global.prisma) {
 global.prisma = Uusi PrismaClient();
 }


 prisma = globaali.prisma;
 }
}
viedäoletuksena prisma;

Nyt voit tuoda prisma-asiakkaan "prismana" tiedostoihisi ja aloittaa tietokannan kyselyn.

Kyselyn tekeminen tietokannasta Next.js-sovellusliittymäreitillä

Prismaa käytetään tyypillisesti palvelinpuolella, jossa se voi turvallisesti olla vuorovaikutuksessa tietokantasi kanssa. Next.js-sovelluksessa voit määrittää API-reitin, joka käyttää Prismaa hakemaan tiedot tietokannasta ja palauttamaan ne asiakkaalle. Sivut tai komponentit voivat sitten hakea tietoja API-reitiltä käyttämällä HTTP-kirjasto, kuten Axios tai hae.

Luo API-reitti avaamalla sivut/api-kansio ja luomalla uusi alikansio nimeltä db. Luo tähän kansioon tiedosto nimeltä createuser.js ja lisää seuraava käsittelijätoiminto.

tuonti prisma alkaen"@/lib/prisma";
viedäoletuksenaasynktoimintokäsittelijä(req, res) {
konst { nimi, sähköpostiosoite } = req.query;


yrittää {
konst uusiUer = odottaa prisma. User.create({
 tiedot: {
 nimi,
 sähköposti,
 },
 });
 res.json({ käyttäjä: uusi, virhe: tyhjä });
 } ottaa kiinni (virhe) {
 res.json({ virhe: virheviesti, käyttäjä: tyhjä });
 }
}

Tämä toiminto saa nimen ja sähköpostiosoitteen pyynnön rungosta. Sitten try/catch-lohkossa se käyttää Prisma Clientin tarjoamaa luomismenetelmää uuden käyttäjän luomiseen. Funktio palauttaa JSON-objektin, joka sisältää käyttäjän ja mahdollisen virhesanoman.

Yhdessä komponentissasi voit nyt tehdä pyynnön tälle API-reitille. Esittelyä varten luo uusi profiili-niminen kansio sovellushakemistoon ja lisää uusi tiedosto nimeltä page.js. Lisää sitten yksinkertainen lomake, jossa on kaksi syöttöruutua nimelle ja sähköpostiosoitteelle sekä lähetyspainike.

Lisää lomakkeeseen lähetystapahtuma, joka kutsuu funktiota nimeltä handleSubmit. Lomakkeen pitäisi näyttää tältä:

"käytä asiakasta";
tuonti Reagoi, { useState } alkaen"reagoi";
viedäoletuksenatoimintoSivu() {
konst [nimi, joukkonimi] = useState("");
konst [sähköposti, setemail] = useState("");


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


palata (




 type={text}
 paikkamerkki="Lisää nimi"
 arvo={nimi}
 onChange={setname((e) => e.target.value)}
 />


 type={text}
 paikkamerkki="Lisää sähköpostiosoite"
 arvo={email}
 onChange={setemail((e) => e.target.value)}
 />

Käytä handleSubmit-funktiossa fetch-menetelmää tehdäksesi pyynnön /api/db/createuser-reitille.

konst handleSubmit = asynk (e) => {
 e.preventDefault();
konst käyttäjä = odottaa hae("/api/db/createuser", {
 Sisältötyyppi: "sovellus/json",
 runko: JSON.stringify({ nimi, sähköpostiosoite }),
 });
};

Nyt, kun lomake on lähetetty, Prisma luo uuden käyttäjätietueen Käyttäjätaulukkoon.

Tee enemmän Prismalla

Prisman avulla voit muodostaa yhteyden PostgreSQL-tietokantaan ja tehdä kyselyjä Next.js-sovelluksesta.

Uusien tietueiden lisäämisen lisäksi tietokantaan voit suorittaa myös muita SQL-komentoja. Voit esimerkiksi poistaa rivejä, valita rivejä tiettyjen ehtojen perusteella ja jopa päivittää tietokantaan tallennettuja tietoja.