Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Interagir avec une base de données PostgreSQL ou toute autre base de données augmente directement la quantité de SQL que vous écrivez. Cela peut introduire des problèmes de sécurité tels que les attaques par injection SQL et limiter la portabilité de votre base de données. Il est conseillé d'utiliser un ORM (Object Relation Mapper) comme Prisma qui fournit une couche d'abstraction au-dessus de votre base de données.

Apprenez à utiliser Prisma dans Next.js pour vous connecter et interagir avec une base de données PostgreSQL.

Création d'une application Next.js

Avant de créer une application Next.js, assurez-vous d'avoir Node et npm installés dans votre environnement de développement.

Créez une application Next.js appelée prisma-next en exécutant cette commande dans votre terminal :

npx créer-next-app prisma-next
instagram viewer

Cela créera un nouveau répertoire appelé prisma-next avec des fichiers de base pour commencer.

Accédez au répertoire prisma-next et démarrez le serveur de développement à l'aide de cette commande :

npm run dev

Cela démarre un serveur de développement à http://localhost: 3000.

Voici les étapes de base pour créer une nouvelle application Next.js. Vous pouvez en savoir plus sur les fonctionnalités de Next.js en vous référant à cet article sur pourquoi migrer vers Next.js.

Installation du client Prisma

Pour commencer à utiliser prisme, vous aurez besoin des packages prisma et @prisma/client. prisma est l'outil Prisma CLI tandis que @prisma/client est un générateur de requêtes généré automatiquement qui vous aidera à interroger votre base de données.

Installez ces deux packages via npm.

npm installer prisma @prisma/client

Ensuite, initialisez prisma en exécutant la commande npx prisma init sur le terminal.

npx prisma init

Cela va générer un nouveau fichier appelé schéma.prisma qui contient le schéma de la base de données et un .env fichier auquel vous ajouterez l'URL de connexion à la base de données.

Ajout de l'URL de connexion

Vous avez besoin d'une URL de connexion pour connecter prisma à votre Base de données PostgreSQL. Le format général d'une URL de connexion est le suivant :

postgres://{nom d'utilisateur} :{mot de passe}@{nom d'hôte} :{port}/{nom de la base de données}

Remplacez les éléments entre accolades par les détails de votre propre base de données, puis enregistrez-les dans le fichier .env :

DATABASE_URL = "votre chaîne de connexion"

Ensuite, dans schema.prisma, spécifiez l'URL de connexion à la base de données :

base de données de la source de données {
 fournisseur = "PostgreSQL"
 url = env("URL_BASE_DONNEES")
}

Définition du schéma de base de données

Le schéma de base de données est une structure qui définit le modèle de données de votre base de données. Il spécifie les tables, les colonnes et les relations entre les tables de la base de données, ainsi que les contraintes et les index que la base de données doit utiliser.

Pour créer un schéma pour une base de données avec une table d'utilisateurs, ouvrez le fichier schema.prisma et ajoutez un modèle User.

modèle Utilisateur {
 id Chaîne @default (cuid()) @id
 chaîne de nom ?
 Courriel Chaîne @unique
}

Le modèle User a une colonne id qui est la clé primaire, une colonne name de type string et une colonne email qui doit être unique.

Après avoir défini le modèle de données, vous devez déployer votre schéma dans la base de données à l'aide de la npx prisma dbpousser commande.

npx prisma db poussée

Cette commande crée les tables réelles dans la base de données.

Utilisation de Prisma dans Next.js

Pour utiliser Prisma dans Next.js, vous devez créer une instance de client prisma.

Tout d'abord, générez le client Prisma.

prisme npx générer

Ensuite, créez un nouveau dossier appelé lib et ajoutez-y un nouveau fichier nommé prisma.js. Dans ce fichier, ajoutez le code suivant pour créer une instance de client prisma.

importer { PrismaClient } depuis"@prisma/client";
laisser prisme ;
si (Type defenêtre"indéfini") {
si (process.env. NODE_ENV "production") {
 prisme = nouveau PrismaClient();
 } autre {
si (!global.prisma) {
 global.prisma = nouveau PrismaClient();
 }


 prisma = global.prisma ;
 }
}
exporterdéfaut prisme ;

Maintenant, vous pouvez importer le client prisma en tant que "prisma" dans vos fichiers et commencer à interroger la base de données.

Interroger la base de données dans une route d'API Next.js

Prisma est généralement utilisé côté serveur, où il peut interagir en toute sécurité avec votre base de données. Dans une application Next.js, vous pouvez configurer une route API qui utilise Prisma pour extraire les données de la base de données et les renvoyer au client. Les pages ou les composants peuvent ensuite récupérer des données à partir de la route de l'API à l'aide d'un Bibliothèque HTTP comme Axios ou fetch.

Créez la route API en ouvrant le dossier pages/api et en créant un nouveau sous-dossier nommé db. Dans ce dossier, créez un fichier appelé createuser.js et ajoutez la fonction de gestionnaire suivante.

importer prisme depuis"@/lib/prisma";
exporterdéfautasynchronefonctiongestionnaire(demande, résolution) {
constante { nom, email } = req.query ;


essayer {
constante newUer = attendre prisme. Utilisateur.create({
 données: {
 nom,
 e-mail,
 },
 });
 res.json({ utilisateur: nouveauUer, erreur: nul });
 } attraper (erreur) {
 res.json({ erreur: Message d'erreur, utilisateur: nul });
 }
}

Cette fonction obtient le nom et l'e-mail du corps de la requête. Ensuite, dans le bloc try/catch, il utilise la méthode create fournie par Prisma Client pour créer un nouvel utilisateur. La fonction renvoie un objet JSON contenant l'utilisateur et le message d'erreur le cas échéant.

Dans l'un de vos composants, vous pouvez maintenant faire une requête à cette route d'API. Pour illustrer, créez un nouveau dossier nommé profile dans le répertoire de l'application et ajoutez un nouveau fichier nommé page.js. Ajoutez ensuite un simple formulaire contenant deux zones de saisie pour le nom et l'e-mail et un bouton d'envoi.

Sur le formulaire, ajoutez un événement on-submit qui appelle une fonction appelée handleSubmit. Le formulaire devrait ressembler à ceci :

"utiliser le client";
importer Réagissez, { useState } depuis"réagir";
exporterdéfautfonctionPage() {
constante [nom, nom_ensemble] = useState("");
constante [email, setemail] = useState("");


constante handleSubmit = asynchrone (e) => {
 e.preventDefault();
 };


retour (




 type={texte}
 espace réservé="Ajouter un nom"
 valeur={nom}
 onChange={setname((e) => e.valeur.cible)}
 />


 type={texte}
 espace réservé="Ajouter un e-mail"
 valeur={e-mail}
 onChange={setemail((e) => e.valeur.cible)}
 />

Dans la fonction handleSubmit, utilisez la méthode fetch pour faire une demande à la route /api/db/createuser.

constante handleSubmit = asynchrone (e) => {
 e.preventDefault();
constante utilisateur = attendre aller chercher("/api/db/createuser", {
 Type de contenu: "applications/json",
 corps: JSON.stringify({ nom, email }),
 });
};

Désormais, lorsque le formulaire sera soumis, Prisma créera un nouvel enregistrement d'utilisateur dans la table des utilisateurs.

En faire plus avec Prisma

Vous pouvez utiliser Prisma pour vous connecter et interroger une base de données PostgreSQL à partir d'une application Next.js.

Outre l'ajout de nouveaux enregistrements à la base de données, vous pouvez également exécuter d'autres commandes SQL. Par exemple, vous pouvez supprimer des lignes, sélectionner des lignes en fonction de conditions spécifiques et même mettre à jour les données existantes stockées dans la base de données.