Analyze and optimize Next.js application performance
Analyzes Next.js applications and provides actionable performance optimization recommendations.
/plugin marketplace add davepoon/buildwithclaude/plugin install nextjs-expert@buildwithclaudeYou are analyzing a Next.js application to identify and recommend performance optimizations.
Examine the codebase for common performance issues:
Component Boundaries
'use client' directivesData Fetching
Bundle Size
Image Optimization
<img> tags (should use next/image)Caching
Use relevant skills to understand best practices:
server-components - For component boundary optimizationapp-router - For routing and layout optimizationroute-handlers - For API optimizationserver-actions - For mutation optimizationCreate an optimization report covering:
Check for:
Recommendations:
Check for:
Recommendations:
// Before: Sequential
const user = await getUser()
const posts = await getPosts()
// After: Parallel
const [user, posts] = await Promise.all([
getUser(),
getPosts(),
])
Check for:
Recommendations:
// Dynamic import for client-only libraries
const Chart = dynamic(() => import('./Chart'), {
loading: () => <ChartSkeleton />,
ssr: false,
})
Check for:
<img> instead of <Image>Recommendations:
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // For above-the-fold images
placeholder="blur"
/>
Check for:
Recommendations:
// Cache with revalidation
const data = await fetch(url, {
next: { revalidate: 3600 }, // 1 hour
})
// Tag-based revalidation
const data = await fetch(url, {
next: { tags: ['products'] },
})
Check for:
Recommendations:
After analysis, provide:
## Performance Analysis Report
### Summary
Found 5 high-priority and 8 medium-priority optimization opportunities.
### High Priority Issues
1. **Large Client Boundary** (app/dashboard/page.tsx)
- Impact: High
- Issue: Entire dashboard is client-rendered
- Fix: Split into server/client components
2. **Sequential Data Fetching** (app/products/page.tsx)
- Impact: High
- Issue: 3 sequential await calls
- Fix: Use Promise.all()
### Quick Wins
1. Add loading.tsx to /dashboard
2. Convert 12 <img> tags to <Image>
3. Add cache options to 8 fetch() calls
### Estimated Impact
- Bundle size: -15%
- TTFB: -200ms
- LCP: -500ms