Next.js + MySQL + Prisma (volledige setup)

Deze gids beschrijft de setup van een Next.js-project met Prisma 7 en MySQL: de MariaDB-adapter leest je DB_* omgevingsvariabelen rechtstreeks uit. Dat is handig, want zodra je een database aan je app koppelt, staan die variabelen al klaar.

1. Installeren

bash
npm install prisma @prisma/client @prisma/adapter-mariadb
npm install -D tsx

2. prisma.config.ts

In de root van je project. De datasource.url wordt opgebouwd uit je DB_* variabelen — die gebruikt de Prisma CLI bij migrate en db push.

ts
import "dotenv/config";
import { defineConfig } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
    seed: "npx tsx prisma/seed.ts",
  },
  datasource: {
    url: `mysql://${process.env.DB_USER}:${process.env.DB_PASS}@${process.env.DB_HOST}:${process.env.DB_PORT}/${process.env.DB_NAME}`,
  },
});

3. prisma/schema.prisma

De provider is mysql. De client wordt naar een eigen map gegenereerd (src/generated/prisma).

prisma
datasource db {
  provider = "mysql"
}

generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

model User {
  id        String   @id @default(uuid())
  email     String   @unique
  password  String
  name      String?
  createdAt DateTime @default(now())
}

4. De Prisma-client — src/lib/prisma.ts

Dit is het belangrijkste bestand: één gedeelde verbinding die je overal importeert. De MariaDB-adapter leest de DB_* variabelen.

ts
import { PrismaMariaDb } from "@prisma/adapter-mariadb";
import { PrismaClient } from "../generated/prisma/client";

// Globale variabele zodat de Next.js dev-server niet elke request
// een nieuwe verbinding maakt (hot reload).
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

// De adapter die Prisma MySQL-ondersteuning geeft.
const adapter = new PrismaMariaDb({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
  port: Number(process.env.DB_PORT),
  allowPublicKeyRetrieval: true,
});

export const prisma = globalForPrisma.prisma ?? new PrismaClient({ adapter });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

5. Genereren en migreren

bash
# Genereer de client (maakt src/generated/prisma)
npx prisma generate

# Maak je tabellen aan op basis van het schema
npx prisma migrate dev --name init

6. Gebruiken in je app

Importeer prisma in een server component, server action of route handler (nooit in client components — daar is geen database).

tsx
// app/page.tsx — een server component
import { prisma } from "@/src/lib/prisma";

export default async function HomePage() {
  const gebruikers = await prisma.user.findMany({
    select: { id: true, name: true, email: true },
  });

  return (
    <ul>
      {gebruikers.map((u) => (
        <li key={u.id}>{u.name ?? u.email}</li>
      ))}
    </ul>
  );
}

ts
// app/actions/user.ts — een server action
"use server";
import { prisma } from "@/src/lib/prisma";

export async function maakGebruiker(email: string, naam: string) {
  return prisma.user.create({ data: { email, name: naam, password: "..." } });
}

7. Op EduInsights hosten

1. Maak een database aan onder Cloud → Databases en koppel hem aan je app. De DB_* variabelen worden dan automatisch ingespoten — de adapter pakt ze meteen op.
2. Zorg dat Prisma tijdens de build draait. Stel in de app-instellingen in:
   • Pre-build commando: npx prisma generate
   • Post-build commando: npx prisma migrate deploy

bash
# pre-build
npx prisma generate
# post-build (past migraties toe op de gekoppelde database)
npx prisma migrate deploy

3. Push je code naar GitHub en klik op Opnieuw deployen op je app-pagina. Elke keer dat je code wijzigt, push je naar GitHub en klik je op Opnieuw deployen. Zie Je project online zetten voor de volledige dev-loop.

text
.env

Meer over verbinden en veilig queryen? Zie Verbindingsgegevens en Veiligheid. Meer over pre-/post-build en omgevingsvariabelen? Zie Build, env vars & commando's.