Next.js 15 fullstack (App Router + Server Actions) · Lektion

Konfigurera Prisma ORM

Konfigurera och integrera Prisma ORM i ditt Next.js-projekt för att kommunicera med olika databaser

Lektion 1 av 412 steg

Konfigurera Prisma ORM är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad är en ORM?

Välkommen! I den här lektionen konfigurerar vi Prisma ORM i ett Next.js-projekt. Men först: vad är en ORM?

ORM står för Object-Relational Mapping.
Det är en teknik som låter dig interagera med din databas med hjälp av objekten i ditt programmeringsspråk i stället för att skriva rå SQL.
Du kan se det som en översättare mellan din kod, till exempel JavaScript-objekt, och din databas, till exempel SQL-tabeller.

Varför välja Prisma?

Prisma är en modern ORM som är populär tillsammans med Next.js av flera goda skäl:

Typsäkerhet: Den genererar en typsäker klient som förhindrar många fel vid körning.
Utvecklarupplevelse: Intuitivt API, kraftfulla migreringar och automatisk kodkomplettering.
Modern teknikstack: Utformad för TypeScript och modern JavaScript och passar perfekt med Next.js.
Stöd för databaser: Fungerar med PostgreSQL, MySQL, SQLite, SQL Server och MongoDB.

Installera Prisma

Vi börjar med att lägga till Prisma i ditt Next.js-projekt. Du behöver två huvudpaket:

prisma: Prismas CLI (Command Line Interface) för utvecklingsuppgifter.
@prisma/client: Prismas klientbibliotek för att interagera med din databas i kod.

Kör det här kommandot i projektets rotkatalog:

npm install prisma @prisma/client

Initiera Prisma

Efter installationen måste du initiera Prisma i projektet. Det här kommandot skapar Prismas grundläggande struktur, inklusive filen prisma/schema.prisma.

Det skapar också en .env-fil för din anslutningssträng till databasen.

npx prisma init

Anslut din databas

Filen .env som skapades av prisma init innehåller variabeln DATABASE_URL. Det är här du anger hur Prisma ska ansluta till din databas.

Vid lokal utveckling används ofta SQLite eftersom det är enkelt. I produktion kanske du använder PostgreSQL eller MySQL.

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

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

Prismas schem3fil

Filen prisma/schema.prisma är kärnan i din Prisma-konfiguration. Den definierar tre viktiga block:

datasource: Anger din databasleverantör, till exempel postgresql eller sqlite.
generator: Konfigurerar Prisma Client, vanligtvis prisma-client-js.
model: Definierar dina databastabeller, alltså modellerna, och deras fält.

Definiera din första modell

Vi definierar en enkel User-modell i filen prisma/schema.prisma. Den här modellen motsvarar en tabell i databasen.

id: En unik identifierare som ökas automatiskt.
email: Användarens e-postadress, som måste vara unik.
name: Användarens namn, valfritt.

// prisma/schema.prisma

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

Generera Prisma Client

När du har definierat eller ändrat dina modeller i schema.prisma måste du generera Prisma Client. Det här kommandot läser ditt schema och skapar klientbiblioteket med typsäkerhet.

Det är den här klienten du importerar och använder i din Next.js-applikation för att interagera med databasen.

npx prisma generate

Tillämpa migreringar

För att skapa eller uppdatera databastabeller utifrån schema.prisma använder du migreringar. Kommandot migrate dev:

Jämför ditt schema med databasen.
Genererar SQL-filer för migreringar.
Tillämpar migreringarna på databasen.

Det genererar också Prisma Client automatiskt efter migreringen.

npx prisma migrate dev --name init

Använda Prisma Client

När Prisma har konfigurerats och genererats kan du använda PrismaClient i dina Next.js-serverkomponenter eller API-rutter för att utföra databasoperationer. Här är ett grundläggande exempel:

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);

Snabbtest: Prisma-kommandon

Du har lärt dig flera viktiga Prisma CLI-kommandon. Vilket kommando används för att generera den typsäkra Prisma Client efter att du har ändrat filen schema.prisma?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Konfigurera Prisma

Bra jobbat! Du har lärt dig de viktigaste stegen för att integrera Prisma ORM i ditt Next.js-projekt:

Installerat Prisma CLI och klienten.
Initierat Prisma och konfigurerat din databas-URL.
Definierat datamodeller i schema.prisma.
Genererat Prisma Client.
Tillämpat migreringar för att synkronisera ditt schema med databasen.
Förstått hur du instansierar och använder PrismaClient.

Härnäst går vi igenom hur du utför CRUD-operationer med Prisma!

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera Prisma ORM” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Konfigurera Prisma ORM”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera Prisma ORM”?

Konfigurera och integrera Prisma ORM i ditt Next.js-projekt för att kommunicera med olika databaser Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfigurera Prisma ORM”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)