Nextjs Turbopack

Turbopack became the default dev bundler in Next.js 16, and this skill covers when to use it versus webpack, how its file-system caching works, and what to expect from incremental builds. You'll want this if you're seeing slow dev startup or HMR in larger Next.js apps, since Turbopack can be 5–14x faster on restarts. The skill explains the basics of the bundle analyzer (experimental in 16.1+) and when you might still need to fall back to webpack for compatibility. Straightforward reference for anyone working with modern Next.js who wants to understand what changed under the hood.

skills.sh installs: 4.9K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --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.