flags

作成者: vercel

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

vercelのその他のスキル

vercel
vercel
ローカル開発およびテスト用のエミュレートされたVercel REST API。ユーザーがローカルでVercel APIエンドポイントとやり取りしたり、Vercel統合をテストしたりする必要がある場合に使用します。
cron-jobs
vercel
Vercel Cron Jobsの設定とベストプラクティス。vercel.jsonでスケジュールタスクを追加、編集、デバッグする際に使用します。
codegen
vercel
json-renderのコード生成ユーティリティ。UI仕様からコードを生成する際、カスタムコードエクスポーターの構築、仕様の走査、プロパティのシリアライズなどに使用します。
next-best-practice
vercel
Next.jsのベストプラクティス - ファイル規約、RSC境界、データパターン、非同期API、メタデータ、エラーハンドリング、ルートハンドラ、画像/フォント最適化、…
benchmark-sandbox
vercel
Vercel Sandbox上でvercel-pluginの評価シナリオを実行し、ローカルのWezTermパネルの代わりに使用します。Claude Codeとプラグインがプリインストールされた一時的なマイクロVMをプロビジョニングします…
write-guide
vercel
現実世界のユースケースを段階的な例を通じて教える技術ガイドを作成します。概念は読者が必要とするタイミングでのみ導入されます。
benchmark-testing
vercel
ベンチマークテストプロジェクトを作成し、起動して、現実的なシナリオ全体でvercel-pluginスキルインジェクションを実行します。隔離されたディレクトリを設定し、インストールし…
ai-gateway
vercel
Vercel AI Gatewayの専門的なガイダンス。モデルルーティング、プロバイダーのフェイルオーバー、コスト追跡、または統一された方法で複数のAIプロバイダーを管理する際に使用します。