next-best-practices

Überblick

Was ist next-best-practices?

next-best-practices ist ein umfassender Skill für Frontend-Entwickler, die mit Next.js arbeiten. Er bietet umsetzbare Best Practices und Muster zum Aufbau skalierbarer, wartbarer Next.js-Anwendungen. Von Dateikonventionen und React Server Component (RSC) Grenzen über asynchrones Daten-Fetching, Fehlerbehandlung bis hin zu Optimierung hilft dieser Skill, häufige Fallstricke zu vermeiden und moderne Next.js-Workflows zu übernehmen.

Für wen ist dieser Skill geeignet?

• Frontend-Entwickler, die Next.js und React verwenden
• Teams, die auf den Next.js App Router migrieren
• Alle, die aktuelle Next.js-Konventionen durchsetzen oder erlernen möchten

Welche Probleme löst er?

• Klärt Datei- und Ordnerstruktur für große Next.js-Projekte
• Führt in die korrekte Nutzung von Server- und Client-Komponenten ein
• Erklärt asynchrone Datenmuster und Migration für Next.js 15+
• Hilft, häufige Bundling- und Laufzeitfehler zu vermeiden
• Bietet robuste Fehlerbehandlungs- und Debugging-Strategien

Wann ist next-best-practices sinnvoll?

• Beim Start eines neuen Next.js-Projekts oder bei Refaktorierung eines bestehenden
• Beim Onboarding neuer Teammitglieder in Next.js-Konventionen
• Bei der Fehlersuche bei Datenabruf, Routing oder Bundling-Problemen

Verwendung

Installationsschritte

1. Fügen Sie den Skill Ihrem Projekt hinzu mit:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. Öffnen Sie die Datei SKILL.md für eine Übersicht und Links zu detaillierten Anleitungen.
3. Prüfen Sie unterstützende Dateien für gezielte Themen:
   • file-conventions.md: Erfahren Sie mehr über Projektstruktur, Routen-Segmente und spezielle Dateien.
   • rsc-boundaries.md: Verstehen Sie gültige und ungültige React Server Component Muster.
   • async-patterns.md: Migrieren Sie zu neuen asynchronen APIs für Params, Cookies und Header.
   • data-patterns.md: Wählen Sie die richtigen Strategien für Datenabruf und -mutation.
   • error-handling.md: Implementieren Sie Fehlergrenzen und behandeln Sie Navigationsausnahmen.
   • bundling.md: Beheben Sie Bundling-Probleme mit Drittanbieter-Paketen.
   • directives.md: Nutzen Sie React- und Next.js-Direktiven wie 'use client', 'use server' und 'use cache'.
   • debug-tricks.md: Beschleunigen Sie das Debugging mit Next.js Dev-Tools und Endpunkten.

Anpassung an Ihr Projekt

• Verwenden Sie die bereitgestellten Muster als Referenz und passen Sie sie an Ihr Repository, Ihre Tools und Ihre Deployment-Umgebung an.
• Kopieren Sie keinen Code unverändert – prüfen Sie jedes Muster auf Kompatibilität mit Ihrem Stack und Ihrer Next.js-Version.

Wichtige Themen

• Dateikonventionen und Projektstruktur
• RSC-Grenzen und Komponenten-Muster
• Asynchrones Daten-Fetching und Migration
• Routen-Handler und Laufzeitauswahl
• Fehlergrenzen und globale Fehlerbehandlung
• Bild- und Schriftoptimierung
• Bundling und Auslagerung von Abhängigkeiten
• Debugging und Entwicklungstools

FAQ

Wie kann ich die Inhalte von next-best-practices ansehen?

Nach der Installation öffnen Sie den Reiter "Files", um alle enthaltenen Anleitungen wie SKILL.md, async-patterns.md, bundling.md und weitere zu durchsuchen. Jede Datei behandelt eine spezifische Next.js Best Practice.

Ist next-best-practices an eine bestimmte Next.js-Version gebunden?

Der Skill ist für Next.js 15+ aktualisiert und beinhaltet Migrationsschritte für neue asynchrone APIs und Konventionen. Einige Muster sind für ältere Versionen möglicherweise nicht anwendbar.

Kann ich next-best-practices mit individuellen Setups verwenden?

Ja, prüfen Sie jedoch jedes Muster auf Kompatibilität mit Ihren individuellen Konfigurationen, insbesondere bei Routing, Server-Laufzeiten und Bundling.

Was, wenn ich zu einem Thema mehr Details benötige?

Jede Themen-Datei enthält praktische Beispiele und Verweise auf die offizielle Next.js- oder React-Dokumentation für vertiefendes Lernen.

Wo bekomme ich Hilfe bei Problemen?

Schauen Sie in debug-tricks.md für erweiterte Debugging-Tipps oder konsultieren Sie die offizielle Next.js-Dokumentation, die in den Skill-Dateien verlinkt ist.