I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

L'interazione con un database PostgreSQL o qualsiasi altro database aumenta direttamente la quantità di SQL che scrivi. Ciò può introdurre problemi di sicurezza come attacchi SQL injection e limitare la portabilità del database. È consigliabile utilizzare un ORM (Object Relation Mapper) come Prisma che fornisce un livello di astrazione sopra il database.

Scopri come usare Prisma in Next.js per connetterti e interagire con un database PostgreSQL.

Creazione di un'applicazione Next.js

Prima di creare un'applicazione Next.js, assicurati di averlo Nodo e npm installati nell'ambiente di sviluppo.

Crea un'applicazione Next.js chiamata prisma-next eseguendo questo comando nel tuo terminale:

npx create-next-app prisma-next

Questo creerà una nuova directory chiamata prisma-next con i file di base per iniziare.

Passare alla directory prisma-next e avviare il server di sviluppo utilizzando questo comando:

instagram viewer 
npm esegue lo sviluppo

Questo avvia un server di sviluppo in http://localhost: 3000.

Questi sono i passaggi di base per la creazione di una nuova applicazione Next.js. Puoi saperne di più sulle funzionalità di Next.js facendo riferimento a questo articolo su perché migrare a Next.js.

Installazione del client Prisma

Per iniziare a usare Prisma, avrai bisogno dei pacchetti prisma e @prisma/client. prisma è lo strumento Prisma CLI mentre @prisma/client è un generatore di query generato automaticamente che ti aiuterà a interrogare il tuo database.

Installa questi due pacchetti tramite npm.

npm install prisma @prisma/client

Successivamente, inizializza prisma eseguendo il comando npx prisma init sul terminale.

npx prisma init

Questo genererà un nuovo file chiamato schema.prisma che contiene lo schema del database e a .env file a cui aggiungerai l'URL di connessione al database.

Aggiunta dell'URL di connessione

Hai bisogno di un URL di connessione per connettere prisma al tuo Database PostgreSQL. Il formato generale per un URL di connessione è questo:

postgres://{username}:{password}@{hostname}:{port}/{database-name}

Sostituisci gli elementi tra parentesi graffe con i dettagli del tuo database, quindi salvali nel file .env:

DATABASE_URL = "la tua stringa di connessione"

Quindi in schema.prisma, specifica l'URL di connessione al database:

origine dati db {
 fornitore = "PostgreSQL"
 url = env("DATABASE_URL")
}

Definizione dello schema del database

Lo schema del database è una struttura che definisce il modello di dati del database. Specifica le tabelle, le colonne e le relazioni tra le tabelle nel database, nonché eventuali vincoli e indici che il database dovrebbe utilizzare.

Per creare uno schema per un database con una tabella utenti, apri il file schema.prisma e aggiungi un modello Utente.

modello Utente {
 id Stringa @default (cuid()) @id
 nome stringa?
 e-mail Stringa @unique
}

Il modello User ha una colonna id che è la chiave primaria, una colonna name di tipo stringa e una colonna email che dovrebbe essere univoca.

Dopo aver definito il modello di dati, è necessario distribuire lo schema nel database utilizzando il file npx prisma dbspingere comando.

npx prisma db push

Questo comando crea le tabelle effettive nel database.

Utilizzo di Prisma in Next.js

Per utilizzare Prisma in Next.js, devi creare un'istanza del client prisma.

Innanzitutto, genera il client Prisma.

npx prisma generare

Quindi, crea una nuova cartella chiamata lib e aggiungi un nuovo file chiamato prisma.js. In questo file, aggiungi il codice seguente per creare un'istanza del client prisma.

importare {PrismaCliente} da"@prisma/cliente";
permettere prisma;
Se (tipo difinestra"non definito") {
Se (processo.env. NODO_ENV "produzione") {
 prisma = nuovo PrismaClient();
 } altro {
Se (!global.prisma) {
 global.prisma = nuovo PrismaClient();
 }


 prisma = globale.prisma;
 }
}
esportarepredefinito prisma;

Ora puoi importare il client prisma come "prisma" nei tuoi file e iniziare a interrogare il database.

Interrogazione del database in un percorso API Next.js

Prisma viene in genere utilizzato sul lato server, dove può interagire in sicurezza con il tuo database. In un'applicazione Next.js, puoi impostare un percorso API che utilizza Prisma per recuperare i dati dal database e restituirli al client. Le pagine o i componenti possono quindi recuperare i dati dalla route API utilizzando un file Libreria HTTP come Axios o fetch.

Crea la route API aprendo la cartella pages/api e creando una nuova sottocartella denominata db. In questa cartella, crea un file chiamato createuser.js e aggiungi la seguente funzione di gestione.

importare prisma da"@/lib/prisma";
esportarepredefinitoasincronofunzionegestore(richiesta, ris) {
cost { nome, email } = req.query;


Tentativo {
cost newUer = aspetta prisma. Utente.create({
 dati: {
 nome,
 e-mail,
 },
 });
 res.json({ utente: newUer, errore: nullo });
 } presa (errore) {
 res.json({ errore: messaggio di errore, utente: nullo });
 }
}

Questa funzione ottiene il nome e l'e-mail dal corpo della richiesta. Quindi, nel blocco try/catch, utilizza il metodo create fornito dal client Prisma per creare un nuovo utente. La funzione restituisce un oggetto JSON contenente l'utente e l'eventuale messaggio di errore.

In uno dei tuoi componenti, ora puoi effettuare una richiesta a questa route API. Per dimostrarlo, crea una nuova cartella denominata profile nella directory dell'app e aggiungi un nuovo file denominato page.js. Quindi aggiungi un semplice modulo contenente due caselle di input per il nome e l'e-mail e un pulsante di invio.

Nel modulo, aggiungi un evento on-submit che chiama una funzione chiamata handleSubmit. Il modulo dovrebbe assomigliare a questo:

"usa client";
importare Reagisci, { useState } da"reagire";
esportarepredefinitofunzionePagina() {
cost [nome, setname] = useState("");
cost [email, setemail] = useState("");


cost handleSubmit = asincrono (e) => {
 e.preventDefault();
 };


ritorno (




 tipo={testo}
 segnaposto="Aggiungi nome"
 valore={nome}
 onChange={setname((e) => e.target.value)}
 />


 tipo={testo}
 segnaposto="Aggiungi e-mail"
 valore={email}
 onChange={setemail((e) => e.target.value)}
 />

Nella funzione handleSubmit, utilizza il metodo fetch per effettuare una richiesta alla route /api/db/createuser.

cost handleSubmit = asincrono (e) => {
 e.preventDefault();
cost utente = aspetta andare a prendere("/api/db/createutente", {
 Tipo di contenuto: "applicazione/json",
 corpo: JSON.stringify({ nome, email }),
 });
};

Ora, quando il modulo viene inviato, Prisma creerà un nuovo record utente nella tabella Utente.

Fare di più con Prisma

Puoi usare Prisma per connetterti e interrogare un database PostgreSQL da un'applicazione Next.js.

Oltre ad aggiungere nuovi record al database, puoi anche eseguire altri comandi SQL. Ad esempio, puoi eliminare righe, selezionare righe in base a condizioni specifiche e persino aggiornare i dati esistenti archiviati nel database.