Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Die Interaktion mit einer PostgreSQL-Datenbank oder einer anderen Datenbank erhöht direkt die Menge an SQL, die Sie schreiben. Dies kann zu Sicherheitsproblemen wie SQL-Injection-Angriffen führen und die Portabilität Ihrer Datenbank einschränken. Es ist ratsam, einen ORM (Object Relation Mapper) wie Prisma zu verwenden, der eine Abstraktionsschicht über Ihrer Datenbank bereitstellt.

Erfahren Sie, wie Sie Prisma in Next.js verwenden, um eine Verbindung zu einer PostgreSQL-Datenbank herzustellen und mit ihr zu interagieren.

Erstellen einer Next.js-Anwendung

Stellen Sie vor dem Erstellen einer Next.js-Anwendung sicher, dass dies der Fall ist Node und npm installiert in Ihrer Entwicklungsumgebung.

Erstellen Sie eine Next.js-Anwendung namens prisma-next, indem Sie diesen Befehl in Ihrem Terminal ausführen:

npx create-next-app prisma-next
instagram viewer

Dadurch wird ein neues Verzeichnis namens prisma-next mit grundlegenden Dateien erstellt, um loszulegen.

Navigieren Sie zum Verzeichnis prisma-next und starten Sie den Entwicklungsserver mit diesem Befehl:

npm laufen dev

Dies startet einen Entwicklungsserver an http://localhost: 3000.

Dies sind die grundlegenden Schritte zum Erstellen einer neuen Next.js-Anwendung. Weitere Informationen zu den Funktionen von Next.js finden Sie in diesem Artikel auf Warum auf Next.js migrieren?.

Installieren des Prisma-Clients

Um mit der Verwendung zu beginnen Prisma, benötigen Sie die Pakete prisma und @prisma/client. prisma ist das Prisma-CLI-Tool, während @prisma/client ein automatisch generierter Abfragegenerator ist, mit dem Sie Ihre Datenbank abfragen können.

Installieren Sie diese beiden Pakete über npm.

npm installiere prisma @prisma/client

Als nächstes initialisieren Sie prisma, indem Sie den Befehl npx prisma init auf dem Terminal ausführen.

npx prisma init

Dadurch wird eine neue Datei mit dem Namen erstellt schema.prisma die das Datenbankschema enthält und a .env Datei, zu der Sie die Datenbankverbindungs-URL hinzufügen.

Hinzufügen der Verbindungs-URL

Sie benötigen eine Verbindungs-URL, um prisma mit Ihrem zu verbinden PostgreSQL-Datenbank. Das allgemeine Format für eine Verbindungs-URL lautet wie folgt:

postgres://{Benutzername}:{Passwort}@{Hostname}:{Port}/{Datenbankname}

Ersetzen Sie die Elemente in geschweiften Klammern durch Ihre eigenen Datenbankdetails und speichern Sie sie dann in der .env-Datei:

DATABASE_URL = ” Ihre Verbindungszeichenfolge”

Geben Sie dann in schema.prisma die URL der Datenbankverbindung an:

Datenquelle db {
 provider = "PostgreSQL"
 url = env("DATENBANK_URL")
}

Definieren des Datenbankschemas

Das Datenbankschema ist eine Struktur, die das Datenmodell Ihrer Datenbank definiert. Es gibt die Tabellen, Spalten und Beziehungen zwischen Tabellen in der Datenbank sowie alle Einschränkungen und Indizes an, die die Datenbank verwenden sollte.

Um ein Schema für eine Datenbank mit einer Benutzertabelle zu erstellen, öffnen Sie die Datei schema.prisma und fügen Sie ein Benutzermodell hinzu.

Modellbenutzer {
 id Zeichenkette @default (cuid()) @id
 Namenskette?
 E-Mail-String @unique
}

Das Benutzermodell hat eine ID-Spalte, die der Primärschlüssel ist, eine Namensspalte vom Typ Zeichenfolge und eine E-Mail-Spalte, die eindeutig sein sollte.

Nachdem Sie das Datenmodell definiert haben, müssen Sie Ihr Schema mithilfe von in der Datenbank bereitstellen npx prisma dbdrücken Befehl.

npx prisma db drücken

Dieser Befehl erstellt die eigentlichen Tabellen in der Datenbank.

Verwendung von Prisma in Next.js

Um Prisma in Next.js zu verwenden, müssen Sie eine Prisma-Clientinstanz erstellen.

Generieren Sie zunächst den Prisma-Client.

npx prisma erzeugen

Erstellen Sie dann einen neuen Ordner namens lib und fügen Sie eine neue Datei namens prisma.js darin hinzu. Fügen Sie in dieser Datei den folgenden Code hinzu, um eine Prisma-Clientinstanz zu erstellen.

importieren { PrismaClient } aus"@prisma/kunde";
lassen Prisma;
Wenn (Art derFenster"nicht definiert") {
Wenn (prozess.env. NODE_ENV "Produktion") {
 Prisma = neu PrismaClient();
 } anders {
Wenn (!global.prisma) {
 global.prisma = neu PrismaClient();
 }


 prisma = global.prisma;
 }
}
ExportStandard Prisma;

Jetzt können Sie den Prisma-Client als „Prisma“ in Ihre Dateien importieren und mit der Abfrage der Datenbank beginnen.

Abfragen der Datenbank in einer Next.js-API-Route

Prisma wird normalerweise auf der Serverseite verwendet, wo es sicher mit Ihrer Datenbank interagieren kann. In einer Next.js-Anwendung können Sie eine API-Route einrichten, die Prisma verwendet, um Daten aus der Datenbank abzurufen und an den Client zurückzugeben. Die Seiten oder Komponenten können dann mithilfe von Daten von der API-Route abrufen HTTP-Bibliothek wie Axios oder fetch.

Erstellen Sie die API-Route, indem Sie den Ordner „pages/api“ öffnen und einen neuen Unterordner namens „db“ erstellen. Erstellen Sie in diesem Ordner eine Datei mit dem Namen createuser.js und fügen Sie die folgende Handler-Funktion hinzu.

importieren Prisma aus"@/lib/prisma";
ExportStandardasynchronFunktionHandler(erforderlich, res) {
konst { name, email } = req.query;


versuchen {
konst newUer = erwarten Prisma. User.create({
 Daten: {
 Name,
 Email,
 },
 });
 res.json({ Benutzer: newUer, Fehler: Null });
 } fangen (Fehler) {
 res.json({ Fehler: Fehlermeldung, Benutzer: Null });
 }
}

Diese Funktion ruft den Namen und die E-Mail-Adresse aus dem Anfragetext ab. Dann verwendet es im try/catch-Block die create-Methode, die vom Prisma-Client bereitgestellt wird, um einen neuen Benutzer zu erstellen. Die Funktion gibt ein JSON-Objekt zurück, das den Benutzer und gegebenenfalls die Fehlermeldung enthält.

In einer Ihrer Komponenten können Sie nun eine Anfrage an diese API-Route stellen. Erstellen Sie zur Veranschaulichung einen neuen Ordner namens profile im App-Verzeichnis und fügen Sie eine neue Datei namens page.js hinzu. Fügen Sie dann ein einfaches Formular hinzu, das zwei Eingabefelder für den Namen und die E-Mail-Adresse sowie eine Schaltfläche zum Senden enthält.

Fügen Sie im Formular ein On-Submit-Ereignis hinzu, das eine Funktion namens handleSubmit aufruft. Das Formular sollte wie folgt aussehen:

"Client verwenden";
importieren Reagieren, { useState } aus"reagieren";
ExportStandardFunktionBuchseite() {
konst [Name, Satzname] = useState("");
konst [email, setemail] = useState("");


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


zurückkehren (




 Typ={Text}
 Platzhalter="Name hinzufügen"
 Wert={Name}
 onChange={Satzname((e) => e.Zielwert)}
 />


 Typ={Text}
 Platzhalter="E-Mail hinzufügen"
 Wert={E-Mail}
 onChange={setemail((e) => e.Zielwert)}
 />

Verwenden Sie in der Funktion handleSubmit die Methode fetch, um eine Anfrage an die Route /api/db/createuser zu stellen.

konst handleSubmit = asynchron (e) => {
 e.preventDefault();
konst Benutzer = erwarten bringen("/api/db/createuser", {
 Inhaltstyp: "Anwendung/json",
 Körper: JSON.stringify({Name, E-Mail}),
 });
};

Wenn das Formular jetzt gesendet wird, erstellt Prisma einen neuen Benutzerdatensatz in der Benutzertabelle.

Mehr erreichen mit Prisma

Sie können Prisma verwenden, um eine Verbindung zu einer PostgreSQL-Datenbank herzustellen und diese von einer Next.js-Anwendung abzufragen.

Neben dem Hinzufügen neuer Datensätze zur Datenbank können Sie auch andere SQL-Befehle ausführen. Sie können beispielsweise Zeilen löschen, Zeilen basierend auf bestimmten Bedingungen auswählen und sogar vorhandene Daten aktualisieren, die in der Datenbank gespeichert sind.