[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JDATGD7VS64GK3FDRQAG7S":3,"skill-same:01M6JDATGD7VS64GK3FDRQAG7S":60},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":43,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":45,"install":46,"resources":59},"01M6JDATGD7VS64GK3FDRQAG7S","nextjs-turbopack",null,"Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fnextjs-turbopack\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31],"nextjs","turbopack","nextjs turbopack","dev","fs","Next.js","js","use","next","caching","speed","webpack","bundling","when to use","2026-11-10 10:12:30",false,"---\nname: nextjs-turbopack\ndescription: Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.\norigin: ECC\n---\n\n# Next.js and Turbopack\n\nNext.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.\n\n## When to Use\n\n- **Turbopack (default dev)**: Use for day-to-day development. Faster cold start and HMR, especially in large apps.\n- **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).\n- **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.\n\nUse when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.\n\n## How It Works\n\n- **Turbopack**: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).\n- **Default in dev**: From Next.js 16, `next dev` runs with Turbopack unless disabled.\n- **File-system caching**: Restarts reuse previous work; cache is typically under `.next`; no extra config needed for basic use.\n- **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).\n\n## Examples\n\n### Commands\n\n```bash\nnext dev\nnext build\nnext start\n```\n\n### Usage\n\nRun `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.\n\n## Middleware File Naming\n\nNext.js 16 introduced `proxy.ts` as the middleware filename, replacing the older `middleware.ts` convention:\n\n- **Next.js 16+**: use `proxy.ts` at the project root\n- **Pre-Next.js 16**: use `middleware.ts` at the project root\n\nThe filename change is tied to the **Next.js version**, not to which bundler (Turbopack or webpack) is in use. Always check the official docs for the version you are reviewing.\n\n**Do not flag `proxy.ts` as a misnamed or missing middleware file in Next.js 16 projects.** The file is correct and intentional. Suggesting a rename to `middleware.ts` will break middleware execution.\n\nReference: [Next.js proxy docs](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started\u002Fproxy)\n\n## Best Practices\n\n- Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.\n- If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.\n- For production bundle size issues, use the official Next.js bundle analysis tooling for your version.\n","# Next.js and Turbopack\n\nNext.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.\n\n## When to Use\n\n- **Turbopack (default dev)**: Use for day-to-day development. Faster cold start and HMR, especially in large apps.\n- **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).\n- **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.\n\nUse when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.\n\n## How It Works\n\n- **Turbopack**: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).\n- **Default in dev**: From Next.js 16, `next dev` runs with Turbopack unless disabled.\n- **File-system caching**: Restarts reuse previous work; cache is typically under `.next`; no extra config needed for basic use.\n- **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).\n\n## Examples\n\n### Commands\n\n```bash\nnext dev\nnext build\nnext start\n```\n\n### Usage\n\nRun `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.\n\n## Middleware File Naming\n\nNext.js 16 introduced `proxy.ts` as the middleware filename, replacing the older `middleware.ts` convention:\n\n- **Next.js 16+**: use `proxy.ts` at the project root\n- **Pre-Next.js 16**: use `middleware.ts` at the project root\n\nThe filename change is tied to the **Next.js version**, not to which bundler (Turbopack or webpack) is in use. Always check the official docs for the version you are reviewing.\n\n**Do not flag `proxy.ts` as a misnamed or missing middleware file in Next.js 16 projects.** The file is correct and intentional. Suggesting a rename to `middleware.ts` will break middleware execution.\n\nReference: [Next.js proxy docs](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fgetting-started\u002Fproxy)\n\n## Best Practices\n\n- Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.\n- If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.\n- For production bundle size issues, use the official Next.js bundle analysis tooling for your version.\n",{"name":5,"origin":37,"description":7},"ECC","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fecc\u002Fnextjs-turbopack",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add S3YED\u002Fappie-kit --skill nextjs-turbopack",{"tool":52,"command":53},"bunx","bunx skills add S3YED\u002Fappie-kit --skill nextjs-turbopack",{"tool":55,"command":56},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill nextjs-turbopack","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fnextjs-turbopack\u002FSKILL.md",true,[],[61,97,132,158,189,214],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":78,"publishedAt":32},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[67,72,75],{"categoryNo":68,"categoryName":69,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":73,"categoryName":74,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":76,"categoryName":77,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000023","Skill与智能体开发",[79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":111,"publishedAt":32},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[103,106],{"categoryNo":104,"categoryName":105,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":107,"categoryName":108,"taxonomyType":109,"taxonomyTypeDesc":110},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":32},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[138,139],{"categoryNo":76,"categoryName":77,"taxonomyType":70,"taxonomyTypeDesc":71},{"categoryNo":107,"categoryName":108,"taxonomyType":109,"taxonomyTypeDesc":110},[113,141,117,142,143,144,119,145,146,147,148,149,150,151,152,153,154,155,156,157],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":168,"publishedAt":32},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[164,167],{"categoryNo":165,"categoryName":166,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":76,"categoryName":77,"taxonomyType":70,"taxonomyTypeDesc":71},[169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":32},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[195],{"categoryNo":76,"categoryName":77,"taxonomyType":70,"taxonomyTypeDesc":71},[197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":215,"name":216,"nameZh":6,"description":217,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":218,"categories":219,"keywords":227,"publishedAt":32},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[220,223,226],{"categoryNo":221,"categoryName":222,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":224,"categoryName":225,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":76,"categoryName":77,"taxonomyType":70,"taxonomyTypeDesc":71},[228,229,230,231,232,233,234,235,172,236,237,119,238,175,239,206,240,241,242,243],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]