Comment connecter PostgreSQL à une application Next.js à l’aide de Prisma

L’interaction avec une base de données PostgreSQL ou toute autre base de données directement augmente la quantité de SQL que vous écrivez. Cela peut introduire des problèmes de sécurité tels que des 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 à une base de données PostgreSQL et interagir avec elle.

Création d’une application Next.js

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

 npx create-next-app prisma-next
 

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

Naviguez dans le répertoire prisma-next et démarrez le serveur de développement en utilisant cette commande :

 npm run dev 

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

Ce sont 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 consultant cet article sur les raisons de migrer vers Next.js.

Installation du client Prisma

Pour commencer à utiliser Prisma, vous aurez besoin des paquets prisma et @prisma/client. prisma est l’outil CLI de Prisma 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 paquets via npm.

 npm install prisma @prisma/client
 

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

 npx prisma init
 

Cela va générer un nouveau fichier appelé schema.prisma qui contient le schéma de la base de données et un .env dans lequel 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://{username}:{password}@{hostname}:{port}/{database-name}
 

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

 DATABASE_URL = ”your connection string”
 

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

 datasource db {
  provider = "PostgreSQL"
  url = env("DATABASE_URL")
}
 

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

Le schéma de la 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.

 model User {
  id String @default(cuid()) @id
  name String?
  email String @unique
}
 

Le modèle User possède 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 vers la base de données en utilisant la fonction npx prisma db pousser commande.

 npx prisma db push
 

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.

 npx prisma generate
 

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 du client Prisma.

 import { PrismaClient } from "@prisma/client";
let prisma;

if (typeof window === "undefined") {
    if (process.env.NODE_ENV === "production") {
        prisma = new PrismaClient();
    } else {
        if (!global.prisma) {
            global.prisma = new PrismaClient();
        }

        prisma = global.prisma;
    }
}

export default prisma;
 

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 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 des données de la base de données et les renvoyer au client. Les pages ou les composants peuvent ensuite récupérer les données de la route API en utilisant une 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 gestion suivante.

 import prisma from "@/lib/prisma";

export default async function handler(req, res) {
    const { name, email } = req.query;

    try {
        const newUer = await prisma.User.create({
            data: {
                name,
                email,
            },
        });

        res.json({ user: newUer, error: null });
    } catch (error) {
        res.json({ error: error.message, user: null });
    }
}
 

Cette fonction récupère le nom et l’email du corps de la requête. Ensuite, dans le bloc try/catch, elle utilise la méthode create fournie par le client Prisma 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 un de vos composants, vous pouvez maintenant faire une requête vers cette route API. Pour faire une démonstration, créez un nouveau dossier nommé profil dans le répertoire de l’application et ajoutez un nouveau fichier nommé page.js. Ajoutez ensuite un formulaire simple contenant deux champs de saisie pour le nom et l’email et un bouton de soumission.

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

 "use client";
import React, { useState } from "react";

export default function Page() {
    const [name, setname] = useState("");
    const [email, setemail] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type={text}
                placeholder="Add name"
                value={name}
                onChange={setname((e) => e.target.value)}
            />

            <input
                type={text}
                placeholder="Add email"
                value={email}
                onChange={setemail((e) => e.target.value)}
            />

            <button type="submit">Submit</button>
        </form>
    );
}
 

Dans la fonction handleSubmit, utilisez la méthode fetch pour effectuer une requête vers la route /api/db/createuser.

 const handleSubmit = async (e) => {
    e.preventDefault();

    const user = await fetch("/api/db/createuser", {
        ContentType: "application/json",
        body: JSON.stringify({ name, email }),
    });
};
 

Maintenant, lorsque le formulaire est soumis, Prisma va créer un nouvel enregistrement d’utilisateur dans la table User.

En faire plus avec Prisma

Vous pouvez utiliser Prisma pour vous connecter à une base de données PostgreSQL et l’interroger depuis une application Next.js.

Outre l’ajout de nouveaux enregistrements dans 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 des données existantes stockées dans la base de données.