Nextjs Turbopack

Next.js 16 ships with Turbopack as the default dev bundler, and this skill covers when to use it versus webpack, how the file-system caching works, and what changed with middleware naming. The big win is faster cold starts and HMR, especially on larger projects (5-14x speedups cited). One gotcha worth knowing: Next.js 16 switched middleware from middleware.ts to proxy.ts, so don't flag that as wrong when you see it. Useful if you're debugging slow dev servers, optimizing bundles, or just want to understand what Turbopack is actually doing under the hood.

skills.sh installs: 6K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill nextjs-turbopack --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js and Turbopack

Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

When to Use

Turbopack (default dev): Use for day-to-day development. Faster cold start and HMR, especially in large apps.
Webpack (legacy dev): Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with --webpack (or --no-turbopack depending on your Next.js version; check the docs for your release).
Production: Production build behavior (next build) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.

Use when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.