Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Prisma ORM instellen

Configureer en integreer Prisma ORM in uw Next.js-project om met verschillende databases te communiceren.

Les 1 van 412 stappen

Prisma ORM instellen is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat is een ORM?

Welkom! In deze les stellen we Prisma ORM in een Next.js-project in. Maar eerst: wat is een ORM?

ORM staat voor Object-relationele mapping.
Het is een techniek waarmee je met de objecten van je programmeertaal met je database kunt werken, zonder onbewerkte SQL te schrijven.
Je kunt het zien als een vertaler tussen je code, bijvoorbeeld JavaScript-objecten, en je database, bijvoorbeeld SQL-tabellen.

Waarom Prisma kiezen?

Prisma is om goede redenen een moderne ORM die populair is in combinatie met Next.js:

Typeveiligheid: Het genereert een typeveilige client, waardoor veel fouten tijdens runtime worden voorkomen.
Ervaring voor ontwikkelaars: Een intuïtieve API, krachtige migraties en automatische codeaanvulling.
Moderne stack: Ontworpen voor TypeScript en modern JavaScript, waardoor het perfect bij Next.js past.
Databasesupport: Werkt met PostgreSQL, MySQL, SQLite, SQL Server en MongoDB.

Prisma installeren

Laten we beginnen met het toevoegen van Prisma aan je Next.js-project. Je hebt twee hoofdpackages nodig:

prisma: de Prisma CLI (opdrachtregelinterface) voor ontwikkelingstaken.
@prisma/client: de Prisma Client-bibliotheek om vanuit je code met je database te werken.

Voer deze opdracht uit in de hoofdmap van je project:

npm install prisma @prisma/client

Prisma initialiseren

Na de installatie moet je Prisma in je project initialiseren. Met deze opdracht wordt de basisstructuur van Prisma ingesteld, inclusief het bestand prisma/schema.prisma.

Ook wordt er een .env-bestand gemaakt om je verbindingsreeks voor de database in op te slaan.

npx prisma init

Je database verbinden

Het bestand .env dat door prisma init is gemaakt, bevat een variabele DATABASE_URL. Hier geef je aan hoe Prisma verbinding moet maken met je database.

Voor lokale ontwikkeling wordt SQLite vaak gebruikt vanwege de eenvoud. Voor productie kun je PostgreSQL of MySQL gebruiken.

# .env
DATABASE_URL="postgresql://user:password@host:port/database?schema=public"

# Example for SQLite (local file)
# DATABASE_URL="file:./dev.db"

Het Prisma-schemabestand

Je bestand prisma/schema.prisma vormt de kern van je Prisma-configuratie. Het definieert drie belangrijke blokken:

datasource: bepaalt welke databaseprovider je gebruikt, bijvoorbeeld postgresql of sqlite.
generator: configureert de Prisma Client, meestal prisma-client-js.
model: definieert je databasetabellen, oftewel modellen, en hun velden.

Je eerste model definiëren

Laten we een eenvoudig model User definiëren in je bestand prisma/schema.prisma. Dit model vertegenwoordigt een tabel in je database.

id: een unieke identificatie, automatisch oplopend.
email: het e-mailadres van de gebruiker; dit moet uniek zijn.
name: de naam van de gebruiker; dit veld is optioneel.

// prisma/schema.prisma

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

Prisma Client genereren

Nadat je modellen in schema.prisma hebt gedefinieerd of gewijzigd, moet je de Prisma Client genereren. Deze opdracht leest je schema en maakt de typeveilige clientbibliotheek aan.

Deze client importeer je in je Next.js-applicatie en gebruik je om met je database te werken.

npx prisma generate

Migraties toepassen

Om je databasetabellen te maken of bij te werken op basis van schema.prisma, gebruik je migraties. De opdracht migrate dev doet het volgende:

Vergelijkt je schema met de database.
Genereert SQL-migratiebestanden.
Past deze migraties toe op je database.

Na de migratie wordt ook automatisch de Prisma Client gegenereerd.

npx prisma migrate dev --name init

Prisma Client gebruiken

Wanneer Prisma is ingesteld en gegenereerd, kun je PrismaClient in je servercomponenten of API-routes van Next.js gebruiken om databasebewerkingen uit te voeren. Hier volgt een eenvoudig voorbeeld:

import { PrismaClient } from '@prisma/client';

async function main() {
  const prisma = new PrismaClient();
  console.log("Prisma Client successfully initialized!");

  // In a real app, you'd perform database operations:
  // const users = await prisma.user.findMany();
  // console.log(users);

  await prisma.$disconnect();
  console.log("Prisma Client disconnected.");
}

main().catch(console.error);

Korte controle: Prisma-opdrachten

Je hebt verschillende belangrijke Prisma CLI-opdrachten geleerd. Welke opdracht gebruik je om de typeveilige Prisma Client te genereren nadat je het bestand schema.prisma hebt gewijzigd?

Beantwoord dit in de interactieve les

Samenvatting: Prisma instellen

Goed gedaan! Je hebt de belangrijkste stappen geleerd om Prisma ORM in je Next.js-project te integreren:

De Prisma CLI en client geïnstalleerd.
Prisma geïnitialiseerd en je database-URL ingesteld.
Datamodellen gedefinieerd in schema.prisma.
De Prisma Client gegenereerd.
Migraties toegepast om je schema met de database te synchroniseren.
Begrepen hoe je PrismaClient instantieert en gebruikt.

Vervolgens gaan we CRUD-bewerkingen met Prisma uitvoeren!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Prisma ORM instellen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Prisma ORM instellen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Prisma ORM instellen”?

Configureer en integreer Prisma ORM in uw Next.js-project om met verschillende databases te communiceren. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Prisma ORM instellen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)