Nextjs Performance Analyzer

Analyze Next.js applications for performance — audit routing, data fetching, bundle size, image optimization, caching, and Server Components usage.

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

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

# 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