Next.js Performance Analyzer

A production-quality VS Code extension for detecting and validating frontend performance anti-patterns in Next.js App Router projects.

Features

• Static AST scanning of your Next.js project source files
• Rule-based issue detection with a plugin architecture
• VS Code inline diagnostics (underlines, tooltips)
• Persistent issue tracking — issues survive editor restarts
• Fix tracking — automatically marks issues as FIXED on rescan
• Route mapping — every issue is linked to its Next.js route
• Automated Lighthouse benchmarking — 10 runs per route with fixed throttling
• Median metrics — LCP, INP, CLS, TBT, Performance Score
• Environment logging — CPU, RAM, OS, Node, Chrome, Lighthouse versions
• Professional adaptive dashboard — works with all VS Code themes

Commands

Setup

Prerequisites

npm install -g lighthouse

Chrome must be installed for Lighthouse.

Install Extension Dependencies

cd nextjs-performance-analyzer
npm install

Running in Development

1. Open this folder in VS Code
2. Press F5 to launch Extension Development Host
3. Open a Next.js project in the new window
4. Run Next.js Analyzer: Analyze Project from the Command Palette

Configuration

Architecture

Workspace Project
      ↓
Project Scanner          (src/scanner/projectScanner.js)
      ↓
AST Parser               (src/parser/astParser.js)
      ↓
Rule Engine              (src/rules/index.js)
      ↓
Issue Detection Engine   (src/engine/issueEngine.js)
      ↓
Issue Persistence Manager (src/engine/issuePersistence.js)
      ↓
Fix Tracking Engine      (src/engine/fixTracker.js)
      ↓
Benchmark Orchestrator   (src/engine/benchmarkOrchestrator.js)
      ↓
Environment Monitor      (src/engine/environmentMonitor.js)
      ↓
Diagnostics Manager      (src/engine/diagnosticsManager.js)
      ↓
Dashboard UI             (src/dashboard/)

Storage

Issues and benchmark results are stored locally in:

{project-root}/.nextjs-analyzer/
  issues.json
  benchmarks.json

Add .nextjs-analyzer/ to .gitignore if you don't want to commit these files.

Adding New Rules

1. Create a new file in src/rules/ ending with Rule.js
2. Export the required interface:

module.exports = {
  id: 'MY_RULE_ID',
  name: 'Human readable name',
  description: 'What this rule detects.',
  severity: 'HIGH', // HIGH | MEDIUM | LOW
  applies(filePath) {
    return /\.(js|jsx)$/.test(filePath);
  },
  detect(ast, filePath, route) {
    // traverse ast, return array of raw issue objects
    return [];
  },
};

The rule is automatically loaded by src/rules/index.js — no registration needed.

Implemented Rules

Benchmark Throttling Settings

These match Lighthouse's default "Slow 4G" mobile simulation preset.