diagnosing-nextjs-performance
Next.js Router performance analysis and bottleneck identification workflow. Triggers when user reports performance issues, slow routing, or requests Next.js optimization analysis. Use for identifying FCP/LCP/CLS bottlenecks and Server Actions blocking.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Next.js Router performance analysis and bottleneck identification workflow. Triggers when user reports performance issues, slow routing, or requests Next.js optimization analysis. Use for identifying FCP/LCP/CLS bottlenecks and Server Actions blocking.
How to use
Zainstaluj umiejętność w swoim projekcie Next.js, umieszczając ją w katalogu .claude/skills/.
Uruchom serwer deweloperski poleceniem npm run dev:stable, aby umiejętność mogła zbierać metryki wydajności w rzeczywistym środowisku.
Zgłoś problem wydajności, używając słów kluczowych takich jak "performance issues", "slow routing", "next router bottleneck" lub "performance diagnosis". Umiejętność automatycznie się aktywuje.
Umiejętność zbierze bieżące metryki (FCP, LCP, TTFB, czas odpowiedzi) z logów wydajności lub estymacji. Jeśli logi nie istnieją, wyświetli ostrzeżenie i użyje przybliżonych wartości.
Przeanalizuj raport z identyfikacją wąskich gardeł: sprawdź czy używasz dynamic imports do opóźnionego ładowania komponentów, czy Server Actions blokują łańcuchy await, czy middleware nie spowalnia routingu.
Zastosuj rekomendacje optymalizacji z raportu, takie jak implementacja dynamic imports, rozłożenie Server Actions lub redukcja rozmiaru bundla.