Nextjs Turbopack
Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
affaan-m on GitHub
Curated by PromptsEdge from a public repo · MIT license. All credit goes to the author.
What is this skill?
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.
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 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.
Middleware File Naming
Next.js 16 introduced proxy.ts as the middleware filename, replacing the older middleware.ts convention:
- Next.js 16+: use
proxy.tsat the project root - Pre-Next.js 16: use
middleware.tsat the project root
The filename change is tied to the Next.js version, not to which bundler (Turbopack or webpack) is in use. Always check the official docs for the version you are reviewing.
Do not flag proxy.ts as a misnamed or missing middleware file in Next.js 16 projects. The file is correct and intentional. Suggesting a rename to middleware.ts will break middleware execution.
Reference: Next.js proxy docs
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.
Install this skill
- 1
Get the skill — it’s free
Use the Get this skill panel. Unlocked skills stay in My skills. - 2
Download or clone the files
Download the zip, or clone the repo and copy theskills/nextjs-turbopackfolder. - 3
Put it where your agent looks for skills
For Claude Code, use your personal skills folder (every project) or a project’s own folder:~/.claude/skills/nextjs-turbopack/SKILL.md # all projects .claude/skills/nextjs-turbopack/SKILL.md # this project only
- 4
Just ask
No command needed. The agent reads the skill’s description and loads it on its own when your request matches.
SKILL.md frontmatter
What your agent reads to decide when to load this skill.
--- name: nextjs-turbopack description: Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack. ---
Files
This skill lives in a public GitHub repo. Browse the files on GitHub ↗
Related skills
View all →- Vite PatternsFreeVite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
- Video EditingFreeAI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.
- Team Agent OrchestrationFreeRun team-based orchestration for agent squads using work items, ownership, agent Kanban, merge gates, and control pane handoffs. Use when coordinating an agent squad with work items, ownership, Kanban, and merge gates.
- Taste ApplicationFreeGenerate new video against a distilled style pack and cut it into a finished piece - plan takes from the reference's cut rhythm, generate on fal, grade with the pack's measured LUT, cut at the measured cadence, weave in existing footage, composite overlay plates, mint 3D props, and verify the result numerically. Use when the user wants to make a video in a captured style, supplement existing footage, or assemble generated clips into a real edit.