diagnosing-nextjs-performance
Automatyczna analiza wydajności routingu Next.js i identyfikacja wąskich gardeł
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność diagnostyczna dla Next.js, która automatycznie analizuje problemy wydajności routingu. Uruchamia się gdy zgłosisz powolne ładowanie stron, problemy z routingiem lub poproszysz o optymalizację. Identyfikuje wąskie gardła w FCP, LCP, CLS oraz blokady Server Actions. Zbiera metryki wydajności i porównuje je z celami Google (FCP < 1,8s). Wspiera Next.js 16 z App Router.
Jak używać
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.