Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Interakcja z bazą danych PostgreSQL lub inną bazą danych bezpośrednio zwiększa ilość pisanego SQL. Może to spowodować problemy z bezpieczeństwem, takie jak ataki SQL injection, i ogranicza przenośność bazy danych. Wskazane jest użycie ORM (Object Relation Mapper), takiego jak Prisma, który zapewnia warstwę abstrakcji na wierzchu bazy danych.

Dowiedz się, jak używać Prisma w Next.js do łączenia się i interakcji z bazą danych PostgreSQL.

Tworzenie aplikacji Next.js

Przed utworzeniem aplikacji Next.js upewnij się, że masz Zainstalowano węzeł i npm w Twoim środowisku programistycznym.

Utwórz aplikację Next.js o nazwie prisma-next, uruchamiając to polecenie w swoim terminalu:

npx utwórz-następną-aplikację prisma-next

Spowoduje to utworzenie nowego katalogu o nazwie prisma-next z podstawowymi plikami na początek.

Przejdź do katalogu prisma-next i uruchom serwer programistyczny za pomocą tego polecenia:

instagram viewer 
npm uruchom dev

Spowoduje to uruchomienie serwera deweloperskiego w http://localhost: 3000.

Oto podstawowe kroki tworzenia nowej aplikacji Next.js. Możesz dowiedzieć się więcej o funkcjach Next.js, odwołując się do tego artykułu dlaczego warto przeprowadzić migrację do Next.js.

Instalacja klienta Prisma

Aby zacząć używać pryzma, będziesz potrzebować pakietów prisma i @prisma/client. prisma to narzędzie Prisma CLI, podczas gdy @prisma/client to automatycznie generowany konstruktor zapytań, który pomoże Ci przeszukiwać bazę danych.

Zainstaluj te dwa pakiety przez npm.

npm zainstaluj prisma @prisma/client

Następnie zainicjuj prisma, uruchamiając polecenie npx prisma init na terminalu.

npx prisma init

Spowoduje to wygenerowanie nowego pliku o nazwie schemat.prisma który zawiera schemat bazy danych i a .env plik, do którego dodasz adres URL połączenia z bazą danych.

Dodanie adresu URL połączenia

Potrzebujesz adresu URL połączenia, aby połączyć prisma z twoim Baza danych PostgreSQL. Ogólny format adresu URL połączenia jest następujący:

postgres://{nazwa_użytkownika}:{hasło}@{nazwa_hosta}:{port}/{nazwa_bazy_danych}

Zamień elementy w nawiasach klamrowych na dane własnej bazy danych, a następnie zapisz je w pliku .env:

DATABASE_URL = „Twoje parametry połączenia”

Następnie w schema.prisma określ adres URL połączenia z bazą danych:

baza danych źródła danych {
 dostawca = "PostgreSQL"
 url = env("URL_BAZY DANYCH")
}

Definiowanie schematu bazy danych

Schemat bazy danych to struktura definiująca model danych Twojej bazy danych. Określa tabele, kolumny i relacje między tabelami w bazie danych, a także wszelkie ograniczenia i indeksy, których baza danych powinna używać.

Aby utworzyć schemat dla bazy danych z tabelą użytkowników, otwórz plik schema.prisma i dodaj model użytkownika.

wzorowy użytkownik {
 id Ciąg @default (cuid()) @id
 imię Ciąg?
 e-mail String @unique
}

Model User ma kolumnę id, która jest kluczem podstawowym, kolumnę name typu string oraz kolumnę e-mail, która powinna być unikalna.

Po zdefiniowaniu modelu danych należy wdrożyć schemat w bazie danych przy użyciu npx prisma dbnaciskać Komenda.

npx prisma db push

To polecenie tworzy rzeczywiste tabele w bazie danych.

Używanie Prismy w Next.js

Aby używać Prisma w Next.js, musisz utworzyć instancję klienta prisma.

Najpierw wygeneruj klienta Prisma.

generowanie npx prisma

Następnie utwórz nowy folder o nazwie lib i dodaj w nim nowy plik o nazwie prisma.js. W tym pliku dodaj następujący kod, aby utworzyć instancję klienta prisma.

import { PrismaClient} z"@prisma/klient";
pozwalać pryzmat;
Jeśli (typokno"nieokreślony") {
Jeśli (proces.env. WĘZEŁ_ENV "produkcja") {
 pryzmat = nowy PrismaClient();
 } w przeciwnym razie {
Jeśli (!global.prisma) {
 global.prisma = nowy PrismaClient();
 }


 pryzmat = globalny.pryzma;
 }
}
eksportdomyślny pryzmat;

Teraz możesz zaimportować klienta prisma jako „prisma” do swoich plików i rozpocząć wysyłanie zapytań do bazy danych.

Wysyłanie zapytań do bazy danych w trasie API Next.js

Prisma jest zwykle używana po stronie serwera, gdzie może bezpiecznie wchodzić w interakcje z bazą danych. W aplikacji Next.js możesz skonfigurować trasę API, która wykorzystuje Prisma do pobierania danych z bazy danych i zwracania ich klientowi. Strony lub komponenty mogą następnie pobierać dane z trasy API za pomocą pliku Biblioteka HTTP, taka jak Axios lub fetch.

Utwórz trasę API, otwierając folder pages/api i tworząc nowy podfolder o nazwie db. W tym folderze utwórz plik o nazwie utwórz użytkownika.js i dodaj następującą funkcję obsługi.

import pryzmat z"@/lib/prisma";
eksportdomyślnyasynchronicznyfunkcjonowaćtreser(żądanie, rez) {
konst { imię i nazwisko, adres e-mail } = żądanie.zapytanie;


próbować {
konst nowyUżytkownik = czekać na pryzmat. Utwórz użytkownika ({
 dane: {
 nazwa,
 e-mail,
 },
 });
 res.json({ użytkownik: nowyUer, błąd: zero });
 } złapać (błąd) {
 res.json({ błąd: Komunikat o błędzie, użytkownik: zero });
 }
}

Ta funkcja pobiera nazwę i adres e-mail z treści żądania. Następnie w bloku try/catch używa metody create dostarczonej przez Prisma Client, aby utworzyć nowego użytkownika. Funkcja zwraca obiekt JSON zawierający użytkownika i komunikat o błędzie, jeśli taki istnieje.

W jednym ze swoich komponentów możesz teraz wysłać żądanie do tej trasy API. Aby zademonstrować, utwórz nowy folder o nazwie profile w katalogu aplikacji i dodaj nowy plik o nazwie page.js. Następnie dodaj prosty formularz zawierający dwa pola wprowadzania nazwy i adresu e-mail oraz przycisk przesyłania.

W formularzu dodaj zdarzenie on-submit, które wywołuje funkcję o nazwie handleSubmit. Formularz powinien wyglądać tak:

„użyj klienta”;
import Reaguj, { stan użycia } z"reagować";
eksportdomyślnyfunkcjonowaćStrona() {
konst [nazwa, nazwa zestawu] = useState("");
konst [email, setemail] = useState("");


konst uchwyt Prześlij = asynchroniczny (e) => {
 e.preventDefault();
 };


powrót (




 typ={tekst}
 symbol zastępczy=„Dodaj nazwę”
 wartość={nazwa}
 onChange={nazwa zestawu((mi) => e.wartość docelowa)}
 />


 typ={tekst}
 symbol zastępczy=„Dodaj adres e-mail”
 wartość={e-mail}
 onChange={setemail((mi) => e.wartość docelowa)}
 />

W funkcji handleSubmit użyj metody fetch, aby wysłać żądanie do trasy /api/db/createuser.

konst uchwyt Prześlij = asynchroniczny (e) => {
 e.preventDefault();
konst użytkownik = czekać na aportować("/api/baza danych/utwórzużytkownika", {
 Typ zawartości: "aplikacja/json",
 ciało: JSON.stringify({imię i nazwisko, adres e-mail}),
 });
};

Teraz, po przesłaniu formularza, Prisma utworzy nowy rekord użytkownika w tabeli User.

Zrób więcej z Prisma

Możesz użyć Prisma do łączenia się i wysyłania zapytań do bazy danych PostgreSQL z aplikacji Next.js.

Oprócz dodawania nowych rekordów do bazy danych, możesz także uruchamiać inne polecenia SQL. Na przykład możesz usuwać wiersze, wybierać wiersze na podstawie określonych warunków, a nawet aktualizować istniejące dane przechowywane w bazie danych.