nextjs-turbopack

Guides Next.js 16+ developers on choosing between Turbopack and webpack.

1|1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/PedroHBO/opencode-config-skills --skill nextjs-turbopack-pedrohbo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-turbopack
Source: https://github.com/PedroHBO/opencode-config-skills/tree/main/skills/nextjs-turbopack
Command: npx skills add https://github.com/PedroHBO/opencode-config-skills --skill nextjs-turbopack-pedrohbo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Next.js development can be slowed by heavy bundling, slow hot-reload, and complex migrations when moving from webpack to Turbopack. This skill provides guidance to optimize dev speed, manage incremental bundling and caching, and navigate between Turbopack and webpack.

Core Features & Use Cases

  • Turbopack as default bundler for Next.js dev
  • File-system caching and faster restarts
  • Bundle analysis workflow and performance optimization guidance
  • Migration guidance between Turbopack and webpack
  • Real-world scenario: optimize a large Next.js monorepo to reduce rebuild times and improve HMR

Quick Start

Review your Next.js project and enable Turbopack as the default dev bundler, then run bundle analysis to identify slow dependencies.

Frequently Asked Questions about nextjs-turbopack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable Turbopack as the default Next.js dev bundler?

To enable Turbopack for Next.js development, configure your dev server settings to use it over webpack. This optimizes dev speed by leveraging incremental bundling and file-system caching for faster restarts in Next.js 16+ projects.

What is the best way to migrate a Next.js project from webpack to Turbopack?

The best way to migrate from webpack to Turbopack involves following specific migration notes to ensure compatibility. This skill provides guidance to navigate transition complexities, evaluating caching behavior to safely optimize your development environment.

Does Turbopack support bundle analysis for large Next.js monorepos?

Yes, Turbopack supports bundle analysis workflows for large Next.js monorepos. You can run bundle analysis to identify slow dependencies, evaluate cache persistence, and receive safe performance optimization recommendations to reduce rebuild times.

Why should I use Turbopack instead of webpack for Next.js development?

You should use Turbopack instead of webpack to solve slow hot-reload and heavy bundling issues in Next.js. Turbopack utilizes incremental bundling and file-system caching, significantly reducing rebuild times and improving HMR performance.

How do I detect if Turbopack is active in my Next.js dev server?

To detect Turbopack activation in your Next.js dev server, check specific requirements outlined for Next.js 16+ projects. This skill specifies the necessary steps to verify Turbopack is running and properly evaluating cache persistence.

What are the limitations of using Turbopack for Next.js bundling?

Limitations of Turbopack for Next.js bundling include potential migration complexities when moving from webpack. This skill guides developers on when to use Turbopack versus webpack, specifying safe performance optimization recommendations to navigate constraints.