skills.rest
vovanostm-public
vovanostm-publicOFFICIAL
Explore all skills by this author →
GitHub

nextjs-dev-profiling

Diagnose Next.js dev server CPU, memory, and styling issues through profiling.

Updated Jun 8, 2026
Search Tags:#performance#debugging#dev server#next.js#memory#profiling#turbopack
One-click install
npx skills add https://github.com/vovanostm-public/multica --skill nextjs-dev-profiling-vovanostm-public
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-dev-profiling
Source: https://github.com/vovanostm-public/multica/tree/main/docs/wiki/architecture/archived-codex-skills/20260525-190000/nextjs-dev-profiling
Command: npx skills add https://github.com/vovanostm-public/multica --skill nextjs-dev-profiling-vovanostm-public

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Local Next.js dev servers can exhibit high CPU usage, excessive memory consumption, missing styles, and repeated route renders, and developers often waste time making speculative code edits instead of profiling first. This Skill enforces a profile-first workflow to identify the real root cause before touching UI code. ## Core Features & Use Cases - Standardized Profiling: Captures a profile bundle via make dev-profile-next and inspects live diagnostics with lsof, sample, footprint, and vmmap. - Failure Mode Diagnosis: Provides decision rules for common issues such as health probes hitting / instead of /health.txt, wrong turbopack.root, missing allowedDevOrigins, broken Tailwind @source scanning, and .next manifest corruption. - Use Case: When Activity Monitor shows a hot next-server process, use this Skill to compare footprint and vmmap output against V8 counters to determine whether the memory is native Turbopack/SWC footprint rather than a React leak. ## Quick Start Ask the agent to profile the Next.js dev server and diagnose why it is using high CPU and memory before making any code changes.

Frequently Asked Questions about nextjs-dev-profiling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I diagnose high CPU usage in a Next.js dev server?▼

Start by capturing a profile with make dev-profile-next, then inspect live diagnostics using lsof on the frontend port, the frontend log, and the .next/dev/trace file. A common cause is a health probe hitting / every few seconds instead of /health.txt, triggering repeated route renders.

Why does my Next.js dev server use so much memory?▼

Compare footprint and vmmap output against V8 heap counters before assuming a React leak. On Apple Silicon, a large IOAccelerator footprint usually indicates native Turbopack/SWC memory usage rather than a JavaScript memory leak.

Why are Tailwind styles missing in my Next.js app?▼

Missing styles often come from a broken Tailwind @source path in globals.css that stops scanning shared packages. Verify the @source directive still points to the correct packages directory before editing any components.

Can I delete the .next directory while the dev server is running?▼

No, deleting .next or .next/dev while next-server is running causes manifest corruption. Stop the frontend process first, clean the .next directory, then restart through the supervised dev path.

What should a Next.js dev server health check endpoint be?▼

Health checks must target /health.txt, never the root path /. Probing / triggers full route renders every check interval, which shows up as a hot next-server process and repeated renders in the logs.

Related Skills

Explore More Software Engineering Skills→
jongensutrechtjongensutrecht
1

fixed-port-discipline

Enforce canonical port allocation for local development services.

Community
Intermediate
dennisonbertramdennisonbertram
1

health-check

Query HTTP endpoints and validate JSON responses to verify service health.

Community
Intermediate
Kkkirito-123Kkkirito-123
115

host_resource_diagnosis

Collect real-time CPU, memory, and disk metrics via psutil to diagnose host resource pressure.

Community
Advanced
pecorapromotionsllc-cellpecorapromotionsllc-cell

browser-testing-with-devtools

Test UI components in real browsers using Chrome DevTools MCP.

Community
Advanced