Communitygithub.com

nextjs-turbopack

Next.js 16+ 与 Turbopack — 增量打包、文件系统缓存、开发速度优化以及 Turbopack 与 webpack 的选型指南。

nextjs-turbopack 是什么?

该技能聚焦于 Next.js 16+ 与 Turbopack 的深度集成,旨在帮助开发者充分利用 Rust 编写的增量打包器来提升开发效率。Turbopack 在本地开发中默认启用,通过文件系统缓存实现快速冷启动和热更新,尤其适用于大型项目。文档详细说明了何时使用 Turbopack 或 webpack(如遇到 Turbopack 缺陷或依赖 webpack 专属插件时),以及生产构建的注意事项。此外,还涵盖了 Next.js 16 中中间件文件命名从 `middleware.ts` 到 `proxy.ts` 的变化,以及实验性 Bundle Analyzer 的用法,帮助开发者优化代码分割和依赖管理。此技能支持 Claude Code、Cursor、Codex 等主流 AI 代理平台,是 Next.js 开发者优化开发流程的必备参考。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/everything-claude-code/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+):实验性包分析工具,用于检查输出并发现大型依赖;可通过配置或实验性标志启用(详见对应版本文档)。

示例

命令

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 proxy 文档

最佳实践

  • 使用最新的 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/claude-api

Anthropic Claude API patterns for Python and TypeScript. Covers Messages API, streaming, tool use, vision, extended thinking, batches, prompt caching, and Claude Agent SDK. Use when building applications with the Claude API or Anthropic SDKs.

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

affaan-m/everything-claude-code

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/everything-claude-code-conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m/gget

gget CLI and Python workflow for quick genomic database queries, sequence lookup, BLAST-style searches, enrichment checks, and reproducible bioinformatics evidence logs.

affaan-m/literature-review

Systematic literature-review workflow for academic, biomedical, technical, and scientific topics, including search planning, source screening, synthesis, citation checks, and evidence logging.

affaan-m/motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

affaan-m/project-guidelines-example

Example project-specific skill template based on a real production application.

affaan-m/pubmed-database

Direct PubMed and NCBI E-utilities search workflows for biomedical literature, MeSH queries, PMID lookup, citation retrieval, and API-backed literature monitoring.

affaan-m/scholar-evaluation

Structured scholarly-work evaluation for papers, proposals, literature reviews, methods sections, evidence quality, citation support, and research-writing feedback.

affaan-m/uspto-database

USPTO patent and trademark data workflow for official record lookup, PatentSearch queries, TSDR checks, assignment data, and reproducible IP research logs.

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.

相关技能