Nextjs Turbopack
- 1.5k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of nextjs-turbopack by affaan-m - installs and ranking accrue to the original listing.
nextjs-turbopack is a Claude Code frontend skill that helps developers switch between Turbopack and Webpack in Next.js 16+ projects and diagnose slow HMR or cold starts when choosing the right local development bundler.
About
nextjs-turbopack is a Claude Code skill from affaan-m/ecc covering Next.js 16+ local development with Turbopack, the Rust-based incremental bundler enabled by default for faster cold starts and hot module replacement. The skill explains when to stay on Turbopack for day-to-day work versus falling back to Webpack with --webpack or --no-turbopack when a Turbopack bug or webpack-only plugin blocks dev. It addresses incremental bundling, filesystem caching, and diagnosing slow HMR or startup in large apps. Developers reach for nextjs-turbopack when Next.js dev feels sluggish, when evaluating bundler tradeoffs, or when a legacy webpack plugin forces a temporary dev fallback while production builds may still use the default pipeline.
- Turbopack is the default incremental bundler for Next.js 16+ local development
- Delivers 5–14x faster cold starts and HMR on large apps via file-system caching
- One-command toggle between Turbopack (`next dev`) and legacy Webpack (`--webpack`)
- Includes experimental Bundle Analyzer (Next.js 16.1+) to inspect production bundles
- No extra config needed; cache lives in .next folder
Nextjs Turbopack by the numbers
- 1,509 all-time installs (skills.sh)
- +100 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill nextjs-turbopackAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.5k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you fix slow Next.js HMR with Turbopack?
Instantly switch between Turbopack and Webpack in Next.js 16+ projects and diagnose slow HMR or cold starts.
Who is it for?
Next.js 16+ developers tuning local dev speed or debugging Turbopack compatibility with webpack-only plugins.
Skip if: Teams on Next.js versions below 16 who have not adopted Turbopack as the default dev bundler.
When should I use this skill?
User reports slow Next.js dev startup, HMR lag, or asks whether to use Turbopack or Webpack in a Next.js 16+ project.
What you get
Correct dev bundler configuration with documented Turbopack versus Webpack tradeoffs and HMR performance fixes.
- bundler configuration guidance
- HMR diagnostic steps
By the numbers
- Targets Next.js 16+ where Turbopack is the default dev bundler
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-turbopackdepending 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.
How It Works
- Turbopack: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).
- Default in dev: From Next.js 16,
next devruns with Turbopack unless disabled. - File-system caching: Restarts reuse previous work; cache is typically under
.next; no extra config needed for basic use. - Bundle Analyzer (Next.js 16.1+): Experimental Bundle Analyzer to inspect output and find heavy dependencies; enable via config or experimental flag (see Next.js docs for your version).
Examples
Commands
next dev
next build
next startUsage
Run next dev for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.
Best Practices
- Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.
- If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.
- For production bundle size issues, use the official Next.js bundle analysis tooling for your version.
interface:
display_name: "Next.js Turbopack"
short_description: "Next.js and Turbopack workflow guidance"
brand_color: "#000000"
default_prompt: "Use $nextjs-turbopack to work through Next.js and Turbopack decisions."
policy:
allow_implicit_invocation: true
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kHow it compares
Use nextjs-turbopack for Next.js 16+ dev bundler decisions rather than general React or Vite performance tuning.
FAQ
When should Next.js developers use Webpack instead of Turbopack?
nextjs-turbopack recommends Webpack only when Turbopack hits a bug or a webpack-only dev plugin is required. Disable Turbopack with --webpack or --no-turbopack depending on the Next.js release, then verify against project docs.
What Next.js version does nextjs-turbopack target?
nextjs-turbopack targets Next.js 16 and later, where Turbopack is the default local development bundler written in Rust for faster cold starts and HMR compared to legacy Webpack dev.