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

Person mit Brille, die an einem Laptop arbeitet. Auf dem Laptop-Bildschirm und einem grösseren Monitor werden Codezeilen angezeigt. Auf dem Schreibtisch sind eine Wasserflasche, Kopfhörer und eine Pflanze zu sehen.

von Raphael Wirth

Oktober 2024

Heute zeige ich dir, warum Next.js und Prisma das Dream-Team für moderne Webprojekte sind – ideal, wenn du eine schnelle, flexible Lösung für die Entwicklung und Verwaltung deiner Anwendung suchst. Keine Lust auf SQL-Gefrickel? Dann lass uns direkt loslegen!

Was ist Next.js?Prisma erklärtPrisma Accelerate10 Vorteile

Das Wichtigste in Kürze

  • Next.js bietet schnelle, SEO-freundliche Webseiten und bringt deine Projekte rasant auf den Markt. 🏎️
  • Prisma ist ein ORM, das dir den SQL-Stress erspart und Datenbankabfragen einfach mit TypeScript ermöglicht. 😌
  • Mit Prisma Accelerate laufen deine Datenbankabfragen superschnell – weltweit! 🌍

Was ist Next.js

Kurz gesagt: Next.js ist der Turbo für deine React-Anwendung. Blitzschnell, flexibel und perfekt für SEO. Ob du Server-Side Rendering (SSR) oder Static Site Generation (SSG) brauchst – Next.js hat’s drauf.

Prisma erklärt 🤓

Prisma ist ein ORM (Object-Relational Mapping), das dir die Arbeit mit SQL abnimmt. Mit Code-First definierst du deine Datenbanktabellen direkt in TypeScript, und Prisma generiert automatisch den passenden SQL-Code – egal, ob Postgres, MySQL oder eine andere Datenbank. Deine CI/CD-Pipeline sorgt dafür, dass Prisma automatisch Migrationen bis auf deine Produktionsdatenbank ausführt, sodass deine Tabellen immer mit dem Code übereinstimmen. 🚀

Das Beste? Alles ist typisiert, also immer sicher und fehlerfrei. So kannst du dich auf die Entwicklung deiner Features konzentrieren, ohne dich mit komplexen Datenbankabfragen aufzuhalten! 🎉

Prisma Accelerate 🌍💨

Prisma Accelerate ist dein Turbo-Boost für Datenbankabfragen, besonders wenn du Next.js und Vercel nutzt. Es kombiniert globale Connection Pools und Caching direkt in deiner bestehenden Datenbank, was perfekt für Serverless- und Edge-Umgebungen wie Vercel ist.

  • Connection Pools in 15+ Regionen beschleunigen Schreibvorgänge und optimieren deine Performance bei Serverless-Deployments.
  • Caching in 300+ globalen Standorten sorgt dafür, dass deine Abfragen blitzschnell ausgeliefert werden – ideal für die schnelle Auslieferung statischer und dynamischer Seiten mit Next.js.
  • Automatische Skalierung: Accelerate passt sich dynamisch an deinen Traffic an, egal wie gross die Last ist.
  • Weniger Last auf der Datenbank: Reduziere Datenbankzugriffe, während du gleichzeitig die Effizienz steigerst.

In Kombination mit Next.js und Vercel sorgt Prisma Accelerate dafür, dass deine Anwendung super performant ist – weltweit und ohne komplizierte Infrastrukturänderungen. Einfach aktivieren, in die Pipeline integrieren, und los geht's! 🚀

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

Teaser zu relevanten Inhalten

Vorheriger Artikel
Zurück zur Übersicht
Nächster Artikel