Configurer Prisma avec NextAuth pour le Edge Runtime

Dans le monde du développement web moderne, l'optimisation des performances est cruciale. Next.js offre des fonctionnalités Edge qui permettent d'exécuter du code au plus près des utilisateurs. Cependant, l'utilisation de Prisma et NextAuth dans cet environnement Edge peut poser des défis. Ce guide vous montrera comment adapter votre configuration pour que ces outils fonctionnent harmonieusement dans un contexte Edge, tout en utilisant Supabase comme base de données.

Comprendre le contexte

Avant de plonger dans les détails techniques, il est important de comprendre pourquoi ces modifications sont nécessaires.

L'environnement Edge

L'environnement Edge de Next.js est conçu pour exécuter du code au plus près des utilisateurs, offrant des temps de réponse plus rapides. Cependant, il a des limitations par rapport à un environnement Node.js complet, notamment l'absence de certains modules natifs.

Prisma et les connexions de base de données

Prisma, en tant qu'ORM, utilise traditionnellement des connexions directes aux bases de données. Ces connexions ne sont pas compatibles avec l'environnement Edge, qui ne supporte pas les opérations de réseau standard.

NextAuth et l'authentification

NextAuth simplifie la gestion de l'authentification dans les applications Next.js. Cependant, son fonctionnement standard repose sur des fonctionnalités qui ne sont pas disponibles dans l'environnement Edge.

La solution : Adaptateurs de pilotes Prisma

Pour résoudre ces problèmes de compatibilité, nous allons utiliser les adaptateurs de pilotes Prisma. Ces adaptateurs agissent comme une couche intermédiaire entre Prisma et la base de données, permettant à Prisma de fonctionner dans des environnements où les connexions directes ne sont pas possibles.

Pourquoi choisir l'adaptateur Neon ?

Pour notre configuration avec Supabase (qui utilise PostgreSQL), nous allons utiliser l'adaptateur Neon (@prisma/adapter-neon). Neon est optimisé pour les environnements serverless et Edge, ce qui en fait un choix idéal pour notre cas d'utilisation.

Configuration étape par étape

Suivons maintenant les étapes nécessaires pour configurer Prisma avec NextAuth dans un environnement Edge, en utilisant Supabase comme base de données.

1. Installation des dépendances

Commençons par installer les packages nécessaires :

npm install @prisma/client @auth/prisma-adapter
npm install --save-dev prisma
npm install @neondatabase/serverless @prisma/adapter-neon

Ces installations nous fournissent Prisma, l'adaptateur Prisma pour NextAuth, et les outils nécessaires pour l'adaptateur Neon.

2. Configuration du schema Prisma

Modifions notre fichier schema.prisma pour activer les adaptateurs de pilotes et définir notre structure de base de données :

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?
 
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 
  @@unique([provider, providerAccountId])
}
 
model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}
 
model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}
 
model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime
 
  @@unique([identifier, token])
}

Notez l'activation de la fonctionnalité de prévisualisation driverAdapters dans le générateur client. C'est crucial pour utiliser les adaptateurs de pilotes.

3. Configuration de Prisma

Créons un fichier lib/prisma.ts pour configurer Prisma avec l'adaptateur Neon :

import { PrismaClient } from "@prisma/client"
import { PrismaNeon } from "@prisma/adapter-neon"
import { Pool } from '@neondatabase/serverless'
 
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
 
const createPrismaClient = () => {
  const connectionString = `\${process.env.DATABASE_URL}`
  const pool = new Pool({ connectionString })
  const adapter = new PrismaNeon(pool)
  return new PrismaClient({ adapter })
}
 
export const prisma = globalForPrisma.prisma || createPrismaClient()
 
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Cette configuration crée une instance de Prisma avec l'adaptateur Neon, permettant la connexion à Supabase dans un environnement Edge. L'utilisation de globalForPrisma évite de créer de multiples instances de Prisma lors des rechargements à chaud en développement.

4. Configuration de NextAuth

Modifions notre configuration NextAuth pour utiliser Prisma avec l'adaptateur :

import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "../../../lib/prisma"
 
export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    // Configurez vos fournisseurs d'authentification ici
  ],
  // Autres options de configuration
})
 
export const config = {
  runtime: 'edge',
}

Cette configuration intègre Prisma avec NextAuth pour la gestion de l'authentification, tout en spécifiant que cette route API doit s'exécuter dans l'environnement Edge.

5. Utilisation dans les composants

Voici un exemple d'utilisation de Prisma dans un composant Next.js :

import { prisma } from '../lib/prisma'
 
export default async function Home() {
  const users = await prisma.user.findMany()
  return (
    <div>
      <h1>Utilisateurs</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

Ce composant démontre comment utiliser Prisma pour récupérer des données dans un composant serveur de Next.js.

Considérations importantes

Variables d'environnement

N'oubliez pas de configurer correctement votre variable d'environnement DATABASE_URL dans le fichier .env :

DATABASE_URL="postgres://user:password@host.supabase.co:5432/database"

Déploiement

Lors du déploiement sur Vercel ou une autre plateforme supportant Edge :

• Assurez-vous que toutes vos dépendances sont correctement installées.
• Configurez les variables d'environnement sur la plateforme de déploiement.
• Vérifiez que votre configuration de déploiement est compatible avec Edge.

Gestion des migrations

Les migrations de base de données doivent être gérées séparément, car elles ne peuvent pas être exécutées dans un environnement Edge. Utilisez prisma migrate dans un environnement de développement ou CI/CD.

Limitations et considérations

• Certaines fonctionnalités avancées de Prisma peuvent ne pas être disponibles ou fonctionner différemment avec les adaptateurs de pilotes.
• Il peut y avoir un léger impact sur les performances par rapport à une connexion directe. Optimisez vos requêtes et utilisez le caching lorsque c'est possible.

Conclusion

La configuration de Prisma avec NextAuth pour fonctionner dans un environnement Edge représente un défi technique, mais offre des avantages significatifs en termes de performance et de scalabilité. En utilisant les adaptateurs de pilotes Prisma et en ajustant notre configuration, nous pouvons profiter des avantages de l'Edge computing tout en conservant la puissance et la flexibilité de Prisma pour la gestion des données.

Cette approche nous permet de créer des applications Next.js hautement performantes, capables de gérer l'authentification et les opérations de base de données au plus près des utilisateurs, tout en utilisant Supabase comme backend robuste et évolutif.

N'oubliez pas de tester soigneusement votre application après ces modifications pour vous assurer que toutes les fonctionnalités fonctionnent comme prévu dans l'environnement Edge.