Guide · Agent skill
How to use the Next.js and Turbopack Guide agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
This guide explains the Next.js and Turbopack Guide agent skill (skill name nextjs-turbopack), a set of background notes that helps an AI agent answer questions about Next.js dev speed, Turbopack, and bundle size. It is useful for developers building or maintaining Next.js apps who see slow dev startup, slow hot reloads, or heavy production bundles. By the end you will know what the skill does, how to install it, how to ask for help so the agent uses it, and what to check before relying on its answers.
Next.js and Turbopack Guideaffaan-m/ECC · MIT Download the skill Quick start
- 1Download the ZIP. Download the nextjs-turbopack ZIP file from this page.
- 2Unzip the skill. Unzip the file so the skill folder contains SKILL.md.
- 3Choose where to install it. Place the folder in ~/.claude/skills/ for all projects, or in .claude/skills/ inside one project.
- 4Or upload it in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 5Describe your Next.js problem. Ask in plain language, naming Next.js or Turbopack and the symptom, such as slow dev startup or a large bundle.
- 6Check the official docs. Confirm exact flags and production build behavior for your Next.js version in the official Next.js documentation.
What is an agent skill and what does this one do?
An agent skill is a folder with a SKILL.md file that gives an AI agent extra background knowledge and instructions for a specific task. When a request matches the skill, the agent reads that guidance and uses it in its answer.
This skill covers Next.js and Turbopack. Next.js uses Turbopack by default for local development. Turbopack is an incremental bundler written in Rust that aims to speed up dev startup and hot updates. The skill helps the agent explain when to stay on Turbopack, when to switch to webpack for a Turbopack bug or a webpack-only plugin in dev, and how to start looking at production bundle size.
- Explains Turbopack as the default dev bundler and how its file-system caching makes restarts faster
- Explains when to use Turbopack and when to fall back to webpack
- Points to the Bundle Analyzer (experimental, in recent releases) for finding heavy dependencies
- Suggests keeping a recent Next.js 16.x release for stable Turbopack and caching behavior
How do you install the nextjs-turbopack skill?
Download the ZIP file from this page and unzip it. You can install the skill in one of two places. For all your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/ (available across projects)
- Project install: .claude/skills/ inside your project folder (available only in that project)
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How do you trigger the skill with natural requests?
You do not need a special command. Describe the problem in plain language and mention Next.js or Turbopack. The skill is meant for requests about developing or debugging Next.js apps, diagnosing slow dev startup or HMR (hot module replacement), and optimizing production bundles.
Be specific about the symptom. A request that names the slow step, such as dev startup or reloading after an edit, is easier for the agent to match to the guidance.
- "My next dev server takes a long time to start. What should I check?"
- "Hot reload is slow after I edit a component in my Next.js app. Is Turbopack the cause?"
- "Should I switch to webpack for this project because one of my plugins only works there?"
- "My production JavaScript bundle is huge. How do I find the heavy dependencies?"
Which commands does the skill mention?
The skill lists three standard Next.js commands. Running next dev starts local development with Turbopack. next build creates a production build, and its behavior may use Turbopack or webpack depending on your Next.js version. next start runs the app after building it.
To use webpack in dev, the skill mentions the --webpack flag. Depending on your Next.js version, it may instead be --no-turbopack. The skill says to check the Next.js docs for your release to confirm which one applies.
next dev
next build
next startWhat do the skill's best practices recommend?
The skill gives a short checklist for common problems. If dev feels slow, first confirm you are on the default Turbopack dev server and that the cache is not being cleared without a reason. Restarts are faster because Turbopack reuses earlier work stored in a file-system cache, which is typically under the .next folder.
For production bundle size, the skill recommends the official Next.js bundle analysis tooling for your version. It also suggests the App Router and server components where possible, and reducing large dependencies with code-splitting.
- Confirm you are using the default Turbopack dev server
- Avoid clearing the .next cache unnecessarily
- Use the official Next.js bundle analysis tooling for production size
- Prefer the App Router and server components where possible
What are the safety notes and requirements?
This skill is text guidance only. It does not run scripts and does not use the network. It lists no extra requirements. It is licensed under MIT.
The skill itself warns that its answers may be out of date for newer releases. For exact flags or production build behavior for your version, check the official Next.js docs before making changes. The skill is not for projects that do not use Next.js.
- Runs scripts: no
- Uses network: no
- Requirements: none listed
- Licence: MIT
- Included files: SKILL.md and agents/openai.yaml
What people use it for
- Diagnosing why next dev takes a long time to start on a large app
- Deciding whether to keep Turbopack or switch to webpack because of a plugin or a known bug
- Finding heavy dependencies that inflate a production JavaScript bundle
- Reviewing caching and the .next folder when restarts seem slow
Frequently asked questions
What is the nextjs-turbopack skill?
It is an agent skill containing background guidance on Next.js and Turbopack, the incremental bundler Next.js uses for local development. It helps an AI agent explain dev speed, hot reloading, when to use webpack instead, and how to start on production bundle size.
How do I install the Next.js Turbopack agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can also upload it under Settings → Capabilities → Skills.
Does this skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, so it only supplies guidance to the agent.
Is the nextjs-turbopack skill free to use?
The skill is licensed under MIT, as stated in its SKILL.md file. Check the license text included with the project for full terms.
Why does the skill say to check the Next.js docs?
The skill's guidance may be out of date for newer releases, and production build behavior and exact flags depend on your Next.js version. The official Next.js docs are the reliable source for those details.
Is Turbopack better than webpack for my project?
For day-to-day development, the skill recommends Turbopack, which is the default in dev and aims to start faster and update quickly. Webpack is suggested only when you hit a Turbopack bug or rely on a webpack-only plugin in dev.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill is a good fit for developers working on Next.js apps who face slow dev startup, slow hot reloads, or large production bundles, and for teams deciding between Turbopack and webpack. It is not useful for projects that do not use Next.js. Because its guidance may lag behind newer Next.js releases, verify exact flags and production behavior in the official docs.
Download the skill