Interakce s PostgreSQL databází nebo jakoukoli jinou databází přímo zvyšuje množství SQL, které píšete. To může způsobit bezpečnostní problémy, jako jsou útoky SQL injection, a omezit přenositelnost vaší databáze. Je vhodné použít ORM (Object Relation Mapper), jako je Prisma, který poskytuje abstrakční vrstvu nad vaší databází.
Naučte se používat Prisma v Next.js pro připojení k databázi PostgreSQL a interakci s ní.
Vytvoření aplikace Next.js
Před vytvořením aplikace Next.js se ujistěte, že máte Nainstalovaný uzel a npm ve vašem vývojovém prostředí.
Vytvořte aplikaci Next.js s názvem prisma-next spuštěním tohoto příkazu ve vašem terminálu:
npx create-next-app prisma-next
Tím se vytvoří nový adresář nazvaný prisma-next se základními soubory, abyste mohli začít.
Přejděte do adresáře prisma-next a spusťte vývojový server pomocí tohoto příkazu:
npm spustit devTím se spustí vývojový server na http://localhost: 3000.
Toto jsou základní kroky pro vytvoření nové aplikace Next.js. Další informace o funkcích Next.js naleznete v tomto článku na proč migrovat na Next.js.
Instalace klienta Prisma
Chcete-li začít používat Prisma, budete potřebovat balíčky prisma a @prisma/client. prisma je nástroj Prisma CLI, zatímco @prisma/client je automaticky generovaný tvůrce dotazů, který vám pomůže dotazovat se ve vaší databázi.
Nainstalujte tyto dva balíčky přes npm.
npm nainstalovat prisma @prisma/client
Dále inicializujte prisma spuštěním příkazu npx prisma init na terminálu.
npx prisma init
Tím se vygeneruje nový soubor s názvem schema.prisma který obsahuje schéma databáze a a .env soubor, do kterého přidáte adresu URL připojení k databázi.
Přidání adresy URL připojení
Pro připojení prisma k vašemu potřebujete adresu URL připojení PostgreSQL databáze. Obecný formát adresy URL připojení je tento:
postgres://{username}:{password}@{hostname}:{port}/{database-name}
Nahraďte prvky ve složených závorkách svými vlastními údaji o databázi a poté je uložte do souboru .env:
DATABASE_URL = ”váš připojovací řetězec”
Poté v schema.prisma zadejte adresu URL připojení k databázi:
zdroj dat db {
poskytovatel = "PostgreSQL"
url = env("DATABASE_URL")
}
Definování schématu databáze
Databázové schéma je struktura, která definuje datový model vaší databáze. Určuje tabulky, sloupce a vztahy mezi tabulkami v databázi, stejně jako veškerá omezení a indexy, které by databáze měla používat.
Chcete-li vytvořit schéma pro databázi s tabulkou uživatelů, otevřete soubor schema.prisma a přidejte uživatelský model.
model Uživatel {
id Řetězec @default (cuid()) @id
jméno Řetězec?
e-mail Řetězec @unique
}
Model uživatele má sloupec id, což je primární klíč, sloupec názvu typu řetězec a sloupec e-mailu, který by měl být jedinečný.
Po definování datového modelu musíte nasadit své schéma do databáze pomocí npx prisma dbTAM příkaz.
npx prisma db push
Tento příkaz vytvoří skutečné tabulky v databázi.
Použití Prisma v Next.js
Chcete-li použít Prisma v Next.js, musíte vytvořit instanci klienta Prisma.
Nejprve vygenerujte klienta Prisma.
npx prisma vygenerovat
Poté vytvořte novou složku s názvem lib a přidejte do ní nový soubor s názvem prisma.js. V tomto souboru přidejte následující kód k vytvoření instance klienta Prisma.
import { PrismaClient } z"@prisma/klient";
nechat hranol;-li (Typokno"nedefinováno") {
-li (process.env. NODE_ENV "Výroba") {
hranol = Nový PrismaClient();
} jiný {
-li (!global.prisma) {
global.prisma = Nový PrismaClient();
}prisma = global.prisma;
}
}
vývoznívýchozí hranol;
Nyní můžete importovat klienta prisma jako „prisma“ do vašich souborů a začít dotazovat databázi.
Dotazování na databázi v trase Next.js API
Prisma se obvykle používá na straně serveru, kde může bezpečně interagovat s vaší databází. V aplikaci Next.js můžete nastavit trasu API, která používá Prisma k načítání dat z databáze a jejich vrácení klientovi. Stránky nebo komponenty pak mohou načítat data z trasy API pomocí HTTP knihovna jako Axios nebo fetch.
Vytvořte trasu API otevřením složky pages/api a vytvořením nové podsložky s názvem db. V této složce vytvořte soubor s názvem createuser.js a přidejte následující funkci handleru.
import hranol z"@/lib/prisma";vývoznívýchozíasynchronnífunkcepsovod(req, req) {
konst { jmeno, email } = req.query;Snaž se {
konst newUer = čekat hranol. User.create({
údaje: {
název,
e-mailem,
},
});
res.json({ uživatel: newUer, chyba: nula });
} chytit (chyba) {
res.json({ chyba: chybové hlášení, uživatel: nula });
}
}
Tato funkce získá jméno a e-mail z těla požadavku. Poté v bloku try/catch použije metodu create poskytovanou klientem Prisma k vytvoření nového uživatele. Funkce vrátí objekt JSON obsahující uživatele a chybovou zprávu, pokud existuje.
V jedné z vašich komponent nyní můžete zadat požadavek na tuto trasu API. Pro ukázku vytvořte novou složku s názvem profile v adresáři aplikace a přidejte nový soubor s názvem page.js. Poté přidejte jednoduchý formulář obsahující dvě vstupní pole pro jméno a e-mail a tlačítko pro odeslání.
Do formuláře přidejte událost on-submit, která volá funkci nazvanou handleSubmit. Formulář by měl vypadat takto:
"použít klienta";
import Reagovat, { useState } z"reagovat";vývoznívýchozífunkceStrana() {
konst [name, setname] = useState("");
konst [e-mail, setemail] = useState("");konst handleSubmit = asynchronní (e) => {
e.preventDefault();
};vrátit se (
type={text}
zástupný symbol="Přidat e-mail"
value={email}
onChange={setemail((E) => e.cílová.hodnota)}
/>
Ve funkci handleSubmit použijte metodu fetch k vytvoření požadavku na cestu /api/db/createuser.
konst handleSubmit = asynchronní (e) => {
e.preventDefault();
konst uživatel = čekat vynést("/api/db/createuser", {
Typ obsahu: "application/json",
tělo: JSON.stringify({ jméno, email }),
});
};
Nyní, když je formulář odeslán, Prisma vytvoří nový záznam uživatele v tabulce Uživatel.
Dělat více s Prisma
Prisma můžete použít k připojení k databázi PostgreSQL a dotazu na ni z aplikace Next.js.
Kromě přidávání nových záznamů do databáze můžete také spouštět další SQL příkazy. Můžete například mazat řádky, vybírat řádky na základě konkrétních podmínek a dokonce aktualizovat existující data uložená v databázi.