nextjs-dev-profiling

Name: nextjs-dev-profiling
Availability: InStock
Author: vovanostm-public

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

Ready to run

npx skills add https://github.com/vovanostm-public/multica --skill nextjs-dev-profiling-vovanostm-public

💬 Prompt for ChatGPT / Claude Chat▼

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.