Next.js und Prisma: Das Dream-Team für moderne Webanwendungen

10 Gründe, warum du Next.js und Prisma verwenden solltest

1. Schnellere Time-to-Market 🚀

Mit Next.js und Prisma kannst du Features effizient entwickeln und schneller live bringen. Dank einfachem Datenbankzugriff und flexiblem Rendering sparst du wertvolle Zeit im Entwicklungsprozess.

2. Perfekte Integration mit React Server Components ⚙️

Prisma lässt sich nahtlos mit React Server Components kombinieren. Das bedeutet, du kannst Server- und Datenbankzugriffe direkt in deinen Komponenten abwickeln – ohne zusätzlichen API-Overhead. Deine Anwendung bleibt schlank und performant.

Einfache Nutzung von Prisma direkt in React Server Components

typescript
'use server'

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

// Ensure you use a singleton to avoid too many open connections
const prisma = new PrismaClient();

export default async function UserList() {
  const users = await prisma.user.findMany();
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. Server Actions für clientseitige Komponenten 🔄

Auch bei clientseitigen Komponenten spielt Prisma hervorragend mit Next.js Server Actions zusammen. Du musst dich nicht mehr um APIs kümmern, sondern kannst direkt auf dem Server arbeiten und die Ergebnisse sofort im Client nutzen.

Prisma in Server Actions: Weil APIs Überbewertet sind!

typescript
// src/app/actions.ts

'use server';

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

// Ensure you use a singleton to avoid too many open connections
const prisma = new PrismaClient();

export async function create(data: { name: string }) {
  return await prisma.user.create({ data });
}

typescript
// src/components/UserForm.tsx

'use client'

import React, { FC, FormEvent } from 'react';
import { create } from '@/app/actions';

export const UserForm: FC = () => {
  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    const name = event.currentTarget.name.value;
    await create({ name });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" />
      <button type="submit">Benutzer erstellen</button>
    </form>
  );
};

4. Kein tiefes SQL-Know-how nötig 🧠

Mit Prisma brauchst du kein tiefgehendes SQL-Wissen. Prisma abstrahiert die Datenbankabfragen und generiert den passenden SQL-Code im Hintergrund. Du kannst dich auf die Entwicklung konzentrieren, ohne dich mit komplexen Datenbankkenntnissen aufzuhalten.

Warum kompliziert wenns auch einfach geht?

sql
SELECT id, name, email
FROM users
WHERE email LIKE '%@example.com%'
ORDER BY created_at DESC;

typescript
const users = await prisma.user.findMany({
  where: {
    email: {
      contains: '@example.com',
    },
  },
  orderBy: {
    createdAt: 'desc',
  },
});

5. Flache Lernkurve 🏞️

Prisma und Next.js haben eine flache Lernkurve – fast so flach wie der Hüetliberg (Für alle Nicht-Zürcher: Der Hüetliberg ist der «Hausberg» von Zürich, der laut unseren Bündnern den Namen Berg nicht verdient). Du wirst also schnell produktiv, ohne lange Einarbeitungszeit.

6. Automatisierte Datenbankmigrationen 🔄

Migrationen von Hand? Nicht nötig! Mit Prisma laufen Datenbankmigrationen automatisch ab. Du sparst Zeit und kannst dich auf kreative Lösungen konzentrieren, statt manuelle Skripte zu schreiben.

Bye-bye manuelle Migrationen: Prisma macht’s von selbst!

json
// package.json

"scripts": {
    "dev": "npm run db:generate-client && npm run db:apply-migrations && next dev",
    "build": "npm run db:generate-client && next build",
    "vercel-build": "npm run db:generate-client && next build && npm run db:apply-migrations",
    "start": "npm run db:apply-migrations && next start",
    "lint": "next lint",
    "db:generate-client": "prisma generate",
    "db:generate-migration": "prisma migrate dev",
    "db:apply-migrations": "prisma migrate deploy"
  }

7. Optimierte Performance und Skalierbarkeit 🌍

Mit Prisma Accelerate werden deine Datenbankabfragen weltweit gecached und rasend schnell ausgeliefert. Zusammen mit Next.js erreichst du top Performance – egal, wie viele Nutzer gleichzeitig auf deine App zugreifen.

8. Datenbank? Egal! 💾

Egal ob MySQL, Postgres oder MongoDB – Prisma unterstützt eine Vielzahl von Datenbanken. Solltest du irgendwann wechseln müssen, kannst du einfach den Provider und den Connection String ändern, und es läuft weiter.

Wechsel von Postgres auf MySQL? Kein Problem!

typescript
datasource db {
  provider = "postgresql"
  url      = "postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample"
}

typescript
datasource db {
  provider = "mysql"
  url      = "mysql://janedoe:mypassword@localhost:3306/mydb"
}

9. Bessere Codequalität und Wartbarkeit 🛠️

Dank Type-Safety im gesamten Stack arbeitest du mit weniger Fehlern und stabilerem Code. Deine Produktivität bleibt hoch, und die Wartung wird zum Kinderspiel.

10. Zukunftssicher und Community-unterstützt 🔮

Sowohl Next.js als auch Prisma haben grosse, aktive Communities und bekommen regelmässig Updates. Dein Projekt bleibt sicher, stabil und immer auf dem neuesten Stand der Technik.

Noch mehr von deiner Lieblings-Agentur