Nextjs Turbopack

When to Trigger

Activate this skill when user input contains:

• Keywords: Next.js, Turbopack, webpack, bundler, HMR, hot reload, dev server, bundle analyzer, incremental bundling, file-system caching
• Contexts: configuring Next.js dev environment, optimizing dev startup speed, debugging slow HMR, analyzing production bundles, migrating from webpack
• Frameworks: Next.js 16+, React, Turbopack, webpack

Review Workflow

When reviewing or configuring Next.js/Turbopack setups:

1. Verify Next.js version and Turbopack default status
2. Check dev server configuration (Turbopack vs webpack)
3. Validate file-system caching behavior
4. Review bundle size and code-splitting strategy
5. Ensure production build configuration is correct

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).

Commands

next dev
next build
next start

Usage

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.

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.

Checklists

Dev Environment Checklist

• Next.js 16+ installed
• Turbopack running as default dev bundler
• .next cache directory not being unnecessarily cleared
• No webpack-only plugins blocking Turbopack adoption

Performance Checklist

• Dev startup time is acceptable (Turbopack enabled)
• HMR updates are fast (< 500ms for most changes)
• File-system cache is persisting between restarts
• Bundle Analyzer reviewed for heavy dependencies

Production Checklist

• next build completes successfully
• Production bundle size is within acceptable limits
• Code-splitting is working correctly
• App Router and server components used where appropriate

OpenCode Usage Examples

User: "My Next.js dev server is slow"
Assistant: Activates nextjs-turbopack skill. Checks if Turbopack is enabled (default in 16+), verifies cache isn't being cleared, and suggests Bundle Analyzer for heavy deps.

User: "How do I analyze my Next.js bundle size?"
Assistant: Uses nextjs-turbopack skill to guide enabling the experimental Bundle Analyzer and interpreting results.

User: "Should I use Turbopack or webpack for my Next.js project?"
Assistant: Applies nextjs-turbopack skill. Recommends Turbopack (default in 16+) for dev unless hitting specific bugs or webpack-only plugin requirements.

User: "Configure Next.js for optimal dev experience"
Assistant: Leverages nextjs-turbopack skill to set up Turbopack defaults, caching, and bundle analysis tooling.

Following Agent Skills specification for progressive disclosure and best practices.