skills.rest
Adithiya-S
Adithiya-SCOMMUNITY
Explore all skills by this author →
GitHub

turbopack

Configure and troubleshoot the Turbopack bundler in Next.js projects.

Updated Aug 21, 2025
Search Tags:#next.js#rust#bundler#build optimization#turbopack#hmr#webpack migration
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill turbopack-adithiya-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: turbopack
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/turbopack
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill turbopack-adithiya-s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers migrating to or working with Turbopack in Next.js often struggle with config migration from webpack, missing loader equivalents, CSS ordering differences, and build failures that are hard to diagnose without bundler-specific knowledge. ## Core Features & Use Cases - Configuration Guidance: Set up top-level turbopack config in Next.js 16, including resolveAlias, resolveExtensions, and custom rules. - Webpack Migration: Map common webpack loaders (sass-loader, svgr, raw-loader) to Turbopack equivalents or fall back to webpack when needed. - Build Diagnostics: Troubleshoot production build failures, oversized bundles, HMR issues, and profile performance with tracing. - Use Case: You just upgraded to Next.js 16 and your experimental.turbopack config stopped working. Use this Skill to migrate to the new top-level config syntax and fix the resulting build errors. ## Quick Start Ask the AI to migrate your next.config webpack customizations to the Turbopack top-level config format in Next.js 16.

Frequently Asked Questions about turbopack

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

FAQPage Schema
How do I configure Turbopack in Next.js 16?▼

In Next.js 16, Turbopack config moved from experimental.turbopack to a top-level turbopack key in next.config. Use it to set resolveAlias, resolveExtensions, and custom rules for loaders like @svgr/webpack.

How do I migrate webpack loaders to Turbopack?▼

Many webpack loaders have built-in Turbopack equivalents: CSS, Sass, and PostCSS work natively without loaders. For others like svgr, use turbopack.rules to map file patterns to loaders, or fall back to webpack with bundler: 'webpack'.

Turbopack vs webpack: which should I use in Next.js?▼

Turbopack is the default in Next.js 16 and offers constant-time HMR, native RSC support, and faster cold starts. Choose webpack only if you depend on custom loaders or plugins with no Turbopack equivalent, such as ModuleFederationPlugin.

Why does my Turbopack build fail after migrating from webpack?▼

Common causes include leftover webpack() config functions being ignored, missing turbopack.resolveAlias for custom resolution, and server-only modules imported in client components. Remove webpack config and use the server-only package to enforce boundaries.

Does Turbopack support Sass and CSS Modules?▼

Yes, Turbopack handles CSS, CSS Modules, and Sass natively. Install the sass package and import .scss files directly; PostCSS config is read automatically, and Tailwind CSS v4 works with zero configuration.

How do I profile Turbopack build performance?▼

Run builds or dev server with NEXT_TURBOPACK_TRACING=1 to generate a trace.json file. Open it in chrome://tracing or Perfetto to inspect module-level timing, slow transforms, and cache misses.

Related Skills

Explore More Software Engineering Skills→
fragments-sdkfragments-sdk
1

fragments/ui-setup

Install the Fragments UI library and configure FragmentsProvider in React projects.

Official
Intermediate
WhaleylawWhaleylaw

build-optimization-specialist

Optimize JavaScript and TypeScript frontend builds with Vite, Rollup, Webpack, or esbuild.

Community
Intermediate
HankanmanHankanman
1

nextjs-client-server-boundary-module-errors

Extract Node.js-dependent constants into client-safe modules for Next.js 16 builds.

Community
Advanced
namhoanggnamhoangg

turbopack

Configure Next.js 16 projects to use Turbopack as the primary bundler.

Community
Advanced