Next.js

Feste Coding-Regeln für Next.js-Projekte, etwa Server-Components, shadcn/ui und useRef statt unnötiger Re-Renders.

Der Prompt

# Next.js
- Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values. Confidence: 0.85
- Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component. Confidence: 0.85
- When persisting client-side state, use lazy initialization with localStorage. Confidence: 0.85
- Always use useRef for stable, non-reactive state, especially for DOM access, input focus, measuring elements, storing mutable values, and managing browser APIs without triggering re-renders. Confidence: 0.85
- Use sr-only classes for accessibility labels. Confidence: 0.85
- Always use shadcn/ui as the component system for Next.js projects. Confidence: 0.85
- When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables. Confidence: 0.70
- When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability. Confidence: 0.85
- State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI. Confidence: 0.85
- Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state. Confidence: 0.85

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Diese Regelsammlung fasst bewährte Next.js-Konventionen zusammen, statt einen freien Prompt-Text vorzugeben: minimaler Hook-Einsatz (useState, useEffect, useCallback, useMemo), page.tsx bleibt immer Server-Component, Client-Logik wandert in eigene Komponenten, localStorage wird lazy initialisiert und useRef kommt für DOM-Zugriffe und mutable Werte ohne Re-Render zum Einsatz. Dazu kommen sr-only-Klassen für Barrierefreiheit und shadcn/ui als verbindliches Komponentensystem inklusive Tailwind-Konfiguration. Der Mehrwert liegt darin, dass ein KI-Assistent beim Next.js-Code automatisch diese Konventionen einhält, statt bei jedem Prompt neu erklärt zu werden. Besonders hilfreich für Teams, die einheitlichen Code-Stil über mehrere Sessions und Entwickler hinweg durchsetzen wollen.

Praxis-Tipp

Legen Sie diese Regeln als Projekt- oder System-Prompt ab, damit jede neue Codegenerierung automatisch Server-Components, shadcn/ui und die Hook-Konventionen befolgt, ohne dass Sie es jedes Mal wiederholen müssen.

Siehe auch

• Accessibility Auditor
• Architect Guide for Programmers
• Bug Discovery Code Assistant

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …