Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Interactie met een PostgreSQL-database of een andere database verhoogt direct de hoeveelheid SQL die u schrijft. Dit kan beveiligingsproblemen zoals SQL-injectie-aanvallen introduceren en de overdraagbaarheid van uw database beperken. Het is aan te raden om een ​​ORM (Object Relation Mapper) zoals Prisma te gebruiken die zorgt voor een abstractielaag bovenop je database.

Leer hoe u Prisma in Next.js kunt gebruiken om verbinding te maken met en interactie te hebben met een PostgreSQL-database.

Een Next.js-toepassing maken

Voordat u een Next.js-toepassing maakt, moet u ervoor zorgen dat u dat hebt gedaan Node en npm geïnstalleerd in uw ontwikkelomgeving.

Maak een Next.js-toepassing met de naam prisma-next door deze opdracht in uw terminal uit te voeren:

npx create-next-app prisma-next

Hiermee wordt een nieuwe map gemaakt met de naam prisma-next met basisbestanden om aan de slag te gaan.

instagram viewer

Navigeer naar de prisma-next directory en start de ontwikkelserver met deze opdracht:

npm run dev

Dit start een ontwikkelingsserver op http://localhost: 3000.

Dit zijn de basisstappen voor het maken van een nieuwe Next.js-toepassing. U kunt meer leren over de Next.js-functies door dit artikel te raadplegen op waarom migreren naar Next.js.

De Prisma-client installeren

Om te beginnen met gebruiken Prisma, hebt u de pakketten prisma en @prisma/client nodig. prisma is de Prisma CLI-tool, terwijl @prisma/client een automatisch gegenereerde querybuilder is waarmee u uw database kunt doorzoeken.

Installeer deze twee pakketten via npm.

npm installeer prisma @prisma/client

Initialiseer vervolgens prisma door de opdracht npx prisma init op de terminal uit te voeren.

npx prisma begin

Dit genereert een nieuw bestand met de naam schema.prisma die het databaseschema en een .env bestand waaraan u de databaseverbindings-URL toevoegt.

De verbindings-URL toevoegen

U hebt een verbindings-URL nodig om prisma met uw te verbinden PostgreSQL-database. Het algemene formaat voor een verbindings-URL is dit:

postgres://{gebruikersnaam}:{wachtwoord}@{hostnaam}:{port}/{databasenaam}

Vervang de elementen tussen accolades door uw eigen databasegegevens en sla deze vervolgens op in het .env-bestand:

DATABASE_URL = "uw verbindingsreeks"

Geef vervolgens in schema.prisma de databaseverbindings-URL op:

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

Het databaseschema definiëren

Het databaseschema is een structuur die het gegevensmodel van uw database definieert. Het specificeert de tabellen, kolommen en relaties tussen tabellen in de database, evenals eventuele beperkingen en indexen die de database zou moeten gebruiken.

Als u een schema wilt maken voor een database met een gebruikerstabel, opent u het bestand schema.prisma en voegt u een gebruikersmodel toe.

modelgebruiker {
 id Tekenreeks @standaard (cuid()) @id
 naam String?
 e-mail String @unique
}

Het gebruikersmodel heeft een id-kolom die de primaire sleutel is, een naamkolom van het type tekenreeks en een e-mailkolom die uniek moet zijn.

Nadat u het gegevensmodel hebt gedefinieerd, moet u uw schema implementeren in de database met behulp van de npx prismadbduw commando.

npx prisma db push

Met deze opdracht worden de daadwerkelijke tabellen in de database gemaakt.

Prisma gebruiken in Next.js

Om Prisma in Next.js te gebruiken, moet u een prisma-clientinstantie maken.

Genereer eerst de Prisma-client.

npx prisma genereren

Maak vervolgens een nieuwe map met de naam lib en voeg er een nieuw bestand met de naam prisma.js aan toe. Voeg in dit bestand de volgende code toe om een ​​prisma-clientinstantie te maken.

importeren { Prisma Client } van"@prisma/klant";
laten prisma;
als (soort vanraam"onbepaald") {
als (proces.env. NODE_ENV "productie") {
 prisma = nieuw PrismaClient();
 } anders {
als (!global.prisma) {
 globaal.prisma = nieuw PrismaClient();
 }


 prisma = globaal.prisma;
 }
}
exporterenstandaard prisma;

Nu kunt u de prisma-client als "prisma" in uw bestanden importeren en beginnen met het doorzoeken van de database.

De database opvragen in een Next.js API-route

Prisma wordt meestal gebruikt aan de serverzijde, waar het veilig kan communiceren met uw database. In een Next.js-toepassing kunt u een API-route instellen die Prisma gebruikt om gegevens uit de database op te halen en terug te sturen naar de client. De pagina's of componenten kunnen vervolgens gegevens ophalen van de API-route met behulp van een HTTP-bibliotheek zoals Axios of fetch.

Maak de API-route door de map pages/api te openen en een nieuwe submap met de naam db te maken. Maak in deze map een bestand met de naam createuser.js en voeg de volgende handlerfunctie toe.

importeren prisma van"@/lib/prisma";
exporterenstandaardasynchroonfunctiebehandelaar(req, res) {
const { naam, e-mail } = verzoek.query;


poging {
const nieuweUer = wachten prisma. Gebruiker.creëer({
 gegevens: {
 naam,
 e-mailen,
 },
 });
 res.json({ gebruiker: nieuweUer, fout: nul });
 } vangst (fout) {
 res.json({ fout: foutbericht, gebruiker: nul });
 }
}

Deze functie haalt de naam en het e-mailadres op van de verzoekinstantie. Vervolgens gebruikt het in het try/catch-blok de create-methode van de Prisma Client om een ​​nieuwe gebruiker aan te maken. De functie retourneert een JSON-object met de gebruiker en de eventuele foutmelding.

In een van je componenten kun je nu een verzoek doen aan deze API-route. Maak ter demonstratie een nieuwe map met de naam profile in de app-directory en voeg een nieuw bestand met de naam page.js toe. Voeg vervolgens een eenvoudig formulier toe met twee invoervakken voor de naam en e-mail en een verzendknop.

Voeg op het formulier een On-Submit-gebeurtenis toe die een functie met de naam handleSubmit aanroept. Het formulier zou er als volgt uit moeten zien:

"klant gebruiken";
importeren Reageer, { useState } van"Reageer";
exporterenstandaardfunctieBladzijde() {
const [naam, setnaam] = useState("");
const [email, setemail] = useState("");


const handleSubmit = asynchroon (e) => {
 e.preventDefault();
 };


opbrengst (




 typ={tekst}
 tijdelijke aanduiding="Naam toevoegen"
 waarde={naam}
 onChange={setnaam((e) => e.doelwaarde)}
 />


 typ={tekst}
 tijdelijke aanduiding="E-mail toevoegen"
 waarde={e-mail}
 onChange={setemail((e) => e.doelwaarde)}
 />

Gebruik in de functie handleSubmit de methode fetch om een ​​verzoek te doen aan de /api/db/createuser-route.

const handleSubmit = asynchroon (e) => {
 e.preventDefault();
const gebruiker = wachten ophalen("/api/db/creëergebruiker", {
 Inhoudstype: "toepassing/json",
 lichaam: JSON.stringify({ naam, e-mail }),
 });
};

Nu, wanneer het formulier is verzonden, maakt Prisma een nieuw gebruikersrecord aan in de gebruikerstabel.

Meer doen met Prisma

U kunt Prisma gebruiken om verbinding te maken met en query's uit te voeren op een PostgreSQL-database vanuit een Next.js-toepassing.

Naast het toevoegen van nieuwe records aan de database, kunt u ook andere SQL-commando's uitvoeren. U kunt bijvoorbeeld rijen verwijderen, rijen selecteren op basis van specifieke voorwaarden en zelfs bestaande gegevens bijwerken die in de database zijn opgeslagen.