トランクベース開発を加速するVercel Feature Flags入門 - Flags SDK・Toolbar・Edge Configの使い方

import { flag } from 'flags/next'

// シンプルなbooleanの例
export const showNewFeature = flag<boolean>({
  key: 'new-feature',
  decide: () => process.env.ENABLE_NEW_FEATURE === 'true',
})

// リクエストヘッダー（地域情報）を使う例
type GDPRBannerEntities = {
  country: string
}

export const enableGDPRBanner = flag<boolean, GDPRBannerEntities>({
  key: 'gdpr-banner',
  identify({ headers }): GDPRBannerEntities {
    return {
      country: headers.get('x-vercel-ip-country') || 'US',
    }
  },
  decide({ entities }) {
    const euCountries = ['DE', 'FR', 'ES', 'IT'] // 他のEU加盟国も追加
    return euCountries.includes(entities.country)
  },
})

// クッキー（ユーザーティア）に応じて変える例
export type BannerTheme = 'default' | 'premium' | 'sale'

type HeroBannerEntities = {
  userTier: string | undefined
}

export const heroBannerTheme = flag<BannerTheme, HeroBannerEntities>({
  key: 'hero-banner-theme',
  identify({ cookies }): HeroBannerEntities {
    return {
      userTier: cookies.get('user_tier')?.value,
    }
  },
  decide({ entities }) {
    if (entities.userTier === 'premium') {
      return 'premium'
    }
    if (process.env.IS_SALE_PERIOD === 'true') {
      return 'sale'
    }
    return 'default'
  },
})

import { showNewFeature, enableGDPRBanner, heroBannerTheme } from '@/lib/flags'
import { GDPRBanner, NewFeatureComponent, HeroBanner } from '@/components'

export default async function HomePage() {
  // 複数のフラグをパラレルで評価
  const [isNewFeatureEnabled, isGDPRBannerEnabled, bannerTheme] = await Promise.all([
    showNewFeature(),
    enableGDPRBanner(),
    heroBannerTheme(),
  ])

  return (
    <main>
      <HeroBanner theme={bannerTheme} />
      {isNewFeatureEnabled && <NewFeatureComponent />}
      {isGDPRBannerEnabled && <GDPRBanner />}
    </main>
  )
}

import { flag } from 'flags/next'
import { edgeConfigAdapter } from '@flags-sdk/edge-config'

// Edge Configからブーリアン値を取得
export const showBetaDashboard = flag<boolean>({
  key: 'beta-dashboard',
  adapter: edgeConfigAdapter(),
  decide({ value }) {
    return value ?? false
  },
})

// Edge Configに 'A' または 'B' を直接格納するパターン
// 全ユーザーに同じバリアントを表示（段階的ロールアウト向け）
export const checkoutVariant = flag<'A' | 'B'>({
  key: 'checkout-variant',
  adapter: edgeConfigAdapter(),
  decide({ value }) {
    return value === 'A' || value === 'B' ? value : 'A'
  },
})

import { NextResponse, type NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

export async function middleware(request: NextRequest) {
  const { nextUrl, ip } = request

  try {
    const [isMaintenance, blockedIps] = await Promise.all([
      get<boolean>('isMaintenance').then(v => v ?? false),
      get<string[]>('blockedIps').then(v => v ?? []),
    ])

    // IPブロック
    if (ip && blockedIps.includes(ip)) {
      return new NextResponse('Forbidden', { status: 403 })
    }

    // メンテナンスモード
    const isMaintenancePath =
      nextUrl.pathname === '/maintenance' ||
      nextUrl.pathname.startsWith('/maintenance/')

    if (isMaintenance && !isMaintenancePath) {
      return NextResponse.rewrite(new URL('/maintenance', request.url))
    }

    return NextResponse.next()
  } catch (error) {
    console.error('Edge Config error:', error)
    return NextResponse.next()
  }
}