#Next.js
43 Einträge
Prompt zum Hinzufügen von Better Auth zu Next.js mit PostgreSQL
Ein Copy-Paste-Prompt zum Hinzufügen von Better Auth und PostgreSQL-Sitzungsverwaltung zu einem Next.js App Router-Projekt.
Prompt zum Hinzufügen von Cloudflare R2 Datei-Upload
Copy-paste AI Prompt zum Hinzufügen von Cloudflare R2 presigned Upload-URLs zu einem Next.js App Router Projekt mit serverseitiger Validierung.
Prompt zum Hinzufügen des Dark Mode mit Tailwind CSS v4
KI-Agent-Prompt zum Hinzufügen systembewusster Dark-Mode-Unterstützung in einer Next.js-App mit Tailwind CSS v4 CSS-Variablen und next-themes, ohne aufblitzenden Inhalt beim Laden.
Prompt zum Hinzufügen einer PostgreSQL-Volltextsuche
KI-Prompt zum Kopieren und Einfügen, um native PostgreSQL-Volltextsuche mit tsvector, GIN-Index und bewerteten Ergebnissen zu einer bestehenden Next.js-App hinzuzufügen.
Prompt zum Hinzufügen einer Sitemap und robots.txt
KI-Agent-Prompt zum Hinzufügen einer dynamisch generierten sitemap.xml und einer korrekten robots.txt zu einem Next.js- oder Astro-Projekt für eine bessere Suchindexierung.
Prompt zum Hinzufügen von Stripe Checkout zu einer Next.js App
KI-Agent-Prompt zum Hinzufügen von Stripe Checkout mit Webhook-Handling, Kundenportal und Abonnementstatus zu einem Next.js App Router-Projekt.
Prompt zum Erstellen eines Next.js KI-Tool-Verzeichnisses
KI-Agenten-Prompt zum Erstellen eines durchsuchbaren Next.js KI-Tool-Verzeichnisses mit MDX-Datendateien, Kategorie-Filtern und statischer Generierung.
Prompt zum Erstellen einer SaaS-Preisseite in Next.js
Copy-Paste-KI-Prompt zum Erstellen einer SaaS-Preisseite in Next.js mit Tailwind, Umschaltmöglichkeit für Abrechnung und Stricke-ready-Plan-Daten.
Prompt zum Erstellen eines GitHub Actions Deploy-Workflows
KI-Agent-Prompt zum Generieren eines produktionsreifen GitHub Actions CI/CD-Workflows für eine Next.js-App mit Type-Check, Test, Build und Deploy-Schritten.
Prompt zum Erstellen eines Admin-Dashboards in Next.js
AI-Agent-Prompt zum Erstellen eines geschützten Next.js Admin-Dashboards mit Datentabellen, serverseitigen Auth-Guards und einem Sidebar-Layout mit Tailwind.
Prompt zum Generieren von OG-Bildern zur Build-Zeit
KI-Agent-Prompt zum Generieren von pro-Seite Open Graph-Bildern zur Build-Zeit in Astro oder Next.js mit Satori und sharp, ohne externen Dienst.
Prompt zur Migration einer Next.js 14 App auf Next.js 16
Strukturierter KI-Agent-Prompt zur Migration eines Next.js 14 App Router Projekts auf Next.js 16 mit Behandlung von Breaking Changes und schrittweisem Vorgehen.
Prompt zum sicheren Refactoring einer React-Komponente
Strukturierter KI-Agent-Prompt zum Refactoring einer komplexen React-Komponente mit einem Lese-Audit-Refactor-Verify-Zyklus, der Regressionen verhindert.
AGENTS.md-Regeln für eine Next.js SaaS-App
Ein einsatzbereites AGENTS.md, das KI-Codierungsagenten im Stack und im Einklang mit den Konventionen einer Next.js SaaS-Codebasis hält.
KI-Codierungsregeln für Authentifizierung und Sicherheit
AGENTS.md-Regeln für Authentifizierung und Sicherheit, die verhindern, dass Agenten eigene Kryptografie implementieren, Geheimnisse preisgeben oder Autorisierungsprüfungen umgehen.
AI-Coding-Regeln für PostgreSQL-Apps
AGENTS.md-Regeln für PostgreSQL-basierte Apps, die Abfragesicherheit, Migrationsdisziplin, Indexierungskonventionen abdecken und verhindern, dass Agents N+1-Abfragen schreiben.
KI-Codierungsregeln für SEO-Inhaltsseiten
AGENTS.md-Regeln für SEO-fokussierte Inhaltsseiten, die doppelte Metadaten verhindern, strukturierte Daten erzwingen und Agenten daran hindern, die Crawlbarkeit zu beeinträchtigen.
KI-Codierregeln für die Leistung statischer Websites
AGENTS.md-Regeln für die Leistung statischer Websites, die Core Web Vitals, Bildoptimierung, Schriftarteinbindung durchsetzen und verhindern, dass Agenten renderblockierende Ressourcen ausliefern.
KI-Codierungsregeln für TypeScript-Strict-Projekte
AGENTS.md-Regeln für TypeScript Strict-Mode-Projekte, die jegliche Typen eliminieren, Narrowing-Muster erzwingen und verhindern, dass Agents Code kompilieren, der zwar funktioniert, aber falsch ist.
Claude Code Regeln für Prisma-Projekte
Claude Code Regeln für Prisma ORM-Projekte, die Migrationssicherheit, Abfragemuster, Relationsladen und die Verhinderung von Schema-Korruption durch Agenten abdecken.
Cursor-Regeln für Tailwind CSS und shadcn/ui
Cursor-Regeln, die Tailwind v4-Konventionen und shadcn/ui-Komponentenmuster erzwingen und verhindern, dass Agenten bereits vorhandene Primitive neu erfinden.
Prompt-to-PR: Eine Preisseite hinzufügen
SOP zum Erstellen einer Produktions-Preisseite mit monatlichem/jährlichem Umschalter, Feature-Matrix und Stripe Checkout-Links in einem Next.js Tailwind-Projekt.
Prompt-to-PR: Sitemap und robots.txt hinzufügen
SOP zum Hinzufügen einer dynamischen XML-Sitemap und robots.txt zu einem Next.js- oder Astro-Projekt – korrekte lastmod-, priority- und Crawl-Regeln für die Produktions-SEO.
Prompt-to-PR: Admin-Datentabelle hinzufügen
SOP zum Hinzufügen einer serverseitig paginierten, sortierbaren, durchsuchbaren Admin-Datentabelle in Next.js mit TanStack Table und einer PostgreSQL-Abfrage — kein ORM-Zauber.
Prompt-to-PR: Better Auth zu einer Next.js-App hinzufügen
Vollständiges SOP für die Integration von Better Auth in ein Next.js App Router-Projekt — Sitzungen, E-Mail/Passwort, OAuth und Middleware-Schutz in einem Durchgang.
Prompt-zu-PR: Cloudflare R2 Dateiupload hinzufügen
Ende-zu-Ende SOP zum Einbinden vorab signierter R2-Uploads in eine Next.js- oder Cloudflare Workers-App – Bucket-Bindung, vorab signierte URLs und Client-Upload-Ablauf.
Prompt-to-PR: Dunkelmodus hinzufügen
End-to-End-SOP zum Hinzufügen eines flackerfreien Dunkelmodus zu einer Next.js Tailwind-App mit next-themes — Klassenstrategie, Systemeinstellung und persistierter Umschalter.
Prompt-to-PR: PostgreSQL-Volltextsuche hinzufügen
SOP zum Hinzufügen einer nativen PostgreSQL-Volltextsuche mit tsvector, GIN-Index, ts_rank und einer Next.js-Such-API – kein externer Suchdienst erforderlich.
Prompt-to-PR: Next.js 14 auf 16 migrieren
Schritt-für-Schritt-SOP zur Migration eines Next.js 14 App Router-Projekts auf Next.js 16 — Turbopack, React 19, asynchrone APIs und Caching-Änderungen abgedeckt.
Checkliste zur Überprüfung von KI-generierten API-Routen
Eine menschliche Überprüfungscheckliste für REST- und RPC-API-Routen, die von KI-Codierungsagenten geschrieben wurden – Authentifizierung, Eingabevalidierung, Ratenbegrenzung und Fehlerbehandlung.
Checkliste zur Überprüfung von KI-generiertem Authentifizierungscode
Eine Checkliste für Menschen zur Überprüfung von Authentifizierungscode, der von KI-Codierungsagenten geschrieben wurde – Sitzungen, JWTs, OAuth-Abläufe und Autorisierungslogik für Web-Apps.
Checkliste zur Überprüfung von KI-generiertem Next.js-Code
Eine Checkliste zur manuellen Überprüfung von Next.js-Code, der von KI-Codierungsagenten geschrieben wurde – App Router, Server Components, Datenabruf und Bereitstellungskorrektheit.
Checkliste zur Überprüfung KI-generierter SEO-Seiten
Eine Checkliste für die manuelle Überprüfung von SEO-optimierten Seiten, die von KI-Coding-Agenten erstellt wurden – Metadaten, strukturierte Daten, kanonische URLs und Core Web Vitals für Astro und Next.js.
Checkliste zur Überprüfung von KI-generiertem Stripe-Code
Eine Checkliste für die menschliche Überprüfung von Stripe-Integrationscode, der von KI-Coding-Agenten geschrieben wurde – Webhook-Sicherheit, Idempotenz, Wettlaufsituationen und Zahlungsabläufe.
Checkliste zur Überprüfung von KI-generiertem Tailwind UI
Eine menschliche Überprüfungscheckliste für Tailwind CSS UI-Komponenten, die von KI-Coding-Agenten geschrieben wurden – Barrierefreiheit, Responsivität, Dark Mode und Purge-Sicherheit.
So beheben Sie Hydrierungsinkonsistenzen durch KI-generierte React-Komponenten
KI-Agenten generieren React-Komponenten, die auf Server und Client unterschiedliches HTML rendern, was zu Hydrierungsfehlern und einer defekten Benutzeroberfläche beim ersten Laden führt.
So beheben Sie, dass KI die Validierung von Umgebungsvariablen vergisst
KI-Agenten lesen process.env-Werte direkt ohne Validierung, was zu stillen undefined-Fehlern und fehlenden Startfehlern führt, wenn Umgebungsvariablen fehlen.
So beheben Sie, dass KI SEO-Metadaten ignoriert
KI-Agenten erstellen Next.js- und Astro-Seiten ohne Titel-Tags, Open-Graph-Metadaten oder kanonische URLs und liefern Seiten aus, die für Suchmaschinen und Social Crawler unsichtbar sind.
So beheben Sie die übermäßige Nutzung von useEffect durch KI
KI-Agenten greifen auf useEffect zurück, um abgeleitete Zustände, Ereignistransformationen und Datenabrufe zu behandeln, die stattdessen useMemo, Ereignishandler oder Server Components verwenden sollten.
So beheben Sie, dass KI Server-Code in Client-Komponenten platziert
KI-Agenten geben Datenbankabfragen, geheime Umgebungsvariablen und Node.js-APIs in `'use client'`-Komponenten preis, wodurch serverseitige Logik im Browser-Bundle offengelegt wird.
So beheben Sie Probleme mit KI-Codierungsagenten, die veraltete Next.js-APIs verwenden
KI-Agenten generieren häufig Next.js-Code unter Verwendung veralteter Pages Router-Muster, getServerSideProps und entfernter APIs, die App Router-Projekte beschädigen.
Next.js SaaS Starter — Kontext-Paket
Kopierbares Kontext-Paket für eine Next.js SaaS-App mit App Router, Better Auth, Stripe billing und Postgres, damit Ihr KI-Agent ab Prompt eins korrekt arbeitet.
PostgreSQL Such-App – Kontext-Paket
Kopierbares Kontext-Paket für eine Volltext- und Vektorsuchanwendung, unterstützt von PostgreSQL mit pgvector, damit Ihr KI-Agent von Anfang an korrekte SQL- und Migrationscodes schreibt.