nextjs-performance-audit

Next.js Performance Audit

Audit Type: $ARGUMENTS

Current Application Analysis

Application State

• Build status: !ls -la .next/ 2>/dev/null || echo "No build found - run pnpm run build' first"
• Application running: !curl -s http://localhost:3000 > /dev/null && echo "App is running" || echo "App not running - start with 'pnpm run dev'"
• Bundle analysis: !ls -la .next/analyze/ 2>/dev/null || echo "No bundle analysis found"

Project Configuration

• Next.js config: @next.config.js
• Package.json: @package.json
• TypeScript config: @tsconfig.json (if exists)
• Vercel config: @vercel.json (if exists)

Performance Monitoring Setup

• Web Vitals: Check for @next/web-vitals or similar
• Analytics: Check for Vercel Analytics or Google Analytics
• Monitoring tools: Check for Sentry, DataDog, or other APM tools

Performance Audit Framework

1. Lighthouse Audit

# Install Lighthouse CLI if not available
npm install -g lighthouse

# Run Lighthouse audit
lighthouse http://localhost:3000 \
  --output=json \
  --output=html \
  --output-path=./performance-audit \
  --chrome-flags="--headless" \
  --preset=perf

# Mobile performance audit
lighthouse http://localhost:3000 \
  --output=json \
  --output-path=./performance-audit-mobile \
  --preset=perf \
  --form-factor=mobile \
  --throttling-method=devtools \
  --chrome-flags="--headless"

# Generate detailed report
lighthouse http://localhost:3000 \
  --output=html \
  --output-path=./lighthouse-report.html \
  --view

2. Bundle Analysis

// next.config.js - Enable bundle analysis
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // ... your config
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Bundle analysis optimizations
    if (!dev && !isServer) {
      config.optimization.splitChunks = {
        chunks: "all",
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all",
          },
        },
      };
    }
    return config;
  },
});