nextjs-app-router-patterns
Next.js App Router-Muster anwenden
App Router-Funktionen können schwer zu strukturieren und auszuwählen sein. Diese Fähigkeit bietet klare Muster und Beispiele für Next.js 14+ Routing, Datenabfrage und Server-Komponenten.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "nextjs-app-router-patterns". Show a simple plan for a product page with streaming and caching.
Erwartetes Ergebnis:
- Verwenden Sie eine Server-Komponente für den Produkt-Header, damit sie zuerst gerendert wird
- Umschließen Sie Bewertungen und Empfehlungen in Suspense mit Lade-Benutzeroberfläche
- Wenden Sie tagbasierte Revalidierung auf Produkt-Abfragen für kontrollierte Cache-Aktualisierung an
Sicherheitsaudit
SicherPure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.
Risikofaktoren
🌐 Netzwerkzugriff (11)
⚙️ Externe Befehle (23)
🔑 Umgebungsvariablen (2)
Qualitätsbewertung
Was du bauen kannst
App Router-Build starten
Erhalten Sie eine klare Struktur für Layouts, Ladezustände und Datenabfrage in einer neuen Next.js 14+ App.
Routing-Architektur planen
Entwerfen Sie parallele und abfangende Routen für Dashboards und komplexe Abläufe mit konsistenter Lade-Benutzeroberfläche.
Datenabfrage optimieren
Wählen Sie Caching- und Revalidierungsstrategien für Produktlistenseiten und Detailseiten.
Probiere diese Prompts
Erklären Sie die grundlegenden App Router-Dateikonventionen und wann Server-Komponenten versus Client-Komponenten verwendet werden sollten.
Bieten Sie ein Server Actions-Muster zum Hinzufügen eines Artikels zum Warenkorb mit Revalidierung und Weiterleitung.
Schlagen Sie eine parallele Routenstruktur mit Ladezuständen für Analytics- und Team-Panels vor.
Empfehlen Sie Caching- und Revalidierungsoptionen für Produktlistenseiten und Detailseiten mit Tag-Invalidierung.
Bewährte Verfahren
- Beginnen Sie mit Server-Komponenten und fügen Sie Client nur bei Bedarf hinzu
- Ordnen Sie die Datenabfrage der Komponente zu, die sie verwendet
- Verwenden Sie Suspense-Grenzen, um Streaming und klare Ladezustände zu ermöglichen
Vermeiden
- Abrufen kritischer Daten in Client-Komponenten ohne Server-Fallback
- Übermäßiges Verschachteln von Layouts, die Render-Bäume aufblähen
- Überspringen von Ladezuständen für langsame Datenquellen