[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6K1VPVXTKWJH8MWVPNHVSPH":3,"skill-same:01M6K1VPVXTKWJH8MWVPNHVSPH":98},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":75,"commitSha":76,"skillDirectory":77,"forksCount":78,"repositoryHtmlUrl":79,"repositoryHomepageUrl":6,"ownerHtmlUrl":80,"ownerBlogUrl":81,"ownerDescription":82,"updatedAt":83,"install":84,"resources":97},"01M6K1VPVXTKWJH8MWVPNHVSPH","turbopack",null,"Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.","NagyVikt\u002Fcodex-plugins","NagyVikt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F137165288?v=4","01M6K0SJ3R2DAZRJKJJS10VN87","Viktor Nagy","01M6K0SJ9HXN0GBD91QDQ9WNVV",2,"MIT","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fturbopack\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"up","bundler","webpack","top","loading","turbo","org","next","expert","issue","architecture","fix","syntax","configure","nextjs","server","issues","debugging","config","2026-11-10 10:12:30",false,"---\nname: turbopack\ndescription: Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.\nmetadata:\n  priority: 4\n  docs:\n    - \"https:\u002F\u002Fturbo.build\u002Fpack\u002Fdocs\"\n    - \"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Farchitecture\u002Fturbopack\"\n  sitemap: \"https:\u002F\u002Fturbo.build\u002Fsitemap.xml\"\n  pathPatterns: \n    - 'next.config.*'\n  bashPatterns: \n    - '\\bnext\\s+dev\\s+--turbo\\b'\n    - '\\bnext\\s+dev\\s+--turbopack\\b'\nretrieval:\n  aliases:\n    - next bundler\n    - turbopack\n    - fast bundler\n    - hmr\n  intents:\n    - enable turbopack\n    - fix build issue\n    - speed up dev server\n    - configure bundler\n  entities:\n    - Turbopack\n    - HMR\n    - bundler\n    - next dev --turbopack\nchainTo:\n  -\n    pattern: 'webpack\\s*:\\s*\\(|webpack\\s*\\(config'\n    targetSkill: nextjs\n    message: 'Webpack config detected — loading Next.js guidance for migrating webpack customizations to Turbopack top-level config in Next.js 16.'\n  -\n    pattern: 'turbopack\\s*:\\s*\\{|experimental\\.turbopack'\n    targetSkill: nextjs\n    message: 'Turbopack configuration detected — loading Next.js guidance for top-level turbopack config syntax in Next.js 16 (moved from experimental.turbopack).'\n\n---\n\n# Turbopack\n\nYou are an expert in Turbopack — the Rust-powered JavaScript\u002FTypeScript bundler built by Vercel. It is the default bundler in Next.js 16.\n\n## Key Features\n\n- **Instant HMR**: Hot Module Replacement that doesn't degrade with app size\n- **File System Caching (Stable)**: Dev server artifacts cached on disk between restarts — up to 14x faster startup on large projects. Enabled by default in Next.js 16.1+, no config needed. Build caching planned next.\n- **Multi-environment builds**: Browser, Server, Edge, SSR, React Server Components\n- **Native RSC support**: Built for React Server Components from the ground up\n- **TypeScript, JSX, CSS, CSS Modules, WebAssembly**: Out of the box\n- **Rust-powered**: Incremental computation engine for maximum performance\n\n## Configuration (Next.js 16)\n\nIn Next.js 16, Turbopack config is top-level (moved from `experimental.turbopack`):\n\n```js\n\u002F\u002F next.config.ts\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  turbopack: {\n    \u002F\u002F Resolve aliases (like webpack resolve.alias)\n    resolveAlias: {\n      'old-package': 'new-package',\n    },\n    \u002F\u002F Custom file extensions to resolve\n    resolveExtensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],\n  },\n}\n\nexport default nextConfig\n```\n\n## CSS and CSS Modules Handling\n\nTurbopack handles CSS natively without additional configuration.\n\n### Global CSS\n\nImport global CSS in your root layout:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport '.\u002Fglobals.css'\n```\n\n### CSS Modules\n\nCSS Modules work out of the box with `.module.css` files:\n\n```tsx\n\u002F\u002F components\u002FButton.tsx\nimport styles from '.\u002FButton.module.css'\n\nexport function Button({ children }) {\n  return \u003Cbutton className={styles.primary}>{children}\u003C\u002Fbutton>\n}\n```\n\n### PostCSS\n\nTurbopack reads your `postcss.config.js` automatically. Tailwind CSS v4 works with zero config:\n\n```js\n\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: {\n    '@tailwindcss\u002Fpostcss': {},\n    autoprefixer: {},\n  },\n}\n```\n\n### Sass \u002F SCSS\n\nInstall `sass` and import `.scss` files directly — Turbopack compiles them natively:\n\n```bash\nnpm install sass\n```\n\n```tsx\nimport styles from '.\u002FComponent.module.scss'\n```\n\n### Common CSS pitfalls\n\n- **CSS ordering differs from webpack**: Turbopack may load CSS chunks in a different order. Avoid relying on source-order specificity across files — use more specific selectors or CSS Modules.\n- **`@import` in global CSS**: Use standard CSS `@import` — Turbopack resolves them, but circular imports cause build failures.\n- **CSS-in-JS libraries**: `styled-components` and `emotion` work but require their SWC plugins configured under `compiler` in next.config.\n\n## Tree Shaking\n\nTurbopack performs tree shaking at the module level in production builds. Key behaviors:\n\n- **ES module exports**: Only used exports are included — write `export` on each function\u002Fconstant rather than barrel `export *`\n- **Side-effect-free packages**: Mark packages as side-effect-free in `package.json` to enable aggressive tree shaking:\n\n```json\n{\n  \"name\": \"my-ui-lib\",\n  \"sideEffects\": false\n}\n```\n\n- **Barrel file optimization**: Turbopack can skip unused re-exports from barrel files (`index.ts`) when the package declares `\"sideEffects\": false`\n- **Dynamic imports**: `import()` expressions create async chunk boundaries — Turbopack splits these into separate chunks automatically\n\n### Diagnosing large bundles\n\n**Built-in analyzer (Next.js 16.1+, experimental)**: Works natively with Turbopack. Offers route-specific filtering, import tracing, and RSC boundary analysis:\n\n```ts\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  experimental: {\n    bundleAnalyzer: true,\n  },\n}\n```\n\n**Legacy `@next\u002Fbundle-analyzer`**: Still works as a fallback:\n\n```bash\nANALYZE=true next build\n```\n\n```ts\n\u002F\u002F next.config.ts\nimport withBundleAnalyzer from '@next\u002Fbundle-analyzer'\n\nconst nextConfig = withBundleAnalyzer({\n  enabled: process.env.ANALYZE === 'true',\n})({\n  \u002F\u002F your config\n})\n```\n\n## Custom Loader Migration from Webpack\n\nTurbopack does not support webpack loaders directly. Here is how to migrate common patterns:\n\n| Webpack Loader | Turbopack Equivalent |\n|----------------|---------------------|\n| `css-loader` + `style-loader` | Built-in CSS support — remove loaders |\n| `sass-loader` | Built-in — install `sass` package |\n| `postcss-loader` | Built-in — reads `postcss.config.js` |\n| `file-loader` \u002F `url-loader` | Built-in static asset handling |\n| `svgr` \u002F `@svgr\u002Fwebpack` | Use `@svgr\u002Fwebpack` via `turbopack.rules` |\n| `raw-loader` | Use `import x from '.\u002Ffile?raw'` |\n| `graphql-tag\u002Floader` | Use a build-time codegen step instead |\n| `worker-loader` | Use native `new Worker(new URL(...))` syntax |\n\n### Configuring custom rules (loader replacement)\n\nFor loaders that have no built-in equivalent, use `turbopack.rules`:\n\n```js\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        loaders: ['@svgr\u002Fwebpack'],\n        as: '*.js',\n      },\n    },\n  },\n}\n```\n\n### When migration isn't possible\n\nIf a webpack loader has no Turbopack equivalent and no workaround, fall back to webpack:\n\n```js\nconst nextConfig: NextConfig = {\n  bundler: 'webpack',\n}\n```\n\nFile an issue at [github.com\u002Fvercel\u002Fnext.js](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js) — the Turbopack team tracks loader parity requests.\n\n## Production Build Diagnostics\n\n### Build failing with Turbopack\n\n1. **Check for unsupported config**: Remove any `webpack()` function from next.config — it's ignored by Turbopack and may mask the real config\n2. **Verify `turbopack.rules`**: Ensure custom rules reference valid loaders that are installed\n3. **Check for Node.js built-in usage in edge\u002Fclient**: Turbopack enforces environment boundaries — `fs`, `path`, etc. cannot be imported in client or edge bundles\n4. **Module not found errors**: Ensure `turbopack.resolveAlias` covers any custom resolution that was previously in webpack config\n\n### Build output too large\n\n- Audit `\"use client\"` directives — each client component boundary creates a new chunk\n- Check for accidentally bundled server-only packages in client components\n- Use `server-only` package to enforce server\u002Fclient boundaries at import time:\n\n```bash\nnpm install server-only\n```\n\n```ts\n\u002F\u002F lib\u002Fdb.ts\nimport 'server-only' \u002F\u002F Build fails if imported in a client component\n```\n\n### Comparing webpack vs Turbopack output\n\nRun both bundlers and compare:\n\n```bash\n# Turbopack build (default in Next.js 16)\nnext build\n\n# Webpack build\nBUNDLER=webpack next build\n```\n\nCompare `.next\u002F` output sizes and page-level chunks.\n\n## Performance Profiling\n\n### HMR profiling\n\nEnable verbose HMR timing in development:\n\n```bash\nNEXT_TURBOPACK_TRACING=1 next dev\n```\n\nThis writes a `trace.json` to the project root — open it in `chrome:\u002F\u002Ftracing` or [Perfetto](https:\u002F\u002Fui.perfetto.dev\u002F) to see module-level timing.\n\n### Build profiling\n\nProfile production builds:\n\n```bash\nNEXT_TURBOPACK_TRACING=1 next build\n```\n\nLook for:\n- **Long-running transforms**: Indicates a slow SWC plugin or heavy PostCSS config\n- **Large module graphs**: Reduce barrel file re-exports\n- **Cache misses**: If incremental builds aren't hitting cache, check for files that change every build (e.g., generated timestamps)\n\n### Memory usage\n\nTurbopack's Rust core manages its own memory. If builds OOM:\n- Increase Node.js heap: `NODE_OPTIONS='--max-old-space-size=8192' next build`\n- Reduce concurrent tasks if running inside Turborepo: `turbo build --concurrency=2`\n\n## Turbopack vs Webpack\n\n| Feature | Turbopack | Webpack |\n|---------|-----------|---------|\n| Language | Rust | JavaScript |\n| HMR speed | Constant (O(1)) | Degrades with app size |\n| RSC support | Native | Plugin-based |\n| Cold start | Fast | Slower |\n| Ecosystem | Growing | Massive (loaders, plugins) |\n| Status in Next.js 16 | Default | Still supported |\n| Tree shaking | Module-level | Module-level |\n| CSS handling | Built-in | Requires loaders |\n| Production builds | Supported | Supported |\n\n## When You Might Need Webpack\n\n- Custom webpack loaders with no Turbopack equivalent\n- Complex webpack plugin configurations (e.g., `ModuleFederationPlugin`)\n- Specific webpack features not yet in Turbopack (e.g., custom `externals` functions)\n\nTo use webpack instead:\n```js\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  bundler: 'webpack', \u002F\u002F Opt out of Turbopack\n}\n```\n\n## Development vs Production\n\n- **Development**: Turbopack provides instant HMR and fast refresh\n- **Production**: Turbopack handles the production build (replaces webpack in Next.js 16)\n\n## Common Issues\n\n1. **Missing loader equivalent**: Some webpack loaders don't have Turbopack equivalents yet. Check Turbopack docs for supported transformations.\n2. **Config migration**: Move `experimental.turbopack` to top-level `turbopack` in next.config.\n3. **Custom aliases**: Use `turbopack.resolveAlias` instead of `webpack.resolve.alias`.\n4. **CSS ordering changes**: Test visual regressions when migrating — CSS chunk order may differ.\n5. **Environment boundary errors**: Server-only modules imported in client components fail at build time — use `server-only` package.\n\n## Official Documentation\n\n- [Turbopack](https:\u002F\u002Fturborepo.dev\u002Fpack)\n- [Turbopack Documentation](https:\u002F\u002Fturborepo.dev\u002Fpack\u002Fdocs)\n- [Next.js Turbopack Config](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Fconfig\u002Fnext-config-js\u002Fturbopack)\n- [GitHub: Turbopack](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fturborepo)\n","# Turbopack\n\nYou are an expert in Turbopack — the Rust-powered JavaScript\u002FTypeScript bundler built by Vercel. It is the default bundler in Next.js 16.\n\n## Key Features\n\n- **Instant HMR**: Hot Module Replacement that doesn't degrade with app size\n- **File System Caching (Stable)**: Dev server artifacts cached on disk between restarts — up to 14x faster startup on large projects. Enabled by default in Next.js 16.1+, no config needed. Build caching planned next.\n- **Multi-environment builds**: Browser, Server, Edge, SSR, React Server Components\n- **Native RSC support**: Built for React Server Components from the ground up\n- **TypeScript, JSX, CSS, CSS Modules, WebAssembly**: Out of the box\n- **Rust-powered**: Incremental computation engine for maximum performance\n\n## Configuration (Next.js 16)\n\nIn Next.js 16, Turbopack config is top-level (moved from `experimental.turbopack`):\n\n```js\n\u002F\u002F next.config.ts\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  turbopack: {\n    \u002F\u002F Resolve aliases (like webpack resolve.alias)\n    resolveAlias: {\n      'old-package': 'new-package',\n    },\n    \u002F\u002F Custom file extensions to resolve\n    resolveExtensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],\n  },\n}\n\nexport default nextConfig\n```\n\n## CSS and CSS Modules Handling\n\nTurbopack handles CSS natively without additional configuration.\n\n### Global CSS\n\nImport global CSS in your root layout:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport '.\u002Fglobals.css'\n```\n\n### CSS Modules\n\nCSS Modules work out of the box with `.module.css` files:\n\n```tsx\n\u002F\u002F components\u002FButton.tsx\nimport styles from '.\u002FButton.module.css'\n\nexport function Button({ children }) {\n  return \u003Cbutton className={styles.primary}>{children}\u003C\u002Fbutton>\n}\n```\n\n### PostCSS\n\nTurbopack reads your `postcss.config.js` automatically. Tailwind CSS v4 works with zero config:\n\n```js\n\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: {\n    '@tailwindcss\u002Fpostcss': {},\n    autoprefixer: {},\n  },\n}\n```\n\n### Sass \u002F SCSS\n\nInstall `sass` and import `.scss` files directly — Turbopack compiles them natively:\n\n```bash\nnpm install sass\n```\n\n```tsx\nimport styles from '.\u002FComponent.module.scss'\n```\n\n### Common CSS pitfalls\n\n- **CSS ordering differs from webpack**: Turbopack may load CSS chunks in a different order. Avoid relying on source-order specificity across files — use more specific selectors or CSS Modules.\n- **`@import` in global CSS**: Use standard CSS `@import` — Turbopack resolves them, but circular imports cause build failures.\n- **CSS-in-JS libraries**: `styled-components` and `emotion` work but require their SWC plugins configured under `compiler` in next.config.\n\n## Tree Shaking\n\nTurbopack performs tree shaking at the module level in production builds. Key behaviors:\n\n- **ES module exports**: Only used exports are included — write `export` on each function\u002Fconstant rather than barrel `export *`\n- **Side-effect-free packages**: Mark packages as side-effect-free in `package.json` to enable aggressive tree shaking:\n\n```json\n{\n  \"name\": \"my-ui-lib\",\n  \"sideEffects\": false\n}\n```\n\n- **Barrel file optimization**: Turbopack can skip unused re-exports from barrel files (`index.ts`) when the package declares `\"sideEffects\": false`\n- **Dynamic imports**: `import()` expressions create async chunk boundaries — Turbopack splits these into separate chunks automatically\n\n### Diagnosing large bundles\n\n**Built-in analyzer (Next.js 16.1+, experimental)**: Works natively with Turbopack. Offers route-specific filtering, import tracing, and RSC boundary analysis:\n\n```ts\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  experimental: {\n    bundleAnalyzer: true,\n  },\n}\n```\n\n**Legacy `@next\u002Fbundle-analyzer`**: Still works as a fallback:\n\n```bash\nANALYZE=true next build\n```\n\n```ts\n\u002F\u002F next.config.ts\nimport withBundleAnalyzer from '@next\u002Fbundle-analyzer'\n\nconst nextConfig = withBundleAnalyzer({\n  enabled: process.env.ANALYZE === 'true',\n})({\n  \u002F\u002F your config\n})\n```\n\n## Custom Loader Migration from Webpack\n\nTurbopack does not support webpack loaders directly. Here is how to migrate common patterns:\n\n| Webpack Loader | Turbopack Equivalent |\n|----------------|---------------------|\n| `css-loader` + `style-loader` | Built-in CSS support — remove loaders |\n| `sass-loader` | Built-in — install `sass` package |\n| `postcss-loader` | Built-in — reads `postcss.config.js` |\n| `file-loader` \u002F `url-loader` | Built-in static asset handling |\n| `svgr` \u002F `@svgr\u002Fwebpack` | Use `@svgr\u002Fwebpack` via `turbopack.rules` |\n| `raw-loader` | Use `import x from '.\u002Ffile?raw'` |\n| `graphql-tag\u002Floader` | Use a build-time codegen step instead |\n| `worker-loader` | Use native `new Worker(new URL(...))` syntax |\n\n### Configuring custom rules (loader replacement)\n\nFor loaders that have no built-in equivalent, use `turbopack.rules`:\n\n```js\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  turbopack: {\n    rules: {\n      '*.svg': {\n        loaders: ['@svgr\u002Fwebpack'],\n        as: '*.js',\n      },\n    },\n  },\n}\n```\n\n### When migration isn't possible\n\nIf a webpack loader has no Turbopack equivalent and no workaround, fall back to webpack:\n\n```js\nconst nextConfig: NextConfig = {\n  bundler: 'webpack',\n}\n```\n\nFile an issue at [github.com\u002Fvercel\u002Fnext.js](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js) — the Turbopack team tracks loader parity requests.\n\n## Production Build Diagnostics\n\n### Build failing with Turbopack\n\n1. **Check for unsupported config**: Remove any `webpack()` function from next.config — it's ignored by Turbopack and may mask the real config\n2. **Verify `turbopack.rules`**: Ensure custom rules reference valid loaders that are installed\n3. **Check for Node.js built-in usage in edge\u002Fclient**: Turbopack enforces environment boundaries — `fs`, `path`, etc. cannot be imported in client or edge bundles\n4. **Module not found errors**: Ensure `turbopack.resolveAlias` covers any custom resolution that was previously in webpack config\n\n### Build output too large\n\n- Audit `\"use client\"` directives — each client component boundary creates a new chunk\n- Check for accidentally bundled server-only packages in client components\n- Use `server-only` package to enforce server\u002Fclient boundaries at import time:\n\n```bash\nnpm install server-only\n```\n\n```ts\n\u002F\u002F lib\u002Fdb.ts\nimport 'server-only' \u002F\u002F Build fails if imported in a client component\n```\n\n### Comparing webpack vs Turbopack output\n\nRun both bundlers and compare:\n\n```bash\n# Turbopack build (default in Next.js 16)\nnext build\n\n# Webpack build\nBUNDLER=webpack next build\n```\n\nCompare `.next\u002F` output sizes and page-level chunks.\n\n## Performance Profiling\n\n### HMR profiling\n\nEnable verbose HMR timing in development:\n\n```bash\nNEXT_TURBOPACK_TRACING=1 next dev\n```\n\nThis writes a `trace.json` to the project root — open it in `chrome:\u002F\u002Ftracing` or [Perfetto](https:\u002F\u002Fui.perfetto.dev\u002F) to see module-level timing.\n\n### Build profiling\n\nProfile production builds:\n\n```bash\nNEXT_TURBOPACK_TRACING=1 next build\n```\n\nLook for:\n- **Long-running transforms**: Indicates a slow SWC plugin or heavy PostCSS config\n- **Large module graphs**: Reduce barrel file re-exports\n- **Cache misses**: If incremental builds aren't hitting cache, check for files that change every build (e.g., generated timestamps)\n\n### Memory usage\n\nTurbopack's Rust core manages its own memory. If builds OOM:\n- Increase Node.js heap: `NODE_OPTIONS='--max-old-space-size=8192' next build`\n- Reduce concurrent tasks if running inside Turborepo: `turbo build --concurrency=2`\n\n## Turbopack vs Webpack\n\n| Feature | Turbopack | Webpack |\n|---------|-----------|---------|\n| Language | Rust | JavaScript |\n| HMR speed | Constant (O(1)) | Degrades with app size |\n| RSC support | Native | Plugin-based |\n| Cold start | Fast | Slower |\n| Ecosystem | Growing | Massive (loaders, plugins) |\n| Status in Next.js 16 | Default | Still supported |\n| Tree shaking | Module-level | Module-level |\n| CSS handling | Built-in | Requires loaders |\n| Production builds | Supported | Supported |\n\n## When You Might Need Webpack\n\n- Custom webpack loaders with no Turbopack equivalent\n- Complex webpack plugin configurations (e.g., `ModuleFederationPlugin`)\n- Specific webpack features not yet in Turbopack (e.g., custom `externals` functions)\n\nTo use webpack instead:\n```js\n\u002F\u002F next.config.ts\nconst nextConfig: NextConfig = {\n  bundler: 'webpack', \u002F\u002F Opt out of Turbopack\n}\n```\n\n## Development vs Production\n\n- **Development**: Turbopack provides instant HMR and fast refresh\n- **Production**: Turbopack handles the production build (replaces webpack in Next.js 16)\n\n## Common Issues\n\n1. **Missing loader equivalent**: Some webpack loaders don't have Turbopack equivalents yet. Check Turbopack docs for supported transformations.\n2. **Config migration**: Move `experimental.turbopack` to top-level `turbopack` in next.config.\n3. **Custom aliases**: Use `turbopack.resolveAlias` instead of `webpack.resolve.alias`.\n4. **CSS ordering changes**: Test visual regressions when migrating — CSS chunk order may differ.\n5. **Environment boundary errors**: Server-only modules imported in client components fail at build time — use `server-only` package.\n\n## Official Documentation\n\n- [Turbopack](https:\u002F\u002Fturborepo.dev\u002Fpack)\n- [Turbopack Documentation](https:\u002F\u002Fturborepo.dev\u002Fpack\u002Fdocs)\n- [Next.js Turbopack Config](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Fconfig\u002Fnext-config-js\u002Fturbopack)\n- [GitHub: Turbopack](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fturborepo)\n",{"name":5,"chainTo":43,"metadata":50,"retrieval":61,"description":7},[44,47],{"message":45,"pattern":46,"targetSkill":33},"Webpack config detected — loading Next.js guidance for migrating webpack customizations to Turbopack top-level config in Next.js 16.","webpack\\s*:\\s*\\(|webpack\\s*\\(config",{"message":48,"pattern":49,"targetSkill":33},"Turbopack configuration detected — loading Next.js guidance for top-level turbopack config syntax in Next.js 16 (moved from experimental.turbopack).","turbopack\\s*:\\s*\\{|experimental\\.turbopack",{"docs":51,"sitemap":54,"priority":55,"bashPatterns":56,"pathPatterns":59},[52,53],"https:\u002F\u002Fturbo.build\u002Fpack\u002Fdocs","https:\u002F\u002Fnextjs.org\u002Fdocs\u002Farchitecture\u002Fturbopack","https:\u002F\u002Fturbo.build\u002Fsitemap.xml",4,[57,58],"\\bnext\\s+dev\\s+--turbo\\b","\\bnext\\s+dev\\s+--turbopack\\b",[60],"next.config.*",{"aliases":62,"intents":66,"entities":71},[63,5,64,65],"next bundler","fast bundler","hmr",[67,68,69,70],"enable turbopack","fix build issue","speed up dev server","configure bundler",[72,73,20,74],"Turbopack","HMR","next dev --turbopack","main","9a4409c8751439c3aeeea2bc3940ba05dc3cd3b5","plugins\u002Fvercel\u002Fskills\u002Fturbopack",0,"https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins","https:\u002F\u002Fgithub.com\u002FNagyVikt","https:\u002F\u002Fwebu.hu\u002F","Codex is a tool they said...\r\n\r\nCreator of GitGuardex, CueCards. Tech stack: Next.js · TypeScript · Rust · Linux. ","2026-03-30 02:19:53",{"source":8,"skillName":5,"commands":85,"prompt":95,"zipAvailable":96},[86,89,92],{"tool":87,"command":88},"npx","npx skills add NagyVikt\u002Fcodex-plugins --skill turbopack",{"tool":90,"command":91},"bunx","bunx skills add NagyVikt\u002Fcodex-plugins --skill turbopack",{"tool":93,"command":94},"pnpm","pnpm dlx skills add NagyVikt\u002Fcodex-plugins --skill turbopack","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fturbopack\u002FSKILL.md",true,[],[99,141,174,196,223,245],{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":121,"publishedAt":38},"01M6K1ZEN8P9R2S6NPNJNJ8JVH","workflow","Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause\u002Fresume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fworkflow\u002FSKILL.md",[105,110,113,118],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",{"categoryNo":111,"categoryName":112,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":114,"categoryName":115,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":119,"categoryName":120,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000038","人力资源",[101,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140],"workflows","create","run","streaming","logs","start","why","loop","wait for","branch","auto","log","conversation","human","lib","condition","rendering","retries","sleep",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":157,"publishedAt":38},"01M6K1Z71NWFSPHK2VJJ73MVSY","verification","Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fverification\u002FSKILL.md",[147,150,151,154],{"categoryNo":148,"categoryName":149,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},{"categoryNo":152,"categoryName":153,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":155,"categoryName":156,"taxonomyType":116,"taxonomyTypeDesc":117},"01JBSEEDCAT000000000000033","数据分析师",[143,158,125,159,160,161,131,162,163,164,165,166,167,168,169,170,171,172,23,173],"auth","routing middleware","api","projects","user story","full stack","jest","local","project","end","app","false","unit","error","middleware","unit test",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":181,"publishedAt":38},"01M6K1YPRYJS3BQEDP8HKBHPEJ","vercel-storage","Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-storage\u002FSKILL.md",[180],{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},[182,183,184,37,124,185,186,132,187,188,27,189,190,191,168,136,192,193,194,195],"storage","vercel storage","vercel","supabase","migrate","router","clerk","prisma","connection pooling","neon","turso","upstash","URL","auth0",{"skillNo":197,"name":198,"nameZh":6,"description":199,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":200,"categories":201,"keywords":209,"publishedAt":38},"01M6K1YFEP0GPPGMQ3D0FPTS27","vercel-services","Vercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-services\u002FSKILL.md",[202,205,206],{"categoryNo":203,"categoryName":204,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":106,"categoryName":107,"taxonomyType":108,"taxonomyTypeDesc":109},{"categoryNo":207,"categoryName":208,"taxonomyType":108,"taxonomyTypeDesc":109},"01JBSEEDCAT000000000000011","运维与部署",[210,211,184,212,213,214,32,215,216,217,19,75,218,219,166,220,168,221,171,222],"vercel services","services","frontend","docker compose","SET","monorepo","go api","fastapi","aws lambda","go backend","get","apps","python backend",{"skillNo":224,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":227,"categories":228,"keywords":229,"publishedAt":38},"01M6K1Y8S3CRD43DPKX0PK1MTT","vercel-sandbox","Vercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when executing user-generated or AI-generated code in isolation.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-sandbox\u002FSKILL.md",[],[230,231,184,232,233,123,124,234,235,236,237,238,239,240,241,242,23,243,225,244],"sandbox","vercel sandbox","safe","ai agents","code","ai sdk","Code Generation","playground","generated","spawn","install","runner","io","child","student",{"skillNo":246,"name":247,"nameZh":6,"description":248,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":249,"categories":250,"keywords":252,"publishedAt":38},"01M6K1Y1J8S7AN97H75SHBGF7J","vercel-queues","Vercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60\u002F1M ops. Powers Workflow DevKit. Use when building async processing, fan-out patterns, or event-driven architectures.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-queues\u002FSKILL.md",[251],{"categoryNo":111,"categoryName":112,"taxonomyType":108,"taxonomyTypeDesc":109},[253,184,101,122,125,254,214,160,32,19,255,256,257,258,168,136,259,139,23,260],"vercel queues","beta","message","delivery","across","worker","processing","at"]