改一行 Next.js 配置要动 6 个文件？Vercel 官方这个 Skill 告诉你正确姿势

如果你改过 Next.js 配置，这个 Skill 能救你一命

做过 Next.js 二次开发的朋友，一定被它的 feature flag 系统折磨过。

什么叫 feature flag？简单说就是 Next.js 源码里那些 `experimental.xxx`、`ppr`、`serverActions` 之类的实验性开关。每个 flag 不是一个简单的 boolean，而是涉及类型声明、Zod schema、构建时注入、运行时 env 变量、甚至 webpack/rspack 的 bundle 变体——改一行配置，背后要联动 5～6 个文件。

Vercel 官方出了一个 Agent Skill，叫 flags，专门教 AI 如何正确添加或修改 Next.js 的 feature flag。它不是教你「怎么开启某个 flag」，而是教你「怎么从零到一在框架层面新增一个 flag」，覆盖全链路：

• config-shared.ts：类型声明 + NextConfigRuntime Pick
• config-schema.ts：Zod 校验 schema
• define-env.ts：用户构建时的注入（客户端组件用这个就够了）
• next-server.ts / export/worker.ts：运行时真实 env 变量
• webpack/rspack bundle 变体：runtime bundle 的取舍（简单增加 bundle 大小 vs 拆出独立变体但增加构建复杂度）

最容易被坑的地方

Skill 里特别指出了一个 Gotcha：DefinePlugin 的 webpack 配置项必须 scoped 到正确的 bundleType（比如只针对 `app`，不要动 `server`），否则会意外替换掉 `next-server.ts` 里的赋值语句。这个坑踩过的都知道有多难查。

另外还配套了三个相关 Skill：

• $dce-edge：DCE 安全的 require 模式和边缘约束
• $react-vendoring：React 供应商化的边界管理
• $runtime-debug：运行时调试与验证工作流

谁适合用？

如果你在参与 Next.js 框架开发、做 Vercel 系的内部工具链、或者需要深度定制 Next.js 构建流程，这个 Skill 是目前最权威的参考实现。官方维护，最后更新 2026-06-24。

GitHub 仓库 Star 14 万+，质量有保证。

https://github.com/vercel/next.js

GitHub: https://github.com/vercel/next.js/tree/canary/.agents/skills/flags