Setting the skill. One moment.
24 skills · 112 min
Skills
Skill 4 of 24
DCE-safe require() patterns and edge runtime constraints.
2 minutes · 389 words · 8 sections
Install
npx skills add vercel/next.js --skill dce-edgenpx skills add vercel/next.js/plugin marketplace add vercel/next.jsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
Use this skill when changing conditional require() paths, Node-only imports, or edge/runtime branching.
require() PatternWebpack only DCEs a require() when it sits inside the dead branch of an if/else whose condition DefinePlugin can evaluate at compile time.
// CORRECT - webpack can eliminate the dead branch
if (process.env.__NEXT_USE_NODE_STREAMS) {
require('node:stream')
} else {
// web path
}What does NOT work:
require() is still traced.if without else: works for inline node:* specifiers but NOT for require('./some-module') that pulls a new file into the module graph.Always test edge changes with pnpm test-start-webpack on test/e2e/app-dir/app/standalone.test.ts (has edge routes), not with NEXT_SKIP_ISOLATE=1 which skips the full webpack compilation.
Use if/else (not two independent if blocks) when assigning a variable conditionally on process.env.X. TypeScript cannot prove exhaustiveness across if (flag) { x = a }; if (!flag) { x = b } and will error with “variable used before being assigned”. The if/else pattern satisfies both TypeScript (definite assignment) and webpack DCE.
Platform-specific code (node vs web) can use a single .ts switcher module that conditionally require()s either .node.ts or .web.ts into a typed variable, then re-exports the shared runtime API as named exports. Keep the branch as if/else so DefinePlugin can dead-code-eliminate the unused require(). Keep shared types canonical in .node.ts, with .web.ts importing them via import type and the switcher re-exporting types as needed. Examples: stream-ops.ts and debug-channel-server.ts.
NEXT_RUNTIME Is Not a Feature FlagIn user-project webpack server compilers, process.env.NEXT_RUNTIME is inlined to 'nodejs'. Guarding Node-only require('node:*') paths with NEXT_RUNTIME === 'nodejs' does not prune anything. For feature-gated codepaths, guard on the real feature define (e.g. process.env.__NEXT_USE_NODE_STREAMS).
Edge routes do NOT use pre-compiled runtime bundles. They are compiled by the user’s webpack/Turbopack, so define-env.ts controls DCE. Feature flags that gate node:* imports must be forced to false for edge builds in define-env.ts (isEdgeServer ? false : flagValue), otherwise webpack will try to resolve node:stream etc. and fail.
app-page.ts Template Gotchasapp-page.ts is a build template compiled by the user’s bundler. Any require() in this file is traced by webpack/turbopack at next build time. You cannot require internal modules with relative paths because they won’t be resolvable from the user’s project. Instead, export new helpers from entry-base.ts and access them via entryBase.* in the template.RenderResult. If app-page.ts needs a Node-stream-only utility, prefer a small dedicated helper module in server/stream-utils/ (with DCE-safe if/else + require()).pnpm test-start-webpack test/e2e/app-dir/app/standalone.test.tsNEXT_SKIP_ISOLATE=1$flags - flag wiring (config/schema/define-env/runtime env)$react-vendoring - entry-base boundaries and vendored React$runtime-debug - reproduction and verification workflowDCE-safe require() patterns and edge runtime constraints. Use when writing conditional require() calls, guarding Node-only imports (node:stream etc.), or editing define-env-plugin.ts / app-render / stream-utils for edge builds. Covers if/else branching for webpack DCE, TypeScript definite assignment, the NEXT_RUNTIME vs real feature flag distinction, and forcing flags false for edge in define-env.ts.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
canary, last pushed 28 August 2026.SKILL.md, not by matching a directory convention. 2 distinct layouts observed: .agents/skills/*/SKILL.md, skills/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Vercel, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree./vercel/next.js.md, and each skill at its own .md URL.