Nextjs Turbopack
Diagnose slow Next.js 16+ dev startup and HMR and choose Turbopack vs webpack without guessing.
Overview
nextjs-turbopack is an agent skill for the Build phase that guides Next.js 16+ local development with Turbopack defaults, webpack fallbacks, and bundle inspection workflows.
Install
npx skills add https://github.com/affaan-m/everything-claude-code --skill nextjs-turbopackWhat is this skill?
- Documents Next.js 16+ default: `next dev` runs Turbopack unless you disable it
- Explains incremental Rust bundler behavior and file-system caching under `.next` for faster restarts (often cited as 5–1
- When to stay on Turbopack vs fall back to webpack (`--webpack` / version-specific `--no-turbopack`) for plugin or bug bl
- Covers production `next build` bundler behavior as version-dependent with pointer to official docs
- Next.js 16.1+ experimental Bundle Analyzer for spotting heavy dependencies
- File-system caching can make restarts much faster (e.g. 5–14x on large projects per skill doc)
- Next.js 16+ uses Turbopack by default for `next dev`
- Experimental Bundle Analyzer from Next.js 16.1+
Adoption & trust: 4.3k installs on skills.sh; 210k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Next.js app feels slow to start or hot-reload in dev and you are unsure whether Turbopack, caching, or a webpack-only plugin is the bottleneck.
Who is it for?
Indie builders on Next.js 16+ with large apps or painful dev startup who want agent-guided bundler and cache troubleshooting.
Skip if: Teams not using Next.js, or projects already locked to a non-Next framework where this bundler guidance does not apply.
When should I use this skill?
Developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.
What do I get? / Deliverables
You get a clear Turbopack-vs-webpack decision path, sane dev defaults, and pointers to bundle analysis so local iteration speeds up without blind config churn.
- Turbopack vs webpack dev recommendation for your constraint
- Cache and `.next` restart behavior explanation
- Bundle analyzer enablement notes for Next.js 16.1+
Recommended Skills
Journey fit
Canonical shelf is Build because the skill targets local development bundling, HMR, and bundle inspection for Next.js apps before ship-time optimization. Frontend subphase fits Next.js app dev workflows—default Turbopack dev server, webpack escape hatch, and experimental bundle analyzer for dependency weight.
How it compares
Use for Next.js-specific Turbopack dev semantics instead of generic Vite or webpack tuning skills.
Common Questions / FAQ
Who is nextjs-turbopack for?
Solo and indie developers building or maintaining Next.js 16+ applications who need faster dev loops and clear guidance when Turbopack is not compatible with a webpack-only plugin.
When should I use nextjs-turbopack?
Use it during Build when you are developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or deciding whether to disable Turbopack for webpack in dev.
Is nextjs-turbopack safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and your repo policy before letting an agent change Next.js scripts or config.
SKILL.md
READMESKILL.md - Nextjs Turbopack
# 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. ## 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 dev` runs 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 ```bash next dev next build next start ``` ### Usage 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.