Next.js, Tailwind und Prisma mit Docker Postgres

Voraussetzungen

Installieren Sie diese Tools, bevor Sie die Schritte befolgen:

• Docker (für einen lokalen Postgres-Container)
• Node.js (v16+ empfohlen)
• npm (kommt mit Node)

1) Erstellen Sie ein Next.js-Projekt

Verwenden Sie den offiziellen Initialisierer und beantworten Sie die Anfragen. Für diese Anleitung werden App Router und TypeScript bevorzugt.

npx create-next-app@latest notes-taking

# choose your options in the interactive prompt (App Router, TypeScript recommended)

cd note-taking

Um ab dem ersten Befehl TypeScript zu zwingen:

npx create-next-app@latest note-taking — ts

2) Fügen Sie Tailwind CSS hinzu (ist bereits in Next.js enthalten)

Neue create-next-app-Templates integrieren bereits Tailwind, wenn Sie es in den interaktiven Optionen aktivieren, sodass für ein neues Projekt, das dies ausgewählt hat, keine separate Installation von Tailwind erforderlich ist.

3) Führen Sie Postgres mit Docker aus (lokal)

Starten Sie Postgres in einem Container:

docker run — name notes-postgres -e POSTGRES_PASSWORD=password -e POSTGRES_DB=notes_app -p 5432:5432 -d postgres:latest

Bedeutung der Flags:

• docker run – erstellt und startet einen Container
• --name notes-postgres – stabiler Name für spätere Befehle
• -e POSTGRES_PASSWORD=... / -e POSTGRES_DB=... – Anmeldeinformationen und Datenbank zum Initialisieren
• -p 5432:5432 – macht den Port auf dem Host verfügbar
• -d postgres:latest – verwendet das Postgres-Bild im Hintergrund

Überprüfen Sie, ob es läuft:

docker ps

Filtern nach Bild:

docker ps — filter “ancestor=postgres”

Listet alle Container auf, einschließlich der gestoppten:

docker ps -a

Filtern nach Containername:

docker ps — filter “name=notes-postgres”

4) Prisma und verwandte Pakete installieren

Vom Wurzelverzeichnis des Next.js-Projekts aus:

npm install prisma tsx — save-dev

npm install @prisma/extension-accelerate @prisma/client

Initialisieren Sie Prisma und legen Sie die Client-Komponente im app-Verzeichnis ab, damit die Importe des App Routers lokal bleiben:

npx prisma init — db — output ../app/generated/prisma

Dadurch entsteht ein Verzeichnis prisma/ mit schema.prisma, eine .env-Datei, die DATABASE_URL enthält, sowie (mit --output) ein generierter Client unter app/generated/prisma.

Möchten Sie stattdessen die Standard-Client-Location verwenden? Initialisieren Sie ohne benutzerdefinierten Ausgabepfad:

npx prisma init — db and remove — output.

5) Konfigurieren von .env (DATABASE_URL)

Weisen Sie DATABASE_URL auf die Docker-Postgres-Instanz hin:

DATABASE_URL=”postgresql://postgres:password@localhost:5432/notes_app?schema=public”

Wechseln Sie das Passwort und den Datenbanknamen, falls Sie andere Werte gewählt haben.

6) Bearbeiten von prisma/schema.prisma

Verwenden Sie ein Benutzer-/Post-Modell-Paar, das später mit dem Seed-Skript übereinstimmt:

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

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

model User {
id Int @id @default(autoincrement())
name String
email String @unique
posts Post[]
}

model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
}

Speichern Sie die Datei, sobald die Modelle korrekt aussehen.

7) Ausführen der Migration (Tabellen erstellen)

Wenden Sie die erste Migration an, um Tabellen zu erstellen:

npx prisma migrate dev — name init

Prisma schreibt den SQL-Code für diese Änderung unter prisma/migrations.

8) Die Datenbank befüllen

Durch das Befüllen werden Beispieldaten eingegeben, sodass Prisma Studio und die Anwendung sofort über Daten verfügen.

Erstellen Sie prisma/seed.ts (passen Sie den Import an, falls sich der Ausgabepfad Ihres Clients unterscheidet):

// prisma/seed.ts
import { PrismaClient, Prisma } from "../app/generated/prisma";

const prisma = new PrismaClient();

const userData: Prisma.UserCreateInput[] = [
  {
    name: "Alice",
    email: "alice@prisma.io",
    posts: {
      create: [
        {
          title: "Join the Prisma Discord",
          content: "https://pris.ly/discord",
          published: true,
        },
        {
          title: "Prisma on YouTube",
          content: "https://pris.ly/youtube",
        },
      ],
    },
  },
  {
    name: "Bob",
    email: "bob@prisma.io",
    posts: {
      create: [
        {
          title: "Follow Prisma on Twitter",
          content: "https://www.twitter.com/prisma",
          published: true,
        },
      ],
    },
  },
];

export async function main() {
  for (const u of userData) {
    await prisma.user.create({ data: u });
  }
}

main();ty

Registrieren Sie das Seed-Skript in package.json:

"prisma": {
"seed": "tsx prisma/seed.ts"
}

Führen Sie es aus:

npx prisma db seed

Dadurch werden Alice und Bob sowie ihre Beiträge eingegeben.

9) Prisma Studio öffnen

Überprüfen und visuell bearbeiten Sie die Datensätze:

npx prisma studio

Die Benutzeroberfläche im Browser listet Modelle und Datensätze auf.

10) Einen Prisma-Client-Wrapper erstellen (lib/prisma.ts)

Vermeiden Sie in der Entwicklung die Erstellung vieler PrismaClient-Instanzen, indem Sie einen globalen Singleton sowie die accelerate-Erweiterung verwenden. Erstellen Sie lib/prisma.ts:

// lib/prisma.ts
import { PrismaClient } from "../app/generated/prisma"; // adjust path if needed
import { withAccelerate } from "@prisma/extension-accelerate";

declare global {
// allow global prisma across module reloads in dev
// eslint-disable-next-line no-var
var prisma: PrismaClient | undefined;
}

const prisma =
global.prisma ?? new PrismaClient().$extends(withAccelerate());
if (process.env.NODE_ENV !== "production") global.prisma = prisma;

export default prisma;

Weisen Sie die Import-Anweisung auf Ihren generierten Client-Pfad hin, oder verwenden Sie @prisma/client, wenn Sie --output übersprungen haben.

11) Testen Sie die DB-Verbindung von Next.js (Server-Komponente)

Beispiel für app/page.tsx, das Benutzer auf dem Server lädt:

import prisma from '@/lib/db'

export default async function Home() {
  const users = await prisma.user.findMany();
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Superblog
      </h1>
      <ol className="list-decimal list-inside font-[family-name:var(--font-geist-sans)]">
        {users.map((user) => (
          <li key={user.id} className="mb-2">
            {user.name}
          </li>
        ))}
      </ol>
    </div>
  );
}

Starten Sie den Next.js-Entwicklungsserver:

npm run dev

Öffnen Sie http://localhost:3000 und überprüfen Sie, ob die vorgefertigten Benutzer angezeigt werden.

Vollständige Checkliste der Befehle

Projekt erstellen

npx create-next-app@latest my-app

cd my-app

PostgreSQL mit Docker

docker run — name notes-postgres -e POSTGRES_PASSWORD=password -e POSTGRES_DB=notes_app -p 5432:5432 -d postgres:latest

docker ps

docker exec -it notes-postgres psql -U postgres

Prisma

npm install prisma tsx — save-dev

npm install @prisma/extension-accelerate @prisma/client

npx prisma init — db — output ../app/generated/prisma

prisma/schema.prisma bearbeiten

npx prisma migrate dev — name init

prisma/seed.ts erstellen

Eintrag prisma.seed in package.json hinzufügen

npx prisma db seed

npx prisma studio

npm run dev

Fehlerbehebung & Tipps

• Kann nicht mit Postgres verbinden: Überprüfen Sie den Container mit docker ps, dann prüfen Sie Host und Port von DATABASE_URL. Versuchen Sie psql vom Host oder einem anderen Client unter Verwendung derselben URL.
• Migrationsfehler: Lesen Sie die unter prisma/migrations erzeugten SQL-Dateien von Prisma und stellen Sie sicher, dass der Datenbankname mit dem in .env angegebenen übereinstimmt.
• Falsche Client-Importe: Erstellen Sie die Dateien erneut, nachdem Sie output geändert haben, oder wechseln Sie die Importe auf @prisma/client, falls Sie die Standardposition verwenden.
• Leere Benutzeroberfläche: Führen Sie die Seed-Daten erneut aus und stellen Sie sicher, dass Prisma Studio Alice/Bob anzeigt, bevor Sie den Seitenkomponenten nachforschen.