Configure and troubleshoot the Turbopack bundler in Next.js 16 projects.
npx skills add https://github.com/ridhijain709/AIPORSCHE --skill turbopack-ridhijain709
Please help me install this Agent Skill. Skill: turbopack Source: https://github.com/ridhijain709/AIPORSCHE/tree/main/.agents/skills/turbopack Command: npx skills add https://github.com/ridhijain709/AIPORSCHE --skill turbopack-ridhijain709
turbopack config in next.config, including resolveAlias, resolveExtensions, and custom rules for loaders like @svgr/webpack. - Webpack Migration: Map common webpack loaders (css-loader, sass-loader, file-loader, raw-loader) to Turbopack built-ins or equivalents, and know when to fall back to webpack. - Build Diagnostics: Troubleshoot production build failures, oversized bundles, environment boundary errors, and profile HMR or builds with NEXT_TURBOPACK_TRACING. - Use Case: Your Next.js build fails after upgrading to Next.js 16 because experimental.turbopack moved and a custom webpack loader is unsupported. This Skill walks you through the config migration and loader replacement. ## Quick Start Ask the assistant to help migrate your next.config webpack customizations to Turbopack top-level config in Next.js 16.High-intent search queries and answers about installing and using this skill.
In Next.js 16, Turbopack config lives at the top level of next.config as `turbopack`, moved from `experimental.turbopack`. Use it to set resolveAlias, resolveExtensions, and custom rules for loaders.
Most common loaders have built-in equivalents: CSS, Sass, PostCSS, and static assets work natively. For loaders like @svgr/webpack, use `turbopack.rules` in next.config. If no equivalent exists, fall back with `bundler: 'webpack'`.
Turbopack is written in Rust with constant-time HMR, native React Server Components support, and built-in CSS handling, while webpack has a larger loader and plugin ecosystem. Turbopack is the default bundler in Next.js 16; webpack remains supported.
Common causes include leftover `webpack()` functions in next.config, invalid loaders in turbopack.rules, Node.js built-ins like `fs` imported in client or edge bundles, and missing resolveAlias entries previously handled by webpack.
Yes. CSS Modules work out of the box with `.module.css` files, and Sass compiles natively after installing the `sass` package. PostCSS config files are read automatically, and Tailwind CSS v4 works with zero configuration.
Use webpack when you rely on custom loaders with no Turbopack equivalent, complex plugins like ModuleFederationPlugin, or unsupported features like custom externals functions. Set `bundler: 'webpack'` in next.config to opt out.
mafvietnamScaffold Next.js and Turborepo web apps with App Router and RSC.
joaoguirunasDeploy Next.js sites to Vercel, Netlify, and Cloudflare Pages with CI/CD pipelines.
lgerard314Enforce Next.js App Router server/client boundaries and caching directives.
partme-aiConfigure Webpack bundlers with loaders, plugins, and code splitting.