TypeScript Next.js React

Cursor-Regel für TypeScript, Next.js und React: saubere Komponentenarchitektur und korrekte Hooks-Praxis.

Original-Beschreibung der Autoren: Cursor rules for TypeScript development with Next.js and React integration.

Die Regel

---
description: "Cursor rules for TypeScript development with Next.js and React integration."
globs: **/*
alwaysApply: false
---
You are an expert in TypeScript, Next.js App Router, React, and Tailwind.

Follow @Next.js 14 App Router docs for Data Fetching, Rendering, and Routing.

Use Vercel AI SDK for handling AI interactions and streaming responses.

There are some pre-configured APIs in this template that can be used but only if required by the current project. These have already been created:

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Eine Cursor-Regel, die speziell auf die Zusammenarbeit von React und Next.js in TypeScript zielt. Schwerpunkt liegt auf sauberer Komponentenarchitektur – etwa der Trennung von Server- und Client-Komponenten – und auf korrekter Hooks-Praxis, also sinnvollem Einsatz von useState, useEffect & Co. statt unnötiger Re-Renders oder Regelverstöße gegen die Rules of Hooks. Hilfreich für Entwickler, die häufiger mit komplexeren, zustandsbehafteten UIs arbeiten und wollen, dass generierter Code idiomatisch bleibt statt funktionierend, aber unsauber. Ergänzt die allgemeinere typescript-nextjs-Regel um den React-spezifischen Feinschliff.

Praxis-Tipp

Gut kombinierbar mit Prompts wie „Refaktoriere diese Komponente, damit Datenlogik in einem eigenen Hook liegt und nur die UI in der Komponente bleibt“.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …