flags▌
vercel/next.js · updated Apr 8, 2026
Use this skill when adding or changing framework feature flags in Next.js internals.
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. __NEXT_PPR 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 tobundleType === 'app'), new taskfile tasks, updatemodule.compiled.jsselector, and still set env var innext-server.ts+export/worker.tsfor 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) viataskfile.jsbundle tasks. - Bundle selection occurs at runtime in
src/server/route-modules/app-page/module.compiled.jsbased onprocess.envvars. - Variants:
{turbo/webpack} × {experimental/stable/nodestreams/experimental-nodestreams} × {dev/prod}= up to 16 bundles per route type. define-env.tsaffects user bundling, not pre-compiled runtime internals.process.env.Xchecks inapp-render.tsxare either replaced by DefinePlugin at runtime-bundle-build time, or read as actual env vars at server startup. They are NOT affected by the user's defines fromdefine-env.ts.- Gotcha: DefinePlugin entries in
next-runtime.webpack-config.jsmust be scoped to the correctbundleType(e.g.apponly, notserver) to avoid replacing assignment targets innext-server.ts.
Related Skills
$dce-edge- DCE-safe require patterns and edge constraints$react-vendoring- entry-base boundaries and vendored React$runtime-debug- reproduction and verification workflow
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.5★★★★★72 reviews- ★★★★★Min Khan· Dec 28, 2024
I recommend flags for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Omar Chen· Dec 28, 2024
We added flags from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Sakura Torres· Dec 12, 2024
flags has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Ren Sethi· Dec 12, 2024
Useful defaults in flags — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Neel Abebe· Dec 8, 2024
flags fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Chaitanya Patil· Dec 4, 2024
Useful defaults in flags — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Sakura White· Dec 4, 2024
flags reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Omar Yang· Nov 27, 2024
flags is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Piyush G· Nov 23, 2024
flags has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★James Ramirez· Nov 19, 2024
Solid pick for teams standardizing on skills: flags is focused, and the summary matches what you get after install.
showing 1-10 of 72