Next.js

Aktuelle Next.js-Konventionen für App Router, Server Components und Routing direkt im Editor.

Original-Beschreibung der Autoren: Next.js with TypeScript and Tailwind UI best practices

Die Regel

---
description: "Next.js with TypeScript and Tailwind UI best practices"
globs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx
alwaysApply: false
---
# Next.js Best Practices

## Project Structure
- Use the App Router directory structure
- Place components in `app` directory for route-specific components
- Place shared components in `components` directory
- Place utilities and helpers in `lib` directory
- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)

## Components
- Use Server Components by default
- Mark client components explicitly with 'use client'
- Wrap client components in Suspense with fallback
- Use dynamic loading for non-critical components
- Implement proper error boundaries
- Place static content and interfaces at file end

## Performance
- Optimize images: Use WebP format, size data, lazy loading
- Minimize use of 'useEffect' and 'setState'
- Favor Server Components (RSC) where possible
- Use dynamic loading for non-critical components
- Implement proper caching strategies

## Data Fetching
- Use Server Components for data fetching when possible
- Implement proper error handling for data fetching
- Use appropriate caching strategies
- Handle loading and error states appropriately

## Routing
- Use the App Router conventions
- Implement proper loading and error states for routes
- Use dynamic routes appropriately
- Handle parallel routes when needed

## Forms and Validation
- Use Zod for form validation
- Implement proper server-side validation
- Handle form errors appropriately
- Show loading states during form submission

## State Management
- Minimize client-side state
- Use React Context sparingly
- Prefer server state when possible
- Implement proper loading states

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

Hält Cursor auf dem aktuellen Stand der Next.js-Konventionen – App Router statt Pages Router, Server Components als Standard, Client Components nur gezielt markiert, sowie moderne Datenlade- und Caching-Muster. Der Mehrwert: Viele KI-Vorschläge basieren noch auf veralteten Pages-Router-Mustern, weil Trainingsdaten ältere Next.js-Versionen überrepräsentieren. Diese Regel korrigiert das und sorgt dafür, dass generierter Code zur aktuellen Next.js-Architektur passt, etwa bei Routing, Metadata-API oder Server Actions. Für alle sinnvoll, die aktiv mit einer neueren Next.js-Version arbeiten; bei Legacy-Projekten auf Pages Router kann sie eher zu Fehlvorschlägen führen, da sie App-Router-Muster bevorzugt.

Praxis-Tipp

Bei “Erstelle eine neue Route für /produkte/[id]” schlägt die Regel App-Router-Struktur mit Server Component und passender Metadata-Funktion vor, nicht die alte pages/-Struktur.

Lizenz & Quelle

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

Lade …