Vercel Flags、プラットフォーム組み込みの feature flags

480文字
2分
編集

Vercel Flags は、Vercel プラットフォームに組み込まれた feature flags である。デプロイと同一ダッシュボードでフラグを管理し、コードのマージと本番リリースを分離したいアプリ開発者向けである。2026年4月に一般提供となり、社内ではそれ以前から v0 などで運用されていた。

主な特徴は次のとおり。

  • サーバー側評価: Flags SDK は既定でサーバー上でフラグを評価する。Next.js の React Server Components ではレンダー中に await で読み取り、クライアント側の追加リクエストや表示のちらつきを避けられる。設定変更はミリ秒単位で各リージョンへ伝播する。
  • コードとダッシュボードの自動同期: コードでフラグを定義してデプロイすると、ダッシュボードに draft として登録される。コードから削除すると unreferenced とマークされ、整理対象が分かる。
  • Precompute: 静的ページを CDN 配信しつつフラグで振り分ける高度なパターン。ビルド時に全バリアントを生成し、Routing Middleware(Next.js では proxy.ts)がユーザーごとに適切な静的ページへルーティングする。
  • エージェント向け CLI: vercel flags で作成、ターゲティング、段階的ロールアウト、アーカイブをターミナルから操作できる。
  • Flags Explorer: Vercel Toolbar に組み込まれ、ブラウザセッション内でフラグを上書きして検証できる。共有設定は変えず、再デプロイも不要である。

コードからは Flags SDK(オープンソース、プロバイダ非依存)で読み取る。Next.js と SvelteKit 向けアダプタが第一級で、他フレームワークは OpenFeature プロバイダ経由で利用できる。ターゲティングはユーザー属性、セグメント、環境ごとに設定し、段階的ロールアウトや kill switch も扱える。

全プランで利用可能である。v0 チームでは数百規模のフラグを常時運用し、新機能、AI モデルルーティング、本番 DB 移行の切り替えなどに使われている。

typescript
import { flag } from "flags/next"
import { vercelAdapter } from "@flags-sdk/vercel"

export const showNewFeature = flag({
  key: "show-new-feature",
  adapter: vercelAdapter()
})

#参考文献