Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Att interagera med en PostgreSQL-databas eller någon annan databas ökar direkt mängden SQL du skriver. Detta kan introducera säkerhetsproblem som SQL-injektionsattacker och begränsar portabiliteten för din databas. Det är tillrådligt att använda en ORM (Object Relation Mapper) som Prisma som tillhandahåller ett abstraktionslager ovanpå din databas.

Lär dig hur du använder Prisma i Next.js för att ansluta till och interagera med en PostgreSQL-databas.

Skapa en Next.js-applikation

Innan du skapar en Next.js-applikation, se till att du har Nod och npm installerade i din utvecklingsmiljö.

Skapa en Next.js-applikation som heter prisma-next genom att köra det här kommandot i din terminal:

npx create-next-app prisma-next

Detta kommer att skapa en ny katalog som heter prisma-next med grundläggande filer för att komma igång.

Navigera till prisma-next-katalogen och starta utvecklingsservern med detta kommando:

instagram viewer 
npm kör dev

Detta startar en utvecklingsserver kl http://localhost: 3000.

Det här är de grundläggande stegen för att skapa en ny Next.js-applikation. Du kan lära dig mer om Next.js-funktionerna genom att hänvisa till den här artikeln om varför migrera till Next.js.

Installation av Prisma Client

För att börja använda Prisma, behöver du prisma- och @prisma/client-paketen. prisma är Prisma CLI-verktyget medan @prisma/client är en automatiskt genererad frågebyggare som hjälper dig att fråga din databas.

Installera dessa två paket via npm.

npm installera prisma @prisma/klient

Initiera sedan prisma genom att köra kommandot npx prisma init på terminalen.

npx prisma init

Detta kommer att generera en ny fil som heter schema.prisma som innehåller databasschemat och en .env fil som du lägger till webbadressen för databasanslutningen.

Lägger till anslutnings-URL

Du behöver en anslutnings-URL för att ansluta prisma till din PostgreSQL-databas. Det allmänna formatet för en anslutnings-URL är detta:

postgres://{användarnamn}:{lösenord}@{värdnamn}:{port}/{databasnamn}

Byt ut elementen inom parentes med dina egna databasdetaljer och spara dem sedan i .env-filen:

DATABASE_URL = "din anslutningssträng"

Ange sedan webbadressen till databasanslutningen i schema.prisma:

datakälla db {
 provider = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definiera databasschemat

Databasschemat är en struktur som definierar datamodellen för din databas. Den specificerar tabeller, kolumner och relationer mellan tabeller i databasen, såväl som eventuella begränsningar och index som databasen ska använda.

För att skapa ett schema för en databas med en användartabell, öppna filen schema.prisma och lägg till en användarmodell.

modellanvändare {
 id String @default (cuid()) @id
 namn sträng?
 mejla String @unique
}

Användarmodellen har en id-kolumn som är primärnyckeln, en namnkolumn av typsträng och en e-postkolumn som ska vara unik.

Efter att ha definierat datamodellen måste du distribuera ditt schema till databasen med hjälp av npx prisma dbskjuta på kommando.

npx prisma db push

Detta kommando skapar de faktiska tabellerna i databasen.

Använder Prisma i Next.js

För att använda Prisma i Next.js måste du skapa en prismaklientinstans.

Skapa först Prisma-klienten.

npx prisma generera

Skapa sedan en ny mapp som heter lib och lägg till en ny fil med namnet prisma.js i den. I den här filen lägger du till följande kod för att skapa en prismaklientinstans.

importera { PrismaClient } från"@prisma/klient";
låta prisma;
om (sortsfönster"odefinierad") {
om (process.env. NODE_ENV "produktion") {
 prisma = ny PrismaClient();
 } annan {
om (!global.prisma) {
 global.prisma = ny PrismaClient();
 }


 prisma = global.prisma;
 }
}
exporterastandard prisma;

Nu kan du importera prismaklienten som "prisma" i dina filer och börja söka i databasen.

Fråga efter databasen i en Next.js API-rutt

Prisma används vanligtvis på serversidan, där det säkert kan interagera med din databas. I en Next.js-applikation kan du ställa in en API-rutt som använder Prisma för att hämta data från databasen och returnera den till klienten. Sidorna eller komponenterna kan sedan hämta data från API-rutten med hjälp av en HTTP-bibliotek som Axios eller hämta.

Skapa API-rutten genom att öppna mappen sidor/api och skapa en ny undermapp med namnet db. Skapa en fil som heter i den här mappen createuser.js och lägg till följande hanterarfunktion.

importera prisma från"@/lib/prisma";
exporterastandardasynkronfungerahanterare(req, res) {
konst { namn, e-post } = req.query;


Prova {
konst newUer = vänta prisma. User.create({
 data: {
 namn,
 e-post,
 },
 });
 res.json({ användare: newUer, fel: null });
 } fånga (fel) {
 res.json({ fel: felmeddelande, användare: null });
 }
}

Den här funktionen hämtar namn och e-post från förfrågans text. Sedan, i försök/fånga-blocket, använder den skapametoden som tillhandahålls av Prisma-klienten för att skapa en ny användare. Funktionen returnerar ett JSON-objekt som innehåller användaren och eventuellt felmeddelandet.

I en av dina komponenter kan du nu göra en begäran till denna API-rutt. För att demonstrera, skapa en ny mapp med namnet profil i appkatalogen och lägg till en ny fil med namnet page.js. Lägg sedan till ett enkelt formulär som innehåller två inmatningsrutor för namn och e-post och en skicka-knapp.

På formuläret lägger du till en vid-sändningshändelse som anropar en funktion som heter handleSubmit. Formuläret ska se ut så här:

"använd klient";
importera Reagera, { useState } från"reagera";
exporterastandardfungeraSida() {
konst [namn, setnamn] = useState("");
konst [email, setemail] = useState("");


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


lämna tillbaka (




 typ={text}
 platshållare="Lägg till namn"
 värde={namn}
 onChange={setnamn((e) => e.target.value)}
 />


 typ={text}
 platshållare="Lägg till e-post"
 värde={email}
 onChange={setemail((e) => e.target.value)}
 />

I handleSubmit-funktionen använder du hämtametoden för att göra en begäran till rutten /api/db/createuser.

konst handleSubmit = asynkron (e) => {
 e.preventDefault();
konst användare = vänta hämta("/api/db/createuser", {
 Innehållstyp: "applikation/json",
 kropp: JSON.stringify({ namn, e-post }),
 });
};

Nu, när formuläret har skickats in, kommer Prisma att skapa en ny användarpost i Användartabellen.

Göra mer med Prisma

Du kan använda Prisma för att ansluta till och fråga en PostgreSQL-databas från en Next.js-applikation.

Förutom att lägga till nya poster i databasen kan du även köra andra SQL-kommandon. Du kan till exempel ta bort rader, välja rader baserat på specifika villkor och till och med uppdatera befintliga data som lagras i databasen.