Interakcija s PostgreSQL bazom podataka ili bilo kojom drugom bazom podataka izravno povećava količinu SQL-a koji pišete. To može dovesti do sigurnosnih problema kao što su napadi SQL injekcijom i ograničava prenosivost vaše baze podataka. Preporučljivo je koristiti ORM (Object Relation Mapper) poput Prisme koji pruža sloj apstrakcije na vrhu vaše baze podataka.
Naučite kako koristiti Prismu u Next.js za povezivanje i interakciju s PostgreSQL bazom podataka.
Stvaranje Next.js aplikacije
Prije izrade Next.js aplikacije, provjerite jeste li Čvor i npm instalirani u vašem razvojnom okruženju.
Napravite Next.js aplikaciju pod nazivom prisma-next pokretanjem ove naredbe na vašem terminalu:
npx create-next-app prisma-next
Ovo će stvoriti novi direktorij pod nazivom prisma-next s osnovnim datotekama za početak.
Dođite do direktorija prisma-next i pokrenite razvojni poslužitelj pomoću ove naredbe:
npm run devOvo pokreće razvojni poslužitelj na http://localhost: 3000.
Ovo su osnovni koraci za stvaranje nove Next.js aplikacije. Više o značajkama Next.js možete saznati u ovom članku zašto migrirati na Next.js.
Instaliranje Prisma klijenta
Za početak korištenja Prizma, trebat će vam paketi prisma i @prisma/client. prisma je Prisma CLI alat dok je @prisma/client automatski generirani alat za izradu upita koji će vam pomoći u postavljanju upita vašoj bazi podataka.
Instalirajte ova dva paketa putem npm-a.
npm instaliraj prismu @prisma/klijent
Zatim inicijalizirajte prismu pokretanjem naredbe npx prisma init na terminalu.
npx prisma init
Ovo će generirati novu datoteku pod nazivom shema.prizma koji sadrži shemu baze podataka i a .env datoteku kojoj ćete dodati URL veze s bazom podataka.
Dodavanje URL veze
Potreban vam je URL veze za povezivanje prizme s vašim PostgreSQL baza podataka. Opći format za URL veze je sljedeći:
postgres://{username}:{password}@{hostname}:{port}/{database-name}
Zamijenite elemente u vitičastim zagradama pojedinostima vlastite baze podataka, a zatim ih spremite u .env datoteku:
DATABASE_URL = ” vaš niz veze”
Zatim u schema.prisma navedite URL veze s bazom podataka:
izvor podataka db {
provider = "PostgreSQL"
url = env("DATABASE_URL")
}
Definiranje sheme baze podataka
Shema baze podataka je struktura koja definira podatkovni model vaše baze podataka. Određuje tablice, stupce i odnose između tablica u bazi podataka, kao i sva ograničenja i indekse koje baza podataka treba koristiti.
Da biste stvorili shemu za bazu podataka s tablicom korisnika, otvorite datoteku schema.prisma i dodajte korisnički model.
korisnik modela {
id String @default (cuid()) @id
ime String?
email String @unique
}
Model User ima stupac ID-a koji je primarni ključ, stupac imena tipa string i stupac e-pošte koji bi trebao biti jedinstven.
Nakon definiranja podatkovnog modela, trebate implementirati svoju shemu u bazu podataka pomoću npx prizma dbgurnuti naredba.
npx prisma db push
Ova naredba stvara stvarne tablice u bazi podataka.
Korištenje Prisme u Next.js
Da biste koristili Prismu u Next.js, trebate stvoriti instancu prisma klijenta.
Prvo generirajte Prisma klijenta.
npx prizma generirati
Zatim stvorite novu mapu pod nazivom lib i u nju dodajte novu datoteku pod nazivom prisma.js. U ovu datoteku dodajte sljedeći kod za stvaranje instance prisma klijenta.
uvoz { PrismaClient } iz"@prisma/klijent";
neka prizma;ako (vrstaprozor"nedefiniran") {
ako (process.env. ČVOR_ENV "proizvodnja") {
prizma = novi PrismaClient();
} drugo {
ako (!global.prisma) {
globalno.prizma = novi PrismaClient();
}prizma = globalna.prizma;
}
}
izvozzadano prizma;
Sada možete uvesti prisma klijenta kao "prisma" u svoje datoteke i početi postavljati upite bazi podataka.
Upit baze podataka u Next.js API ruti
Prisma se obično koristi na strani poslužitelja, gdje može sigurno komunicirati s vašom bazom podataka. U aplikaciji Next.js možete postaviti API rutu koja koristi Prisma za dohvaćanje podataka iz baze podataka i njihovo vraćanje klijentu. Stranice ili komponente tada mogu dohvatiti podatke s API rute pomoću HTTP biblioteka kao što je Axios ili fetch.
Kreirajte API rutu otvaranjem mape pages/api i stvaranjem nove podmape pod nazivom db. U ovoj mapi kreirajte datoteku pod nazivom createuser.js i dodajte sljedeću funkciju rukovatelja.
uvoz prizma iz"@/lib/prisma";izvozzadanoasinkronifunkcijarukovatelj(zahtjev, res) {
konst { ime, email } = req.query;probati {
konst noviUer = čekati prizma. User.create({
podaci: {
Ime,
email,
},
});
res.json({ korisnik: noviji, greška: ništavan });
} ulov (pogreška) {
res.json({ greška: error.message, korisnik: ništavan });
}
}
Ova funkcija dobiva ime i e-poštu iz tijela zahtjeva. Zatim, u bloku try/catch, koristi metodu stvaranja koju pruža Prisma klijent za stvaranje novog korisnika. Funkcija vraća JSON objekt koji sadrži korisnika i poruku o pogrešci ako postoji.
U jednoj od svojih komponenti sada možete podnijeti zahtjev ovoj API ruti. Za demonstraciju, stvorite novu mapu pod nazivom profile u direktoriju aplikacije i dodajte novu datoteku pod nazivom page.js. Zatim dodajte jednostavan obrazac koji sadrži dva okvira za unos imena i e-pošte te gumb za slanje.
U obrazac dodajte događaj pri slanju koji poziva funkciju pod nazivom handleSubmit. Obrazac bi trebao izgledati ovako:
"koristi klijent";
uvoz Reagiraj, {useState} iz"reagirati";izvozzadanofunkcijaStranica() {
konst [name, setname] = useState("");
konst [e-pošta, setemail] = useState("");konst handleSubmit = asinkroni (e) => {
e.preventDefault();
};povratak (
tip={tekst}
rezervirano mjesto="Dodaj e-poštu"
vrijednost={e-pošta}
onChange={setemail((e) => e.target.value)}
/>
U funkciji handleSubmit upotrijebite metodu dohvaćanja za slanje zahtjeva prema ruti /api/db/createuser.
konst handleSubmit = asinkroni (e) => {
e.preventDefault();
konst korisnik = čekati dohvati ("/api/db/createuser", {
ContentType: "aplikacija/json",
tijelo: JSON.stringify({ ime, e-pošta }),
});
};
Sada, kada se obrazac pošalje, Prisma će stvoriti novi korisnički zapis u tablici korisnika.
Činiti više s Prismom
Možete koristiti Prismu za povezivanje i postavljanje upita PostgreSQL bazi podataka iz Next.js aplikacije.
Osim dodavanja novih zapisa u bazu podataka, možete pokrenuti i druge SQL naredbe. Na primjer, možete brisati retke, birati retke na temelju određenih uvjeta, pa čak i ažurirati postojeće podatke pohranjene u bazi podataka.
