nextjs-performance-analyzer

by charlie-morrison

Install this Skill

curl -fsSL -o nextjs-performance-analyzer.zip https://skill.seembox.com/api/v1/skills/nextjs-performance-analyzer/download && unzip nextjs-performance-analyzer.zip

Download nextjs-performance-analyzer.zip

SKILL.md About

---
name: nextjs-performance-analyzer
description: Analyze Next.js applications for performance — audit routing, data fetching, bundle size, image optimization, caching, and Server Components usage.
metadata:
  tags: ["nextjs", "react", "performance", "web", "frontend"]
---

# Next.js Performance Analyzer

Analyze Next.js applications for performance issues including routing efficiency, data fetching patterns, bundle size, image optimization, caching strategy, and Server/Client Components usage. Use when pages are slow, builds are large, or preparing for production.

## Usage

```
"Analyze my Next.js app for performance issues"
"Check my bundle size and optimize it"
"Audit data fetching patterns in my Next.js app"
"Review Server Components usage"
```

## How It Works

### 1. Project Discovery

```bash
cat next.config.js 2>/dev/null || cat next.config.mjs 2>/dev/null || cat next.config.ts 2>/dev/null
cat package.json | python3 -c "import json,sys;d=json.load(sys.stdin);print('Next.js:', d.get('dependencies',{}).get('next','not found'))"
ls app/ pages/ 2>/dev/null
find app/ -name "page.tsx" -o -name "page.js" 2>/dev/null | head -20
```

### 2. Routing & Data Fetching

**App Router analysis:**
- Server vs Client Components ratio
- `'use client'` directives — are they too high in the tree?
- Dynamic vs static routes
- Proper use of `generateStaticParams` for SSG
- `loading.tsx` and `error.tsx` present for each route segment
- Streaming with Suspense boundaries
- Route groups for layout organization

**Data fetching:**
- fetch() calls: using cache options? (`force-cache`, `no-store`, `revalidate`)
- Server Actions: proper form handling, error boundaries
- Client-side fetching: SWR/React Query with proper caching?
- N+1 waterfall: sequential fetches that could be parallel
- Over-fetching: loading more data than displayed

### 3. Bundle Analysis

```bash
# Build and check output
npx next build 2>&1 | tail -30
# Check for large client bundles
find .next/static -name "*.js" -exec wc -c {} + | sort -rn | head -10
```

- Large client-side dependencies that should stay server-side
- Dynamic imports for heavy components (`next/dynamic`)
- Tree shaking effectiveness
- Third-party scripts loading strategy (`next/script`)

### 4. Image Optimization

- All images using `next/image` component?
- Proper `width`/`height` or `fill` prop set?
- Priority flag on LCP (Largest Contentful Paint) images
- Remote image domains configured in `next.config`
- WebP/AVIF format support
- Lazy loading for below-fold images

### 5. Caching Strategy

- ISR (Incremental Static Regeneration) configured where appropriate
- Data cache with proper revalidation intervals
- Full Route Cache for static pages
- Router Cache for client-side navigation
- CDN caching headers for static assets

### 6. Core Web Vitals

Estimate impact on:
- **LCP**: Image optimization, font loading, data fetching strategy
- **FID/INP**: Client-side JavaScript amount, hydration cost
- **CLS**: Image dimensions, dynamic content, font loading

## Output

```
## Next.js Performance Analysis

**Version:** Next.js 15.2 | **Router:** App Router
**Pages:** 34 | **Client Components:** 18/34 (53%)

### 🔴 Critical (3)
1. **'use client' at layout level** — app/dashboard/layout.tsx
   Makes ALL dashboard pages client-rendered (12 pages)
   → Move 'use client' down to individual interactive components

2. **No image optimization** — 23 raw <img> tags found
   Missing next/image = no automatic WebP, no lazy loading, no sizing
   → Replace with Image component from 'next/image'

3. **Waterfall data fetching** — app/dashboard/page.tsx
   3 sequential await fetch() calls (total: ~1.8s)
   → Use Promise.all() for parallel fetching

### 🟡 Improvements (5)
4. Missing loading.tsx on 8 route segments
5. Large bundle: chart.js (180KB) loaded on every page → dynamic import
6. No generateStaticParams for /blog/[slug] (47 posts, all SSR)
7. Font loaded from Google Fonts CDN → use next/font for zero CLS
8. Missing priority prop on hero image (LCP candidate)

### 📊 Bundle Analysis
| Route | Size | First Load JS | Status |
|-------|------|---------------|--------|
| / | 89KB | 145KB | 🟢 OK |
| /dashboard | 312KB | 368KB | 🔴 Too large |
| /settings | 45KB | 101KB | 🟢 OK |
| /blog/[slug] | 67KB | 123KB | 🟢 OK |

### ✅ Good Practices  
- Server Components for data-heavy pages
- Proper Suspense boundaries with fallbacks
- Middleware for auth checks (edge-optimized)
- next.config.js uses output: 'standalone' for Docker
```

_meta.json Metadata

{
  "ownerId": "kn7d5eszdfwftk153ymhdm4qhs83qsqy",
  "publishedAt": 1777625090129,
  "slug": "nextjs-performance-analyzer",
  "version": "1.0.0"
}