Skills Agentes

Dce Edge

Patrones de require() seguros para eliminación de código muerto y restricciones del runtime edge. Úsalo al escribir require condicionales, proteger imports de Node o editar define-env-plugin.ts.

Oficial
Estrellas
142k

en todo el repo

Actividad
43

0–100, la ruta de este skill

Actualizado
hace 3 meses

último commit aquí

Commits
0

últimos 90 días

Contexto
1k tok

101 tok en reposo

Paquete
1 archivo

4 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add vercel/next.js --skill dce-edge --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Explica el patrón de `require()` seguro para la eliminación de código muerto de webpack, con ramas if/else
  • Cubre la interacción con TypeScript y la asignación definitiva
  • Aclara que `NEXT_RUNTIME` no es un feature flag, y cómo forzar flags a falso para edge en `define-env.ts`
  • Recoge las restricciones del runtime edge y las trampas de la plantilla `app-page.ts`

Úsalo cuando

  • Escribir `require()` condicionales o proteger imports solo de Node como `node:stream`
  • Editar `define-env-plugin.ts`, `app-render` o `stream-utils` para builds de edge

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • Protege este import de Node para el runtime edge
    • ¿Por qué no se elimina este código en el bundle edge?
    • Revisa este require condicional

    SKILL.md

    En inglés

    DCE + Edge

    Use this skill when changing conditional require() paths, Node-only imports, or edge/runtime branching.

    DCE-Safe require() Pattern

    Webpack 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:

    • Early-return/throw guards: webpack doesn't do control-flow analysis for throws/returns, so the require() is still traced.
    • Bare 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.

    TypeScript + DCE Interaction

    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.

    Compile-Time Switcher Pattern

    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 Flag

    In 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 Runtime Constraints

    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 Gotchas

    • app-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.
    • Template helpers should stay out of 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()).

    Verification

    • Validate edge bundling regressions with pnpm test-start-webpack test/e2e/app-dir/app/standalone.test.ts
    • For module-resolution/build-graph fixes, verify without NEXT_SKIP_ISOLATE=1

    Related Skills

    • $flags - flag wiring (config/schema/define-env/runtime env)
    • $react-vendoring - entry-base boundaries and vendored React
    • $runtime-debug - reproduction and verification workflow

    Reproducido de vercel/next.js bajo licencia MIT. Leer esta página en markdown.

    Archivos

    1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Antes de instalar

    Es un skill interno del repositorio de Next.js.

    Detalles

    Creador
    vercel
    Licencia
    MIT
    Recursos incluidos
    Solo SKILL.md
    Repositorio
    vercel/next.js
    Código fuente
    Ver SKILL.md

    Etiquetas

    Más de vercel/next.js

    Este repo incluye 22 skills. Si instalas uno, normalmente ya tienes los demás.

    Activa Cache Components en una app de Next.js y resuelve las rutas bloqueantes que aparecen. Úsalo para adoptar o migrar, activar el flag cacheComponents o decidir entre excluir rutas y arreglarlas.

    Costo de contexto al activarse
    8.1k tok
    Tamaño del paquete
    3 archivos
    Última actualización
    hace 3 días
    Oficialherramientas desarrollo

    Lleva una ruta de Next.js a navegación instantánea bajo Cache Components o PPR mediante un bucle agéntico: codifica el objetivo como un e2e instant() en rojo y lo trabaja hasta verde, ruta a ruta.

    Costo de contexto al activarse
    6.3k tok
    Tamaño del paquete
    6 archivos
    Última actualización
    hace 5 días
    Oficialherramientas desarrollo

    Activa Partial Prefetching en una app de Next.js y resuelve las insights que surgen: audita los Link con prefetch, activa partialPrefetching y opta por rutas con prefetch = 'partial'.

    Costo de contexto al activarse
    6k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 3 días
    Oficialherramientas desarrollo

    Verifica el comportamiento en runtime de Next.js tras editar código de la aplicación. Combina /_next/mcp, la visión de Next.js, con agent-browser, la del navegador. Requiere un next dev en marcha.

    Costo de contexto al activarse
    2k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 5 días
    Oficialtesting qa

    Gestiona PRs apilados y parte el trabajo en ramas revisables con gh-stack: creación, visualización, edición, push, envío, sincronización, rebase, merge y checkout.

    Costo de contexto al activarse
    2.3k tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 12 días
    Oficialherramientas desarrollo

    Compara el rendimiento de cambios de React o Next.js en VMs de Vercel Sandbox con estadística A/B pareada: rps, latencia, p95, TTFB, RSS y bytes de documento y Flight.

    Costo de contexto al activarse
    4.1k tok
    Tamaño del paquete
    13 archivos
    Última actualización
    hace 19 días
    Oficialtesting qa

    Skills relacionados

    Cómo crear y mantener skills de agente en .agents/skills/. Úsalo al crear un SKILL.md, escribir descripciones, elegir campos de frontmatter o decidir qué va en un skill y qué en AGENTS.md.

    Costo de contexto al activarse
    1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 3 meses
    Oficialherramientas desarrollo

    Lleva un pull request fusionado de Next.js desde canary a una rama de release anterior como next-16-2: localiza el commit, crea la rama, hace cherry-pick, valida y abre el PR.

    Costo de contexto al activarse
    832 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    Oficialherramientas desarrollo

    Crea ramas, commits, pushes y pull requests de GitHub para Next.js. Cubre la plantilla de PR, el formato de --body, las ramas codex/ y las directivas de git de la app Codex.

    Costo de contexto al activarse
    944 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    Oficialherramientas desarrollo