Agent skill · software engineering · vercel
flags
How to add or modify Next.js experimental feature flags end-to-end. Use when editing config-shared.ts, config-schema.ts, define-env-plugin.ts, next-server.ts, export/worker.ts, or module.compiled.js. Covers type declaration, zod schema, build-time injection, runtime env plumbing, and the decision between runtime env-var branching vs separate bundle variants.
Why this skill is useful
Provides detailed domain-specific knowledge on managing Next.js feature flags, including configuration and runtime considerations that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 141,663 stars on the source repository.
What this skill does
Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. Required Wiring All flags need: config-shared.ts (type) → config-schema.ts (zod). If the flag is consumed in user-bundled code (client components, edge routes, app-page.ts template), also add it to define-env.ts for build-time injection. Runtime-only flags consumed exclusively in pre-compiled bundles can skip define-env.ts. Where the Flag Is Consumed Client/bundled code only (e.g. NEXTPPR in client components): define-env.ts is sufficient. Webpack/Turbopack replaces process.env.X at the user's build time. Pre-compiled runtime bundles (e.g. code in app-render.tsx): The flag must also be set as a real process.env var at runtime, because app-render.tsx runs from pre-compiled bundles where define-env.ts doesn't reach. Two approaches: Runtime env var: Set in next-server.ts + export/worker.ts. Both code paths stay in one bundle. Simple but increases bundle size. Separate bundle variant: Add DefinePlugin entry in next-runtime.webpack-config.js (scoped to bundleType === 'app'), new taskfile tasks, update module.compiled.js selector, and still set env var in next-server.ts + export/worker.ts for bundle selection. Eliminates dead code but adds build complexity. For runtime flags, also add the field to the NextConfigRuntime Pick type in config-shared.ts. Runtime-Bundle Model Runtime bundles are built by next-runtime.webpack-config.js (rspack) via taskfile.js bundle tasks. Bundle selection occurs at runtime in src/server/route-modules/app-page/module.compiled.js based on process.env vars. Variants: {turbo/webpack} × {experimental/stable/nodestreams/experimental-nodestreams} × {dev/prod} = up to 16 bundles per route type. define-env.ts affects user bundling, not pre-compiled runtime internals. process.env.X checks in app-render.tsx are either replaced by DefinePlugin at runtime-bundle-build time, or read as actual env vars at server startup. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel/flags--64dad6