Claude Agent Skill · by Affaan M

Nextjs Turbopack

Install Nextjs Turbopack skill for Claude Code from affaan-m/everything-claude-code.

Install
Terminal · npx
$npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Works with Paperclip

How Nextjs Turbopack fits into a Paperclip company.

Nextjs Turbopack drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md44 lines
Expand
---name: nextjs-turbopackdescription: Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.origin: ECC--- # 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 ```bashnext devnext buildnext 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.