Communitygithub.com

nextjs-turbopack

Next.js 16+ 与 Turbopack — 增量打包、文件系统缓存、开发效率,以及何时使用 Turbopack 而非 webpack。

nextjs-turbopack 是什么?

该技能提供了关于 Next.js 16+ 和 Turbopack 的全面指南。Turbopack 是一个用 Rust 编写的增量打包工具,在 Next.js 16 中默认用于本地开发,它能显著加快开发启动速度和热更新。该技能解释了何时使用 Turbopack(默认开发环境)与 webpack(遗留开发环境,用于兼容特定插件或 Bug 场景),并涵盖了生产构建行为。它详细介绍了 Turbopack 的工作原理,包括文件系统缓存(使重启速度提升 5-14 倍)以及实验性的 Bundle Analyzer(用于检查输出并优化代码分割)。此外,该技能还特别强调了 Next.js 16 中中间件文件名的变更(从 `middleware.ts` 改为 `proxy.ts`),并给出了避免命名错误的最佳实践。该技能适用于 Next.js 16+ 应用的开发、调试和性能优化,支持命令行工具和官方捆绑分析工具。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/nextjs-turbopack

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Next.js 与 Turbopack

Next.js 16+ 在本地开发中默认使用 Turbopack:这是一个用 Rust 编写的增量打包工具,可显著提升开发启动速度和热更新速度。

何时使用

  • Turbopack(默认开发):用于日常开发。在大规模应用中,冷启动和 HMR 速度更快。
  • Webpack(遗留开发):仅在遇到 Turbopack 错误或在开发中依赖仅 webpack 支持的插件时使用。通过 --webpack(或 --no-turbopack,具体取决于您的 Next.js 版本;请查阅相应版本的文档)禁用。
  • 生产环境:生产构建行为(next build)可能使用 Turbopack 或 webpack,具体取决于 Next.js 版本;请查阅您对应版本的最新官方文档。

适用于:开发或调试 Next.js 16+ 应用、诊断开发启动缓慢或 HMR 问题、或优化生产包体积。

工作原理

  • Turbopack:Next.js 开发的增量打包工具。利用文件系统缓存,重启速度更快(例如,在大型项目上提升 5-14 倍)。
  • 默认在开发中使用:从 Next.js 16 开始,next dev 默认使用 Turbopack,除非显式禁用。
  • 文件系统缓存:重启时重用之前的工作;缓存通常位于 .next 目录下;基本使用无需额外配置。
  • Bundle Analyzer(Next.js 16.1+):实验性的 Bundle Analyzer,用于检查输出并发现体积较大的依赖;通过配置或实验性标记启用(请查阅您对应版本的 Next.js 文档)。

示例

命令

next dev
next build
next start

使用方式

运行 next dev 进行本地开发,Turbopack 将自动生效。使用 Bundle Analyzer(请查阅 Next.js 文档)优化代码分割并裁剪大型依赖。尽可能使用 App Router 和服务端组件。

中间件文件命名

Next.js 16 引入了 proxy.ts 作为中间件文件名,取代了之前的 middleware.ts 约定:

  • Next.js 16+:在项目根目录使用 proxy.ts
  • Next.js 16 之前:在项目根目录使用 middleware.ts

此文件名变更与 Next.js 版本 相关,而非与使用的打包工具(Turbopack 或 webpack)相关。请务必查阅您所审查版本对应的官方文档。

在 Next.js 16 项目中,不要将 proxy.ts 标记为命名错误或缺失的中间件文件。 该文件名正确且有意为之。建议重命名为 middleware.ts 将导致中间件执行失败。

参考文档:Next.js 代理文档

最佳实践

  • 保持使用最新的 Next.js 16.x 版本,以获得稳定的 Turbopack 和缓存行为。
  • 如果开发速度慢,请确保使用 Turbopack(默认)且缓存未被不必要地清除。
  • 针对生产环境包体积问题,请使用您所对应版本的最新官方 Next.js 捆绑分析工具。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/content-engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content calendars, or one source asset adapted cleanly across platforms.

affaan-m/ECC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky. Adapts content per platform using content-engine patterns. Never posts identical content cross-platform. Use when the user wants to distribute content across social platforms.

affaan-m/fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

affaan-m/manim-video

日本語翻訳:このファイルは manim-video 用の日本語翻訳が必要です

affaan-m/remotion-video-creation

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

affaan-m/video-editing

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

agent-self-evaluation

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

agent-sort

Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.

ai-first-engineering

Engineering operating model for teams where AI agents generate a large share of implementation output. Use when setting team process, review gates, or ownership rules for a codebase largely written by agents.

ai-regression-testing

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code. Use when adding regression coverage to AI-assisted code, or when the same model both wrote and reviewed a change.

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project.

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

相关技能