Configure and troubleshoot the Turbopack bundler in Next.js projects.
npx skills add https://github.com/AarnavBaddam/skills --skill turbopack-aarnavbaddam
Please help me install this Agent Skill. Skill: turbopack Source: https://github.com/AarnavBaddam/skills/tree/main/turbopack Command: npx skills add https://github.com/AarnavBaddam/skills --skill turbopack-aarnavbaddam
turbopack config in Next.js 16, including resolveAlias, resolveExtensions, and custom turbopack.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 & Performance Diagnostics: Profile HMR and builds with NEXT_TURBOPACK_TRACING, diagnose large bundles with the built-in analyzer, and fix environment boundary errors using the server-only package. - Use Case: Your Next.js build fails after switching to Turbopack because a custom webpack loader is unsupported. Use this Skill to identify the equivalent turbopack.rules configuration or determine when to opt back into webpack. ## Quick Start Ask the Turbopack skill how to migrate your webpack SVG loader configuration to Turbopack in your next.config file.High-intent search queries and answers about installing and using this skill.
Most common loaders like css-loader, sass-loader, and postcss-loader have built-in Turbopack equivalents and can be removed. For loaders without built-ins, configure turbopack.rules in next.config, for example mapping '*.svg' to @svgr/webpack.
Turbopack is the default in Next.js 16 with constant-time HMR, native RSC support, and built-in CSS handling. Choose webpack only when you depend on custom loaders or plugins with no Turbopack equivalent, such as ModuleFederationPlugin.
Yes. Install the sass package and import .scss files directly, and Turbopack compiles them natively. Tailwind CSS v4 works with zero config through your existing postcss.config.js, which Turbopack reads automatically.
Build failures often come from custom webpack resolution that Turbopack ignores. Move aliases to turbopack.resolveAlias in next.config, remove any webpack() function, and verify custom turbopack.rules reference installed loaders.
Run next dev or next build with NEXT_TURBOPACK_TRACING=1 to write a trace.json file. Open it in chrome://tracing or Perfetto to inspect module-level timing, slow transforms, and cache misses.
Fall back when a required webpack loader or plugin has no Turbopack equivalent, such as complex ModuleFederationPlugin setups. Set bundler: 'webpack' in next.config and file a parity request on the Next.js GitHub repository.
fragments-sdkInstall the Fragments UI library and configure FragmentsProvider in React projects.
nangyak4415-sudoIdentify and fix web performance issues in frontend applications.
InteligentsensingsolutionsDiagnose React and Next.js performance issues like waterfalls and re-renders.
partme-aiConfigure Webpack bundlers with loaders, plugins, and code splitting.