flags

por vercel

Use esta habilidade ao adicionar ou alterar flags de funcionalidade do framework nos internos do Next.js.

npx skills add https://github.com/vercel/next.js --skill flags

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 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. They are NOT affected by the user's defines from define-env.ts.
  • Gotcha: DefinePlugin entries in next-runtime.webpack-config.js must be scoped to the correct bundleType (e.g. app only, not server) to avoid replacing assignment targets in next-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

Mais skills de vercel

vercel
vercel
API REST do Vercel emulada para desenvolvimento e testes locais. Use quando o usuário precisar interagir com endpoints da API do Vercel localmente, testar integrações com o Vercel,…
cron-jobs
vercel
Configuração e melhores práticas de Vercel Cron Jobs. Use ao adicionar, editar ou depurar tarefas agendadas em vercel.json.
codegen
vercel
Utilitários de geração de código para json-render. Use ao gerar código a partir de especificações de UI, construir exportadores de código personalizados, percorrer especificações ou serializar props para…
next-best-practice
vercel
Práticas recomendadas do Next.js - convenções de arquivos, limites de RSC, padrões de dados, APIs assíncronas, metadados, tratamento de erros, manipuladores de rotas, otimização de imagens/fontes,…
benchmark-sandbox
vercel
Executa cenários de avaliação do vercel-plugin em Vercel Sandboxes em vez de painéis locais do WezTerm. Provisiona microVMs efêmeras com Claude Code + plugin pré-instalado,…
write-guide
vercel
Produza um guia técnico que ensine um caso de uso do mundo real por meio de exemplos progressivos. Os
benchmark-testing
vercel
Criar e lançar projetos de teste de benchmark para exercitar a injeção de habilidades do vercel-plugin em cenários realistas. Configura diretórios isolados, instala o…
ai-gateway
vercel
Orientação especializada do Vercel AI Gateway. Use ao configurar roteamento de modelos, failover de provedores, rastreamento de custos ou gerenciamento de múltiplos provedores de IA através de uma interface unificada…